mirror of
https://github.com/captbaritone/webamp.git
synced 2026-07-25 11:04:00 +00:00
Split up CSS rules
This commit is contained in:
Jordan Eldredge
parent
1bb3af4866
commit
45083a6a58
4 changed files with 828 additions and 820 deletions
793
css/main.css
Executable file
793
css/main.css
Executable file
|
|
@ -0,0 +1,793 @@
|
|||
/* Styles */
|
||||
#main-window {
|
||||
position: absolute;
|
||||
/* background-image: MAIN.BMP via Javascript */
|
||||
height: 116px;
|
||||
width: 275px;
|
||||
margin-top: -58px;
|
||||
margin-left: -137px;
|
||||
top: 40%;
|
||||
left: 50%;
|
||||
cursor:url('../cursors/MAINMENU.PNG?inline'), auto;
|
||||
/* Ask the browser to scale showing large pixels if possible */
|
||||
image-rendering: -moz-crisp-edges; /* Firefox */
|
||||
image-rendering: -o-crisp-edges; /* Opera */
|
||||
image-rendering: -webkit-optimize-contrast; /* Safari */
|
||||
image-rendering: pixelated; /* Only in Chrome > 40 */
|
||||
-ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
|
||||
}
|
||||
|
||||
#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 {
|
||||
-moz-transform: scale(.5);
|
||||
-moz-transform-origin: top left;
|
||||
-webkit-transform: scale(.5);
|
||||
-webkit-transform-origin: top left;
|
||||
}
|
||||
|
||||
#main-window.loading {
|
||||
background-image: none;
|
||||
background-color: #FFFFFF;
|
||||
border: 2px solid #dddddd;
|
||||
}
|
||||
/* Hide everything whil we are loading */
|
||||
#main-window.loading * {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#loading {
|
||||
display: none;
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
height: 30px;
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
top: 0; left: 0; bottom: 0; right: 0;
|
||||
}
|
||||
|
||||
/* Only show loading div while we are loading */
|
||||
#main-window.loading #loading {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#main-window.closed { display: none; }
|
||||
|
||||
#title-bar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 14px;
|
||||
width: 275px;
|
||||
/* background-image: TITLEBAR.BMP via Javascript */
|
||||
background-position: -27px -14px;
|
||||
cursor:url('../cursors/TITLEBAR.PNG?inline'), auto;
|
||||
}
|
||||
|
||||
#title-bar.selected {
|
||||
background-position: -27px 0px;
|
||||
}
|
||||
|
||||
.llama #title-bar {
|
||||
background-position: -27px -61px;
|
||||
}
|
||||
|
||||
.llama #title-bar.selected {
|
||||
background-position: -27px -57px;
|
||||
}
|
||||
|
||||
#option,
|
||||
#minimize,
|
||||
#shade,
|
||||
#close {
|
||||
position: absolute;
|
||||
height: 9px;
|
||||
width: 9px;
|
||||
top: 3px;
|
||||
cursor:url('../cursors/MAINMENU.PNG?inline'), auto;
|
||||
}
|
||||
|
||||
#title-bar #option {
|
||||
left: 6px;
|
||||
/* background-image: TITLEBAR.BMP via Javascript */
|
||||
}
|
||||
#title-bar #option #context-menu {
|
||||
display: none;
|
||||
top: 12px;
|
||||
left: 0px;
|
||||
}
|
||||
#title-bar #option:active,
|
||||
#title-bar #option.selected
|
||||
{
|
||||
background-position: 0 -9px;
|
||||
}
|
||||
#title-bar #option:active #context-menu,
|
||||
#title-bar #option.selected #context-menu
|
||||
{
|
||||
display: block;
|
||||
}
|
||||
|
||||
#title-bar #minimize {
|
||||
left: 244px;
|
||||
/* background-image: TITLEBAR.BMP via Javascript */
|
||||
background-position: -9px 0;
|
||||
}
|
||||
#title-bar #minimize:active {
|
||||
background-position: -9px -9px;
|
||||
}
|
||||
|
||||
#title-bar #shade {
|
||||
left: 254px;
|
||||
/* background-image: TITLEBAR.BMP via Javascript */
|
||||
background-position: 0px -18px;
|
||||
}
|
||||
#title-bar #shade:active {
|
||||
background-position: -9px -18px;
|
||||
}
|
||||
|
||||
#title-bar #close {
|
||||
left: 264px;
|
||||
/* background-image: TITLEBAR.BMP via Javascript */
|
||||
background-position: -18px 0px;
|
||||
cursor:url('../cursors/CLOSE.PNG?inline'), auto;
|
||||
}
|
||||
#title-bar #close:active {
|
||||
background-position: -18px -9px;
|
||||
}
|
||||
|
||||
.status #clutter-bar {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: 10px;
|
||||
height: 43px;
|
||||
width: 8px;
|
||||
/* background-image: TITLEBAR.BMP via Javascript */
|
||||
background-position: -304px 0;
|
||||
}
|
||||
|
||||
.status #clutter-bar.disabled {
|
||||
background-position: -312px 0;
|
||||
}
|
||||
|
||||
#clutter-bar div {
|
||||
position: absolute;
|
||||
height: 7px;
|
||||
width: 8px;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
#clutter-bar #button-o {
|
||||
top: 3px;
|
||||
height: 8px;
|
||||
}
|
||||
#clutter-bar #button-o:active {
|
||||
background-position: -304px -47px;
|
||||
}
|
||||
#clutter-bar #button-a {
|
||||
top: 11px;
|
||||
}
|
||||
#clutter-bar #button-a:active,
|
||||
#clutter-bar #button-a.selected {
|
||||
background-position: -312px -55px;
|
||||
}
|
||||
#clutter-bar #button-i {
|
||||
top: 18px;
|
||||
}
|
||||
#clutter-bar #button-i:active {
|
||||
background-position: -320px -62px;
|
||||
}
|
||||
#clutter-bar #button-d {
|
||||
top: 25px;
|
||||
height: 8px;
|
||||
}
|
||||
#clutter-bar #button-d:active,
|
||||
#clutter-bar #button-d.selected {
|
||||
background-position: -328px -69px;
|
||||
}
|
||||
#clutter-bar #button-v {
|
||||
top: 33px;
|
||||
}
|
||||
#clutter-bar #button-v:active {
|
||||
background-position: -336px -77px;
|
||||
}
|
||||
|
||||
.status #play-pause {
|
||||
position: absolute;
|
||||
top: 28px;
|
||||
left: 26px;
|
||||
height: 9px;
|
||||
width: 9px;
|
||||
/* background-image: PLAYPAUS.BMP via Javascript */
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.play .status #work-indicator {
|
||||
position: absolute;
|
||||
top: 28px;
|
||||
left: 24px;
|
||||
height: 9px;
|
||||
width: 3px;
|
||||
/* background-image: PLAYPAUS.BMP via Javascript */
|
||||
background-position: -36px 0;
|
||||
}
|
||||
.play .status #work-indicator.selected {
|
||||
background-position: -39px 0;
|
||||
}
|
||||
|
||||
.play .status #play-pause { }
|
||||
.pause .status #play-pause { background-position: -9px 0; }
|
||||
.stop .status #play-pause { background-position: -18px 0; }
|
||||
.status #time {
|
||||
position: absolute;
|
||||
left: 39px;
|
||||
top: 26px;
|
||||
/* Just to make it clickable */
|
||||
height: 13px;
|
||||
width: 59px;
|
||||
}
|
||||
|
||||
.stop .status #time { display:none; }
|
||||
.pause .status #time {
|
||||
animation: blink 2s step-start 1s infinite;
|
||||
-webkit-animation: blink 2s step-start 1s infinite;
|
||||
}
|
||||
|
||||
.status #time #minus-sign {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
left: -1px;
|
||||
width: 5px;
|
||||
height: 1px;
|
||||
/* background-image: NUMBERS.BMP via Javascript */
|
||||
background-position: -9px -6px;
|
||||
}
|
||||
.status #time.countdown #minus-sign {
|
||||
background-position: -20px -6px;
|
||||
}
|
||||
/* Alternate format for minus sign, when skin supports it */
|
||||
.status #time.ex #minus-sign {
|
||||
top: 0px;
|
||||
left: -1px;
|
||||
width: 9px;
|
||||
height: 13px;
|
||||
/* background-image: NUMS_EX.BMP via Javascript */
|
||||
background-position: -90px 0px;
|
||||
}
|
||||
.status #time.ex.countdown #minus-sign {
|
||||
background-position: -99px 0px;
|
||||
}
|
||||
|
||||
.status #time #minute-first-digit {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
left: 9px;
|
||||
height: 13px;
|
||||
width: 9px;
|
||||
}
|
||||
.status #time #minute-second-digit {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
left: 21px;
|
||||
height: 13px;
|
||||
width: 9px;
|
||||
}
|
||||
.status #time #second-first-digit {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
left: 39px;
|
||||
height: 13px;
|
||||
width: 9px;
|
||||
}
|
||||
.status #time #second-second-digit {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
left: 51px;
|
||||
height: 13px;
|
||||
width: 9px;
|
||||
}
|
||||
|
||||
#visualizer {
|
||||
position: absolute;
|
||||
width: 76px;
|
||||
height: 16px;
|
||||
top: 43px;
|
||||
left: 24px;
|
||||
}
|
||||
|
||||
.stop #visualizer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
.text {
|
||||
position: absolute;
|
||||
left: 112px;
|
||||
top: 27px;
|
||||
width: 152px;
|
||||
height: 6px;
|
||||
overflow: hidden;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#song-title {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.media-info #kbps {
|
||||
position: absolute;
|
||||
left: 111px;
|
||||
top: 43px;
|
||||
width: 15px;
|
||||
height: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.stop .media-info #kbps { display: none; }
|
||||
|
||||
.media-info #khz {
|
||||
position: absolute;
|
||||
left: 156px;
|
||||
top: 43px;
|
||||
width: 10px;
|
||||
height: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.stop .media-info #khz { display: none; }
|
||||
|
||||
.media-info .mono-stereo {
|
||||
position: absolute;
|
||||
left: 212px;
|
||||
top: 41px;
|
||||
width: 57px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
.media-info .mono-stereo div {
|
||||
position: absolute;
|
||||
height: 12px;
|
||||
/* background-image: MONOSTER.BMP via Javascript */
|
||||
}
|
||||
|
||||
.media-info .mono-stereo #mono {
|
||||
width: 29px;
|
||||
background-position: -29px -12px;
|
||||
}
|
||||
.media-info .mono-stereo #mono.selected {
|
||||
background-position: -29px 0;
|
||||
}
|
||||
.stop .media-info .mono-stereo #mono.selected {
|
||||
background-position: -29px -12px;
|
||||
}
|
||||
|
||||
.media-info .mono-stereo #stereo {
|
||||
left: 27px;
|
||||
width: 29px;
|
||||
background-position: 0 -12px;
|
||||
}
|
||||
.media-info .mono-stereo #stereo.selected {
|
||||
background-position: 0 0;
|
||||
}
|
||||
.stop .media-info .mono-stereo #stereo.selected {
|
||||
background-position: 0 -12px;
|
||||
}
|
||||
|
||||
#volume {
|
||||
position: absolute;
|
||||
left: 107px;
|
||||
top: 57px;
|
||||
height: 13px;
|
||||
width: 68px;
|
||||
/* background-image: VOLUME.BMP via Javascript */
|
||||
background-position: 0 0;
|
||||
cursor:url('../cursors/POSBAR.PNG?inline'), auto;
|
||||
}
|
||||
#volume::-webkit-slider-thumb {
|
||||
display: block;
|
||||
margin-top: 1px;
|
||||
height: 11px;
|
||||
width: 14px;
|
||||
/* background-image: VOLUME.BMP via Javascript */
|
||||
background-position: -15px -422px;
|
||||
cursor:url('../cursors/POSBAR.PNG?inline'), auto;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
#volume::-moz-range-thumb {
|
||||
margin-top: 1px;
|
||||
height: 11px;
|
||||
width: 14px;
|
||||
/* background-image: VOLUME.BMP via Javascript */
|
||||
background-position: -15px -422px;
|
||||
cursor:url('../cursors/POSBAR.PNG?inline'), auto;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
#volume:active::-webkit-slider-thumb {
|
||||
background-position: 0 -422px;
|
||||
}
|
||||
#volume:active::-moz-range-thumb {
|
||||
background-position: 0 -422px;
|
||||
}
|
||||
|
||||
#balance {
|
||||
position: absolute;
|
||||
left: 177px;
|
||||
top: 57px;
|
||||
height: 13px;
|
||||
width: 38px;
|
||||
/* background-image: BALANCE.BMP via Javascript */
|
||||
background-position: -9px 0;
|
||||
cursor:url('../cursors/POSBAR.PNG?inline'), auto;
|
||||
}
|
||||
|
||||
#balance::-webkit-slider-thumb {
|
||||
top: 1px;
|
||||
height: 11px;
|
||||
width: 14px;
|
||||
/* background-image: VOLUME.BMP via Javascript */
|
||||
background-position: -15px -422px;
|
||||
cursor:url('../cursors/POSBAR.PNG?inline'), auto;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
#balance::-moz-range-thumb {
|
||||
top: 1px;
|
||||
height: 11px;
|
||||
width: 14px;
|
||||
/* background-image: VOLUME.BMP via Javascript */
|
||||
background-position: -15px -422px;
|
||||
cursor:url('../cursors/POSBAR.PNG?inline'), auto;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
#balance:active::-webkit-slider-thumb {
|
||||
background-position: 0 -422px;
|
||||
}
|
||||
#balance:active::-moz-range-thumb {
|
||||
background-position: 0 -422px;
|
||||
}
|
||||
|
||||
.windows {
|
||||
position: absolute;
|
||||
left: 219px;
|
||||
top: 58px;
|
||||
width: 46px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
.windows div {
|
||||
position: absolute;
|
||||
width: 23px;
|
||||
height: 12px;
|
||||
/* background-image: SHUFREP.BMP via Javascript */
|
||||
}
|
||||
|
||||
.windows #equalizer-button {
|
||||
left: 0;
|
||||
background-position: 0 -61px;
|
||||
}
|
||||
.windows #equalizer-button:active {
|
||||
background-position: -46px -61px;
|
||||
}
|
||||
|
||||
.windows #playlist-button {
|
||||
left: 23px;
|
||||
background-position: -23px -61px;
|
||||
}
|
||||
.windows #playlist-button:active {
|
||||
background-position: -69px -61px;
|
||||
}
|
||||
|
||||
#position {
|
||||
position: absolute;
|
||||
left: 16px;
|
||||
top: 72px;
|
||||
width: 248px;
|
||||
height: 10px;
|
||||
/* background-image: POSBAR.BMP via Javascript */
|
||||
background-repeat: no-repeat;
|
||||
cursor:url('../cursors/POSBAR.PNG?inline'), auto;
|
||||
}
|
||||
|
||||
#position::-webkit-slider-thumb {
|
||||
height: 10px;
|
||||
width: 29px;
|
||||
background-position: -248px 0;
|
||||
/* background-image: POSBAR.BMP via Javascript */
|
||||
background-repeat: no-repeat;
|
||||
cursor:url('../cursors/POSBAR.PNG?inline'), auto;
|
||||
/*
|
||||
* Fix the strange bug in Safair/mobile-chrome
|
||||
* http://stackoverflow.com/questions/26727769/rendering-glitch-when-manipulating-range-input-value-via-javascript-in-webkit
|
||||
*/
|
||||
-webkit-box-sizing: border-box;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#position::-moz-range-thumb {
|
||||
height: 10px;
|
||||
width: 29px;
|
||||
background-position: -248px 0;
|
||||
/* background-image: POSBAR.BMP via Javascript */
|
||||
background-repeat: no-repeat;
|
||||
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; }
|
||||
|
||||
#position:active::-webkit-slider-thumb {
|
||||
background-position: -278px 0;
|
||||
}
|
||||
#position:active::-moz-range-thumb {
|
||||
background-position: -278px 0;
|
||||
}
|
||||
|
||||
.actions div {
|
||||
/* background-image: CBUTTONS.BMP via Javascript */
|
||||
height: 18px;
|
||||
width: 23px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.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;
|
||||
top: 89px;
|
||||
left: 163px;
|
||||
width: 74px;
|
||||
}
|
||||
|
||||
.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;
|
||||
top: 91px;
|
||||
left: 253px;
|
||||
height: 15px;
|
||||
width: 13px;
|
||||
}
|
||||
|
||||
.digit {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
width: 9px;
|
||||
height: 13px;
|
||||
/* background-image: NUMBERS.BMP via Javascript */
|
||||
background-repeat: no-repeat;
|
||||
text-indent: -9999px;
|
||||
}
|
||||
|
||||
/* Shade View */
|
||||
#main-window.shade {
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
#shade-time {
|
||||
cursor:url('../cursors/MAINMENU.PNG?inline'), auto;
|
||||
}
|
||||
|
||||
|
||||
.shade .media-info,
|
||||
.shade .windows,
|
||||
.shade #volume,
|
||||
.shade #balance,
|
||||
.shade .shuffle-repeat,
|
||||
.shade .status
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
.shade #title-bar {
|
||||
background-position: -27px -42px;
|
||||
cursor:url('../cursors/MAINMENU.PNG?inline'), auto;
|
||||
}
|
||||
|
||||
.shade #title-bar.selected {
|
||||
background-position: -27px -29px;
|
||||
}
|
||||
|
||||
.shade #title-bar #shade {
|
||||
background-position: 0px -27px;
|
||||
}
|
||||
.shade #title-bar #shade:active {
|
||||
background-position: -9px -27px;
|
||||
}
|
||||
.shade .actions div {
|
||||
background: none;
|
||||
position: absolute;
|
||||
}
|
||||
.shade #previous {
|
||||
height: 10px;
|
||||
width: 7px;
|
||||
top: 2px;
|
||||
left: 169px;
|
||||
}
|
||||
.shade #play {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
top: 2px;
|
||||
left: 176px;
|
||||
}
|
||||
.shade #pause {
|
||||
height: 10px;
|
||||
width: 9px;
|
||||
top: 2px;
|
||||
left: 186px;
|
||||
}
|
||||
.shade #stop {
|
||||
height: 10px;
|
||||
width: 9px;
|
||||
top: 2px;
|
||||
left: 195px;
|
||||
}
|
||||
.shade #next {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
top: 2px;
|
||||
left: 204px;
|
||||
}
|
||||
.shade #eject {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
top: 2px;
|
||||
left: 215px;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.shade #position {
|
||||
position: absolute;
|
||||
left: 226px;
|
||||
top: 4px;
|
||||
width: 17px;
|
||||
height: 7px;
|
||||
/* background-image: TITLEBAR.BMP via Javascript */
|
||||
background-position: -0px -36px;
|
||||
}
|
||||
|
||||
.shade #position::-webkit-slider-thumb {
|
||||
height: 7px;
|
||||
width: 3px;
|
||||
background-position: -20px -36px;
|
||||
/* background-image: TITLEBAR.BMP via Javascript */
|
||||
}
|
||||
|
||||
.shade #position::-moz-range-thumb {
|
||||
height: 7px;
|
||||
width: 3px;
|
||||
background-position: -20px -36px;
|
||||
/* background-image: TITLEBAR.BMP via Javascript */
|
||||
}
|
||||
|
||||
.shade #position.left::-webkit-slider-thumb {
|
||||
background-position: -17px -36px;
|
||||
}
|
||||
.shade #position.left::-moz-range-thumb {
|
||||
background-position: -17px -36px;
|
||||
}
|
||||
.shade #position.right::-webkit-slider-thumb {
|
||||
background-position: -23px -36px;
|
||||
}
|
||||
.shade #position.right::-moz-range-thumb {
|
||||
background-position: -23px -36px;
|
||||
}
|
||||
|
||||
#shade-time {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.shade #shade-time {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 127px;
|
||||
height:6px;
|
||||
width: 25px;
|
||||
}
|
||||
|
||||
.stop.shade #shade-time { display:none; }
|
||||
.pause.shade #shade-time {
|
||||
animation: blink 2s step-start 1s infinite;
|
||||
-webkit-animation: blink 2s step-start 1s infinite;
|
||||
}
|
||||
|
||||
.shade #shade-time .character {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
.shade #shade-minus-sign {
|
||||
left: 0px;
|
||||
}
|
||||
.shade #shade-minute-first-digit {
|
||||
left: 6px;
|
||||
}
|
||||
|
||||
.shade #shade-minute-second-digit {
|
||||
left: 11px;
|
||||
}
|
||||
.shade #shade-second-first-digit {
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
.shade #shade-second-second-digit {
|
||||
left: 25px;
|
||||
}
|
||||
30
css/page.css
Normal file
30
css/page.css
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
/* Rules for the page layout */
|
||||
body {
|
||||
background-color: #224EB7;
|
||||
font-family: arial;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
#browser-compatibility {
|
||||
display: none;
|
||||
position: absolute;
|
||||
width: 275px;
|
||||
margin-top: -58px;
|
||||
margin-left: -137px;
|
||||
top: 40%;
|
||||
left: 50%;
|
||||
background: white;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.about {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.about a {
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
||||
823
css/winamp.css
Executable file → Normal file
823
css/winamp.css
Executable file → Normal file
|
|
@ -1,3 +1,5 @@
|
|||
/* Rules used by all windows */
|
||||
|
||||
/* 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; }
|
||||
|
|
@ -5,18 +7,9 @@ input[type=range]::-moz-range-thumb { border: none; border-radius: 0; background
|
|||
input[type=range]::-moz-range-track { border: none; background: none; }
|
||||
input[type=range]:focus { outline: none; }
|
||||
input[type=range]::-moz-focus-outer { border: 0; }
|
||||
|
||||
a:focus { outline: none; }
|
||||
|
||||
body {
|
||||
background-color: #224EB7;
|
||||
font-family: arial;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
#shade-time {
|
||||
cursor:url('../cursors/MAINMENU.PNG?inline'), auto;
|
||||
}
|
||||
|
||||
/* Animation */
|
||||
@keyframes blink {
|
||||
0% { opacity: 1.0; }
|
||||
|
|
@ -29,636 +22,6 @@ body {
|
|||
100% { opacity: 1.0; }
|
||||
}
|
||||
|
||||
/* Styles */
|
||||
#main-window {
|
||||
position: absolute;
|
||||
/* background-image: MAIN.BMP via Javascript */
|
||||
height: 116px;
|
||||
width: 275px;
|
||||
margin-top: -58px;
|
||||
margin-left: -137px;
|
||||
top: 40%;
|
||||
left: 50%;
|
||||
cursor:url('../cursors/MAINMENU.PNG?inline'), auto;
|
||||
/* Ask the browser to scale showing large pixels if possible */
|
||||
image-rendering: -moz-crisp-edges; /* Firefox */
|
||||
image-rendering: -o-crisp-edges; /* Opera */
|
||||
image-rendering: -webkit-optimize-contrast; /* Safari */
|
||||
image-rendering: pixelated; /* Only in Chrome > 40 */
|
||||
-ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
|
||||
}
|
||||
|
||||
#main-window.doubled {
|
||||
-moz-transform: scale(2);
|
||||
-moz-transform-origin: top left;
|
||||
-webkit-transform: scale(2);
|
||||
-webkit-transform-origin: top left;
|
||||
}
|
||||
|
||||
.doubled #context-menu {
|
||||
-moz-transform: scale(.5);
|
||||
-moz-transform-origin: top left;
|
||||
-webkit-transform: scale(.5);
|
||||
-webkit-transform-origin: top left;
|
||||
}
|
||||
|
||||
#main-window.loading {
|
||||
background-image: none;
|
||||
background-color: #FFFFFF;
|
||||
border: 2px solid #dddddd;
|
||||
}
|
||||
/* Hide everything whil we are loading */
|
||||
#main-window.loading * {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#loading {
|
||||
display: none;
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
height: 30px;
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
top: 0; left: 0; bottom: 0; right: 0;
|
||||
}
|
||||
|
||||
/* Only show loading div while we are loading */
|
||||
#main-window.loading #loading {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#main-window.closed { display: none; }
|
||||
|
||||
#title-bar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 14px;
|
||||
width: 275px;
|
||||
/* background-image: TITLEBAR.BMP via Javascript */
|
||||
background-position: -27px -14px;
|
||||
cursor:url('../cursors/TITLEBAR.PNG?inline'), auto;
|
||||
}
|
||||
|
||||
#title-bar.selected {
|
||||
background-position: -27px 0px;
|
||||
}
|
||||
|
||||
.llama #title-bar {
|
||||
background-position: -27px -61px;
|
||||
}
|
||||
|
||||
.llama #title-bar.selected {
|
||||
background-position: -27px -57px;
|
||||
}
|
||||
|
||||
#option,
|
||||
#minimize,
|
||||
#shade,
|
||||
#close {
|
||||
position: absolute;
|
||||
height: 9px;
|
||||
width: 9px;
|
||||
top: 3px;
|
||||
cursor:url('../cursors/MAINMENU.PNG?inline'), auto;
|
||||
}
|
||||
|
||||
#title-bar #option {
|
||||
left: 6px;
|
||||
/* background-image: TITLEBAR.BMP via Javascript */
|
||||
}
|
||||
#title-bar #option #context-menu {
|
||||
display: none;
|
||||
top: 12px;
|
||||
left: 0px;
|
||||
}
|
||||
#title-bar #option:active,
|
||||
#title-bar #option.selected
|
||||
{
|
||||
background-position: 0 -9px;
|
||||
}
|
||||
#title-bar #option:active #context-menu,
|
||||
#title-bar #option.selected #context-menu
|
||||
{
|
||||
display: block;
|
||||
}
|
||||
|
||||
#title-bar #minimize {
|
||||
left: 244px;
|
||||
/* background-image: TITLEBAR.BMP via Javascript */
|
||||
background-position: -9px 0;
|
||||
}
|
||||
#title-bar #minimize:active {
|
||||
background-position: -9px -9px;
|
||||
}
|
||||
|
||||
#title-bar #shade {
|
||||
left: 254px;
|
||||
/* background-image: TITLEBAR.BMP via Javascript */
|
||||
background-position: 0px -18px;
|
||||
}
|
||||
#title-bar #shade:active {
|
||||
background-position: -9px -18px;
|
||||
}
|
||||
|
||||
#title-bar #close {
|
||||
left: 264px;
|
||||
/* background-image: TITLEBAR.BMP via Javascript */
|
||||
background-position: -18px 0px;
|
||||
cursor:url('../cursors/CLOSE.PNG?inline'), auto;
|
||||
}
|
||||
#title-bar #close:active {
|
||||
background-position: -18px -9px;
|
||||
}
|
||||
|
||||
.status #clutter-bar {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: 10px;
|
||||
height: 43px;
|
||||
width: 8px;
|
||||
/* background-image: TITLEBAR.BMP via Javascript */
|
||||
background-position: -304px 0;
|
||||
}
|
||||
|
||||
.status #clutter-bar.disabled {
|
||||
background-position: -312px 0;
|
||||
}
|
||||
|
||||
#clutter-bar div {
|
||||
position: absolute;
|
||||
height: 7px;
|
||||
width: 8px;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
#clutter-bar #button-o {
|
||||
top: 3px;
|
||||
height: 8px;
|
||||
}
|
||||
#clutter-bar #button-o:active {
|
||||
background-position: -304px -47px;
|
||||
}
|
||||
#clutter-bar #button-a {
|
||||
top: 11px;
|
||||
}
|
||||
#clutter-bar #button-a:active,
|
||||
#clutter-bar #button-a.selected {
|
||||
background-position: -312px -55px;
|
||||
}
|
||||
#clutter-bar #button-i {
|
||||
top: 18px;
|
||||
}
|
||||
#clutter-bar #button-i:active {
|
||||
background-position: -320px -62px;
|
||||
}
|
||||
#clutter-bar #button-d {
|
||||
top: 25px;
|
||||
height: 8px;
|
||||
}
|
||||
#clutter-bar #button-d:active,
|
||||
#clutter-bar #button-d.selected {
|
||||
background-position: -328px -69px;
|
||||
}
|
||||
#clutter-bar #button-v {
|
||||
top: 33px;
|
||||
}
|
||||
#clutter-bar #button-v:active {
|
||||
background-position: -336px -77px;
|
||||
}
|
||||
|
||||
.status #play-pause {
|
||||
position: absolute;
|
||||
top: 28px;
|
||||
left: 26px;
|
||||
height: 9px;
|
||||
width: 9px;
|
||||
/* background-image: PLAYPAUS.BMP via Javascript */
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.play .status #work-indicator {
|
||||
position: absolute;
|
||||
top: 28px;
|
||||
left: 24px;
|
||||
height: 9px;
|
||||
width: 3px;
|
||||
/* background-image: PLAYPAUS.BMP via Javascript */
|
||||
background-position: -36px 0;
|
||||
}
|
||||
.play .status #work-indicator.selected {
|
||||
background-position: -39px 0;
|
||||
}
|
||||
|
||||
.play .status #play-pause { }
|
||||
.pause .status #play-pause { background-position: -9px 0; }
|
||||
.stop .status #play-pause { background-position: -18px 0; }
|
||||
.status #time {
|
||||
position: absolute;
|
||||
left: 39px;
|
||||
top: 26px;
|
||||
/* Just to make it clickable */
|
||||
height: 13px;
|
||||
width: 59px;
|
||||
}
|
||||
|
||||
.stop .status #time { display:none; }
|
||||
.pause .status #time {
|
||||
animation: blink 2s step-start 1s infinite;
|
||||
-webkit-animation: blink 2s step-start 1s infinite;
|
||||
}
|
||||
|
||||
.status #time #minus-sign {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
left: -1px;
|
||||
width: 5px;
|
||||
height: 1px;
|
||||
/* background-image: NUMBERS.BMP via Javascript */
|
||||
background-position: -9px -6px;
|
||||
}
|
||||
.status #time.countdown #minus-sign {
|
||||
background-position: -20px -6px;
|
||||
}
|
||||
/* Alternate format for minus sign, when skin supports it */
|
||||
.status #time.ex #minus-sign {
|
||||
top: 0px;
|
||||
left: -1px;
|
||||
width: 9px;
|
||||
height: 13px;
|
||||
/* background-image: NUMS_EX.BMP via Javascript */
|
||||
background-position: -90px 0px;
|
||||
}
|
||||
.status #time.ex.countdown #minus-sign {
|
||||
background-position: -99px 0px;
|
||||
}
|
||||
|
||||
.status #time #minute-first-digit {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
left: 9px;
|
||||
height: 13px;
|
||||
width: 9px;
|
||||
}
|
||||
.status #time #minute-second-digit {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
left: 21px;
|
||||
height: 13px;
|
||||
width: 9px;
|
||||
}
|
||||
.status #time #second-first-digit {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
left: 39px;
|
||||
height: 13px;
|
||||
width: 9px;
|
||||
}
|
||||
.status #time #second-second-digit {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
left: 51px;
|
||||
height: 13px;
|
||||
width: 9px;
|
||||
}
|
||||
|
||||
#visualizer {
|
||||
position: absolute;
|
||||
width: 76px;
|
||||
height: 16px;
|
||||
top: 43px;
|
||||
left: 24px;
|
||||
}
|
||||
|
||||
.stop #visualizer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
.text {
|
||||
position: absolute;
|
||||
left: 112px;
|
||||
top: 27px;
|
||||
width: 152px;
|
||||
height: 6px;
|
||||
overflow: hidden;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#song-title {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.media-info #kbps {
|
||||
position: absolute;
|
||||
left: 111px;
|
||||
top: 43px;
|
||||
width: 15px;
|
||||
height: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.stop .media-info #kbps { display: none; }
|
||||
|
||||
.media-info #khz {
|
||||
position: absolute;
|
||||
left: 156px;
|
||||
top: 43px;
|
||||
width: 10px;
|
||||
height: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.stop .media-info #khz { display: none; }
|
||||
|
||||
.media-info .mono-stereo {
|
||||
position: absolute;
|
||||
left: 212px;
|
||||
top: 41px;
|
||||
width: 57px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
.media-info .mono-stereo div {
|
||||
position: absolute;
|
||||
height: 12px;
|
||||
/* background-image: MONOSTER.BMP via Javascript */
|
||||
}
|
||||
|
||||
.media-info .mono-stereo #mono {
|
||||
width: 29px;
|
||||
background-position: -29px -12px;
|
||||
}
|
||||
.media-info .mono-stereo #mono.selected {
|
||||
background-position: -29px 0;
|
||||
}
|
||||
.stop .media-info .mono-stereo #mono.selected {
|
||||
background-position: -29px -12px;
|
||||
}
|
||||
|
||||
.media-info .mono-stereo #stereo {
|
||||
left: 27px;
|
||||
width: 29px;
|
||||
background-position: 0 -12px;
|
||||
}
|
||||
.media-info .mono-stereo #stereo.selected {
|
||||
background-position: 0 0;
|
||||
}
|
||||
.stop .media-info .mono-stereo #stereo.selected {
|
||||
background-position: 0 -12px;
|
||||
}
|
||||
|
||||
#volume {
|
||||
position: absolute;
|
||||
left: 107px;
|
||||
top: 57px;
|
||||
height: 13px;
|
||||
width: 68px;
|
||||
/* background-image: VOLUME.BMP via Javascript */
|
||||
background-position: 0 0;
|
||||
cursor:url('../cursors/POSBAR.PNG?inline'), auto;
|
||||
}
|
||||
#volume::-webkit-slider-thumb {
|
||||
display: block;
|
||||
margin-top: 1px;
|
||||
height: 11px;
|
||||
width: 14px;
|
||||
/* background-image: VOLUME.BMP via Javascript */
|
||||
background-position: -15px -422px;
|
||||
cursor:url('../cursors/POSBAR.PNG?inline'), auto;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
#volume::-moz-range-thumb {
|
||||
margin-top: 1px;
|
||||
height: 11px;
|
||||
width: 14px;
|
||||
/* background-image: VOLUME.BMP via Javascript */
|
||||
background-position: -15px -422px;
|
||||
cursor:url('../cursors/POSBAR.PNG?inline'), auto;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
#volume:active::-webkit-slider-thumb {
|
||||
background-position: 0 -422px;
|
||||
}
|
||||
#volume:active::-moz-range-thumb {
|
||||
background-position: 0 -422px;
|
||||
}
|
||||
|
||||
#balance {
|
||||
position: absolute;
|
||||
left: 177px;
|
||||
top: 57px;
|
||||
height: 13px;
|
||||
width: 38px;
|
||||
/* background-image: BALANCE.BMP via Javascript */
|
||||
background-position: -9px 0;
|
||||
cursor:url('../cursors/POSBAR.PNG?inline'), auto;
|
||||
}
|
||||
|
||||
#balance::-webkit-slider-thumb {
|
||||
top: 1px;
|
||||
height: 11px;
|
||||
width: 14px;
|
||||
/* background-image: VOLUME.BMP via Javascript */
|
||||
background-position: -15px -422px;
|
||||
cursor:url('../cursors/POSBAR.PNG?inline'), auto;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
#balance::-moz-range-thumb {
|
||||
top: 1px;
|
||||
height: 11px;
|
||||
width: 14px;
|
||||
/* background-image: VOLUME.BMP via Javascript */
|
||||
background-position: -15px -422px;
|
||||
cursor:url('../cursors/POSBAR.PNG?inline'), auto;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
#balance:active::-webkit-slider-thumb {
|
||||
background-position: 0 -422px;
|
||||
}
|
||||
#balance:active::-moz-range-thumb {
|
||||
background-position: 0 -422px;
|
||||
}
|
||||
|
||||
.windows {
|
||||
position: absolute;
|
||||
left: 219px;
|
||||
top: 58px;
|
||||
width: 46px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
.windows div {
|
||||
position: absolute;
|
||||
width: 23px;
|
||||
height: 12px;
|
||||
/* background-image: SHUFREP.BMP via Javascript */
|
||||
}
|
||||
|
||||
.windows #equalizer-button {
|
||||
left: 0;
|
||||
background-position: 0 -61px;
|
||||
}
|
||||
.windows #equalizer-button:active {
|
||||
background-position: -46px -61px;
|
||||
}
|
||||
|
||||
.windows #playlist-button {
|
||||
left: 23px;
|
||||
background-position: -23px -61px;
|
||||
}
|
||||
.windows #playlist-button:active {
|
||||
background-position: -69px -61px;
|
||||
}
|
||||
|
||||
#position {
|
||||
position: absolute;
|
||||
left: 16px;
|
||||
top: 72px;
|
||||
width: 248px;
|
||||
height: 10px;
|
||||
/* background-image: POSBAR.BMP via Javascript */
|
||||
background-repeat: no-repeat;
|
||||
cursor:url('../cursors/POSBAR.PNG?inline'), auto;
|
||||
}
|
||||
|
||||
#position::-webkit-slider-thumb {
|
||||
height: 10px;
|
||||
width: 29px;
|
||||
background-position: -248px 0;
|
||||
/* background-image: POSBAR.BMP via Javascript */
|
||||
background-repeat: no-repeat;
|
||||
cursor:url('../cursors/POSBAR.PNG?inline'), auto;
|
||||
/*
|
||||
* Fix the strange bug in Safair/mobile-chrome
|
||||
* http://stackoverflow.com/questions/26727769/rendering-glitch-when-manipulating-range-input-value-via-javascript-in-webkit
|
||||
*/
|
||||
-webkit-box-sizing: border-box;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#position::-moz-range-thumb {
|
||||
height: 10px;
|
||||
width: 29px;
|
||||
background-position: -248px 0;
|
||||
/* background-image: POSBAR.BMP via Javascript */
|
||||
background-repeat: no-repeat;
|
||||
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; }
|
||||
|
||||
#position:active::-webkit-slider-thumb {
|
||||
background-position: -278px 0;
|
||||
}
|
||||
#position:active::-moz-range-thumb {
|
||||
background-position: -278px 0;
|
||||
}
|
||||
|
||||
.actions div {
|
||||
/* background-image: CBUTTONS.BMP via Javascript */
|
||||
height: 18px;
|
||||
width: 23px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.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;
|
||||
top: 89px;
|
||||
left: 163px;
|
||||
width: 74px;
|
||||
}
|
||||
|
||||
.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;
|
||||
top: 91px;
|
||||
left: 253px;
|
||||
height: 15px;
|
||||
width: 13px;
|
||||
}
|
||||
|
||||
.character {
|
||||
display: block;
|
||||
float: left; /* Safari does not do inline-block well */
|
||||
|
|
@ -669,183 +32,3 @@ body {
|
|||
|
||||
}
|
||||
|
||||
.digit {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
width: 9px;
|
||||
height: 13px;
|
||||
/* background-image: NUMBERS.BMP via Javascript */
|
||||
background-repeat: no-repeat;
|
||||
text-indent: -9999px;
|
||||
}
|
||||
|
||||
/* Shade View */
|
||||
#main-window.shade {
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
.shade .media-info,
|
||||
.shade .windows,
|
||||
.shade #volume,
|
||||
.shade #balance,
|
||||
.shade .shuffle-repeat,
|
||||
.shade .status
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
.shade #title-bar {
|
||||
background-position: -27px -42px;
|
||||
cursor:url('../cursors/MAINMENU.PNG?inline'), auto;
|
||||
}
|
||||
|
||||
.shade #title-bar.selected {
|
||||
background-position: -27px -29px;
|
||||
}
|
||||
|
||||
.shade #title-bar #shade {
|
||||
background-position: 0px -27px;
|
||||
}
|
||||
.shade #title-bar #shade:active {
|
||||
background-position: -9px -27px;
|
||||
}
|
||||
.shade .actions div {
|
||||
background: none;
|
||||
position: absolute;
|
||||
}
|
||||
.shade #previous {
|
||||
height: 10px;
|
||||
width: 7px;
|
||||
top: 2px;
|
||||
left: 169px;
|
||||
}
|
||||
.shade #play {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
top: 2px;
|
||||
left: 176px;
|
||||
}
|
||||
.shade #pause {
|
||||
height: 10px;
|
||||
width: 9px;
|
||||
top: 2px;
|
||||
left: 186px;
|
||||
}
|
||||
.shade #stop {
|
||||
height: 10px;
|
||||
width: 9px;
|
||||
top: 2px;
|
||||
left: 195px;
|
||||
}
|
||||
.shade #next {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
top: 2px;
|
||||
left: 204px;
|
||||
}
|
||||
.shade #eject {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
top: 2px;
|
||||
left: 215px;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.shade #position {
|
||||
position: absolute;
|
||||
left: 226px;
|
||||
top: 4px;
|
||||
width: 17px;
|
||||
height: 7px;
|
||||
/* background-image: TITLEBAR.BMP via Javascript */
|
||||
background-position: -0px -36px;
|
||||
}
|
||||
|
||||
.shade #position::-webkit-slider-thumb {
|
||||
height: 7px;
|
||||
width: 3px;
|
||||
background-position: -20px -36px;
|
||||
/* background-image: TITLEBAR.BMP via Javascript */
|
||||
}
|
||||
|
||||
.shade #position::-moz-range-thumb {
|
||||
height: 7px;
|
||||
width: 3px;
|
||||
background-position: -20px -36px;
|
||||
/* background-image: TITLEBAR.BMP via Javascript */
|
||||
}
|
||||
|
||||
.shade #position.left::-webkit-slider-thumb {
|
||||
background-position: -17px -36px;
|
||||
}
|
||||
.shade #position.left::-moz-range-thumb {
|
||||
background-position: -17px -36px;
|
||||
}
|
||||
.shade #position.right::-webkit-slider-thumb {
|
||||
background-position: -23px -36px;
|
||||
}
|
||||
.shade #position.right::-moz-range-thumb {
|
||||
background-position: -23px -36px;
|
||||
}
|
||||
|
||||
#shade-time {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.shade #shade-time {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 127px;
|
||||
height:6px;
|
||||
width: 25px;
|
||||
}
|
||||
|
||||
.stop.shade #shade-time { display:none; }
|
||||
.pause.shade #shade-time {
|
||||
animation: blink 2s step-start 1s infinite;
|
||||
-webkit-animation: blink 2s step-start 1s infinite;
|
||||
}
|
||||
|
||||
.shade #shade-time .character {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
.shade #shade-minus-sign {
|
||||
left: 0px;
|
||||
}
|
||||
.shade #shade-minute-first-digit {
|
||||
left: 6px;
|
||||
}
|
||||
|
||||
.shade #shade-minute-second-digit {
|
||||
left: 11px;
|
||||
}
|
||||
.shade #shade-second-first-digit {
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
.shade #shade-second-second-digit {
|
||||
left: 25px;
|
||||
}
|
||||
|
||||
.about {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.about a {
|
||||
color: white;
|
||||
}
|
||||
|
||||
#browser-compatibility {
|
||||
display: none;
|
||||
position: absolute;
|
||||
width: 275px;
|
||||
margin-top: -58px;
|
||||
margin-left: -137px;
|
||||
top: 40%;
|
||||
left: 50%;
|
||||
background: white;
|
||||
text-align: center;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,6 +11,8 @@
|
|||
<meta property="og:url" content="http://jordaneldredge.com/projects/winamp2-js/" />
|
||||
<meta property="og:image" content="http://jordaneldredge.com/projects/winamp2-js/preview.png" />
|
||||
<link rel='stylesheet' type='text/css' href='css/winamp.css?inline' />
|
||||
<link rel='stylesheet' type='text/css' href='css/page.css?inline' />
|
||||
<link rel='stylesheet' type='text/css' href='css/main.css?inline' />
|
||||
<link rel='stylesheet' type='text/css' href='css/context-menu.css?inline' />
|
||||
<link rel="shortcut icon" sizes="16x16 32x32" href="favicon.ico">
|
||||
</head>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue