mirror of
https://github.com/captbaritone/webamp.git
synced 2026-01-23 02:15:01 +00:00
Format css according to prettier default config
Looks like I had a .editorconfig in the project root (not sure how it got there) which was git ignored by my ~/.gitignore. It also turns out that prettier will respect the indent settings in .editorconfig. This sets my `.editorconfig` to use the Prettier default, checks it in, and also reformats all the CSS. Fixes #684
This commit is contained in:
Jordan Eldredge
parent
1833bac1bf
commit
7074630713
13 changed files with 1322 additions and 1306 deletions
9
.editorconfig
Normal file
9
.editorconfig
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
[*.jsx]
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
[*.js]
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
[*.css]
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,87 +1,87 @@
|
|||
#webamp-context-menu .context-menu {
|
||||
left: 0px;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
left: 0px;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
#webamp-context-menu .context-menu.bottom {
|
||||
top: 12px;
|
||||
top: 12px;
|
||||
}
|
||||
|
||||
#webamp-context-menu .context-menu.top {
|
||||
top: 0px;
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
#webamp-context-menu .context-menu,
|
||||
#webamp-context-menu .context-menu ul {
|
||||
z-index: 50; /* Gross */
|
||||
background-color: #ffffff;
|
||||
position: absolute;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 1px solid #a7a394;
|
||||
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
|
||||
z-index: 50; /* Gross */
|
||||
background-color: #ffffff;
|
||||
position: absolute;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 1px solid #a7a394;
|
||||
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
#webamp-context-menu .context-menu li {
|
||||
position: relative;
|
||||
font-family: "Tahoma";
|
||||
font-size: 11px;
|
||||
color: black;
|
||||
white-space: nowrap;
|
||||
margin: 2px;
|
||||
padding: 1px 18px 3px 18px;
|
||||
display: block;
|
||||
position: relative;
|
||||
font-family: "Tahoma";
|
||||
font-size: 11px;
|
||||
color: black;
|
||||
white-space: nowrap;
|
||||
margin: 2px;
|
||||
padding: 1px 18px 3px 18px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#webamp-context-menu .context-menu li.checked:before {
|
||||
float: left;
|
||||
/* TODO: Use an image */
|
||||
content: "\2713";
|
||||
margin-left: -12px;
|
||||
float: left;
|
||||
/* TODO: Use an image */
|
||||
content: "\2713";
|
||||
margin-left: -12px;
|
||||
}
|
||||
|
||||
#webamp-context-menu .context-menu li.parent:after {
|
||||
float: right;
|
||||
content: "\25b8";
|
||||
margin-right: -12px;
|
||||
float: right;
|
||||
content: "\25b8";
|
||||
margin-right: -12px;
|
||||
}
|
||||
#webamp-context-menu .context-menu li a {
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
cursor: default;
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
#webamp-context-menu .context-menu li:hover,
|
||||
#webamp-context-menu .context-menu li:hover a {
|
||||
background-color: #224eb7;
|
||||
color: #ffffff;
|
||||
background-color: #224eb7;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
#webamp-context-menu .context-menu li.hr {
|
||||
padding: 2px 0;
|
||||
padding: 2px 0;
|
||||
}
|
||||
|
||||
#webamp-context-menu .context-menu li.hr:hover {
|
||||
background-color: #ffffff;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
#webamp-context-menu .context-menu li.hr hr {
|
||||
border: none;
|
||||
height: 1px;
|
||||
background-color: #a7a394;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
height: 1px;
|
||||
background-color: #a7a394;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#webamp-context-menu .context-menu ul {
|
||||
display: none;
|
||||
left: 100%;
|
||||
margin-left: -3px;
|
||||
display: none;
|
||||
left: 100%;
|
||||
margin-left: -3px;
|
||||
}
|
||||
|
||||
#webamp-context-menu .context-menu li:hover ul {
|
||||
display: block;
|
||||
display: block;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,214 +1,214 @@
|
|||
/* Styles */
|
||||
#webamp #equalizer-window {
|
||||
height: 116px;
|
||||
width: 275px;
|
||||
height: 116px;
|
||||
width: 275px;
|
||||
}
|
||||
|
||||
#webamp #equalizer-window.shade {
|
||||
height: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
#webamp #equalizer-volume {
|
||||
position: absolute;
|
||||
left: 61px;
|
||||
top: 4px;
|
||||
height: 6px;
|
||||
width: 97px;
|
||||
background-position: 0 0;
|
||||
position: absolute;
|
||||
left: 61px;
|
||||
top: 4px;
|
||||
height: 6px;
|
||||
width: 97px;
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
#webamp #equalizer-volume::-webkit-slider-thumb {
|
||||
height: 7px;
|
||||
width: 3px;
|
||||
height: 7px;
|
||||
width: 3px;
|
||||
}
|
||||
|
||||
#webamp #equalizer-volume::-moz-range-thumb {
|
||||
height: 7px;
|
||||
width: 3px;
|
||||
height: 7px;
|
||||
width: 3px;
|
||||
}
|
||||
|
||||
#webamp #equalizer-balance {
|
||||
position: absolute;
|
||||
left: 164px;
|
||||
top: 4px;
|
||||
height: 6px;
|
||||
width: 43px;
|
||||
background-position: 0 0;
|
||||
position: absolute;
|
||||
left: 164px;
|
||||
top: 4px;
|
||||
height: 6px;
|
||||
width: 43px;
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
#webamp #equalizer-balance::-webkit-slider-thumb {
|
||||
height: 7px;
|
||||
width: 3px;
|
||||
height: 7px;
|
||||
width: 3px;
|
||||
}
|
||||
|
||||
#webamp #equalizer-balance::-moz-range-thumb {
|
||||
height: 7px;
|
||||
width: 3px;
|
||||
height: 7px;
|
||||
width: 3px;
|
||||
}
|
||||
|
||||
#webamp .equalizer-top {
|
||||
height: 14px;
|
||||
width: 275px;
|
||||
position: relative;
|
||||
height: 14px;
|
||||
width: 275px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#webamp #equalizer-close {
|
||||
position: absolute;
|
||||
height: 9px;
|
||||
width: 9px;
|
||||
left: 264px;
|
||||
top: 3px;
|
||||
position: absolute;
|
||||
height: 9px;
|
||||
width: 9px;
|
||||
left: 264px;
|
||||
top: 3px;
|
||||
}
|
||||
|
||||
#webamp #equalizer-shade {
|
||||
position: absolute;
|
||||
height: 9px;
|
||||
width: 9px;
|
||||
left: 254px;
|
||||
top: 3px;
|
||||
position: absolute;
|
||||
height: 9px;
|
||||
width: 9px;
|
||||
left: 254px;
|
||||
top: 3px;
|
||||
}
|
||||
|
||||
#webamp #on {
|
||||
position: absolute;
|
||||
width: 26px;
|
||||
height: 12px;
|
||||
top: 18px;
|
||||
left: 14px;
|
||||
position: absolute;
|
||||
width: 26px;
|
||||
height: 12px;
|
||||
top: 18px;
|
||||
left: 14px;
|
||||
}
|
||||
|
||||
#webamp #auto {
|
||||
position: absolute;
|
||||
width: 32px;
|
||||
height: 12px;
|
||||
top: 18px;
|
||||
left: 40px;
|
||||
position: absolute;
|
||||
width: 32px;
|
||||
height: 12px;
|
||||
top: 18px;
|
||||
left: 40px;
|
||||
}
|
||||
|
||||
#webamp #presets-context {
|
||||
position: absolute;
|
||||
width: 44px;
|
||||
height: 12px;
|
||||
top: 18px;
|
||||
left: 217px;
|
||||
position: absolute;
|
||||
width: 44px;
|
||||
height: 12px;
|
||||
top: 18px;
|
||||
left: 217px;
|
||||
}
|
||||
|
||||
#webamp #presets {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#webamp #eqGraph {
|
||||
position: absolute;
|
||||
width: 113px;
|
||||
height: 19px;
|
||||
top: 17px;
|
||||
left: 86px;
|
||||
position: absolute;
|
||||
width: 113px;
|
||||
height: 19px;
|
||||
top: 17px;
|
||||
left: 86px;
|
||||
}
|
||||
|
||||
#webamp #preamp {
|
||||
position: absolute;
|
||||
left: 21px;
|
||||
top: 38px;
|
||||
position: absolute;
|
||||
left: 21px;
|
||||
top: 38px;
|
||||
}
|
||||
|
||||
#webamp #plus12db {
|
||||
position: absolute;
|
||||
left: 45px;
|
||||
top: 36px;
|
||||
width: 22px;
|
||||
height: 8px;
|
||||
position: absolute;
|
||||
left: 45px;
|
||||
top: 36px;
|
||||
width: 22px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
#webamp #zerodb {
|
||||
position: absolute;
|
||||
left: 45px;
|
||||
top: 64px;
|
||||
width: 22px;
|
||||
height: 8px;
|
||||
position: absolute;
|
||||
left: 45px;
|
||||
top: 64px;
|
||||
width: 22px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
#webamp #minus12db {
|
||||
position: absolute;
|
||||
left: 45px;
|
||||
top: 95px;
|
||||
width: 22px;
|
||||
height: 8px;
|
||||
position: absolute;
|
||||
left: 45px;
|
||||
top: 95px;
|
||||
width: 22px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
#webamp #band-60 {
|
||||
position: absolute;
|
||||
left: 78px;
|
||||
top: 38px;
|
||||
position: absolute;
|
||||
left: 78px;
|
||||
top: 38px;
|
||||
}
|
||||
|
||||
#webamp #band-170 {
|
||||
position: absolute;
|
||||
left: 96px;
|
||||
top: 38px;
|
||||
position: absolute;
|
||||
left: 96px;
|
||||
top: 38px;
|
||||
}
|
||||
|
||||
#webamp #band-310 {
|
||||
position: absolute;
|
||||
left: 114px;
|
||||
top: 38px;
|
||||
position: absolute;
|
||||
left: 114px;
|
||||
top: 38px;
|
||||
}
|
||||
|
||||
#webamp #band-600 {
|
||||
position: absolute;
|
||||
left: 132px;
|
||||
top: 38px;
|
||||
position: absolute;
|
||||
left: 132px;
|
||||
top: 38px;
|
||||
}
|
||||
|
||||
#webamp #band-1000 {
|
||||
position: absolute;
|
||||
left: 150px;
|
||||
top: 38px;
|
||||
position: absolute;
|
||||
left: 150px;
|
||||
top: 38px;
|
||||
}
|
||||
|
||||
#webamp #band-3000 {
|
||||
position: absolute;
|
||||
left: 168px;
|
||||
top: 38px;
|
||||
position: absolute;
|
||||
left: 168px;
|
||||
top: 38px;
|
||||
}
|
||||
|
||||
#webamp #band-6000 {
|
||||
position: absolute;
|
||||
left: 186px;
|
||||
top: 38px;
|
||||
position: absolute;
|
||||
left: 186px;
|
||||
top: 38px;
|
||||
}
|
||||
|
||||
#webamp #band-12000 {
|
||||
position: absolute;
|
||||
left: 204px;
|
||||
top: 38px;
|
||||
position: absolute;
|
||||
left: 204px;
|
||||
top: 38px;
|
||||
}
|
||||
|
||||
#webamp #band-14000 {
|
||||
position: absolute;
|
||||
left: 222px;
|
||||
top: 38px;
|
||||
position: absolute;
|
||||
left: 222px;
|
||||
top: 38px;
|
||||
}
|
||||
|
||||
#webamp #band-16000 {
|
||||
position: absolute;
|
||||
left: 240px;
|
||||
top: 38px;
|
||||
position: absolute;
|
||||
left: 240px;
|
||||
top: 38px;
|
||||
}
|
||||
|
||||
#webamp .band {
|
||||
width: 14px;
|
||||
height: 63px;
|
||||
width: 14px;
|
||||
height: 63px;
|
||||
}
|
||||
|
||||
#webamp .band .rc-slider {
|
||||
height: 51px;
|
||||
width: 14px;
|
||||
margin-top: 6px;
|
||||
height: 51px;
|
||||
width: 14px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
#webamp .band .rc-slider .rc-slider-handle {
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
margin: -6px 0 0 1px;
|
||||
position: absolute;
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
margin: -6px 0 0 1px;
|
||||
position: absolute;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,130 +1,130 @@
|
|||
#webamp .gen-text-space {
|
||||
width: 5px;
|
||||
width: 5px;
|
||||
}
|
||||
|
||||
#webamp .gen-text-letter {
|
||||
height: 7px;
|
||||
display: inline-block;
|
||||
height: 7px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#webamp .gen-window {
|
||||
/* Default size */
|
||||
width: 275px;
|
||||
height: 116px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* Default size */
|
||||
width: 275px;
|
||||
height: 116px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#webamp .gen-top {
|
||||
height: 20px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 20px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
#webamp .gen-top-left {
|
||||
width: 25px;
|
||||
height: 20px;
|
||||
width: 25px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
#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;
|
||||
line-height: 7px;
|
||||
margin-top: 2px;
|
||||
/* TODO: This should be a conciquence of the repeating tiles, not hard coded */
|
||||
padding: 0 3px 0 4px;
|
||||
}
|
||||
|
||||
#webamp .gen-top-left-fill {
|
||||
flex-grow: 1;
|
||||
height: 20px;
|
||||
background-position: left;
|
||||
flex-grow: 1;
|
||||
height: 20px;
|
||||
background-position: left;
|
||||
}
|
||||
|
||||
#webamp .gen-top-right-fill {
|
||||
flex-grow: 1;
|
||||
height: 20px;
|
||||
background-position: right;
|
||||
flex-grow: 1;
|
||||
height: 20px;
|
||||
background-position: right;
|
||||
}
|
||||
|
||||
#webamp .gen-top-left-end {
|
||||
width: 25px;
|
||||
height: 20px;
|
||||
width: 25px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
#webamp .gen-top-right {
|
||||
width: 25px;
|
||||
height: 20px;
|
||||
width: 25px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
#webamp .gen-top-right-end {
|
||||
width: 25px;
|
||||
height: 20px;
|
||||
width: 25px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
#webamp .gen-close {
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
position: absolute;
|
||||
right: 2px;
|
||||
top: 3px;
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
position: absolute;
|
||||
right: 2px;
|
||||
top: 3px;
|
||||
}
|
||||
|
||||
#webamp .gen-middle {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
position: relative;
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#webamp .gen-middle-left {
|
||||
width: 11px;
|
||||
width: 11px;
|
||||
}
|
||||
|
||||
#webamp .gen-middle-left-bottom {
|
||||
width: 11px;
|
||||
height: 24px;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
width: 11px;
|
||||
height: 24px;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
#webamp .gen-middle-center {
|
||||
flex-grow: 1;
|
||||
position: relative;
|
||||
flex-grow: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#webamp .gen-middle-right {
|
||||
width: 8px;
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
#webamp .gen-middle-right-bottom {
|
||||
width: 8px;
|
||||
height: 24px;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
width: 8px;
|
||||
height: 24px;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
#webamp .gen-bottom {
|
||||
height: 14px;
|
||||
background-repeat: repeat-x;
|
||||
height: 14px;
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
|
||||
#webamp .gen-bottom-left {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 125px;
|
||||
height: 14px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 125px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
#webamp .gen-bottom-right {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: 125px;
|
||||
height: 14px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: 125px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
#webamp .gen-bottom-right #gen-resize-target {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,420 +1,420 @@
|
|||
/* Styles */
|
||||
#webamp #main-window {
|
||||
position: absolute;
|
||||
height: 116px;
|
||||
width: 275px;
|
||||
/* 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) */
|
||||
position: absolute;
|
||||
height: 116px;
|
||||
width: 275px;
|
||||
/* 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) */
|
||||
}
|
||||
|
||||
#webamp #title-bar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 14px;
|
||||
width: 275px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 14px;
|
||||
width: 275px;
|
||||
}
|
||||
|
||||
#webamp #option-context,
|
||||
#webamp #minimize,
|
||||
#webamp #shade,
|
||||
#webamp #close {
|
||||
position: absolute;
|
||||
height: 9px;
|
||||
width: 9px;
|
||||
top: 3px;
|
||||
position: absolute;
|
||||
height: 9px;
|
||||
width: 9px;
|
||||
top: 3px;
|
||||
}
|
||||
|
||||
#webamp #title-bar #option {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#webamp #title-bar #option-context {
|
||||
left: 6px;
|
||||
left: 6px;
|
||||
}
|
||||
#webamp #title-bar #minimize {
|
||||
left: 244px;
|
||||
left: 244px;
|
||||
}
|
||||
#webamp #title-bar #shade {
|
||||
left: 254px;
|
||||
left: 254px;
|
||||
}
|
||||
#webamp #title-bar #close {
|
||||
left: 264px;
|
||||
left: 264px;
|
||||
}
|
||||
#webamp #clutter-bar {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: 10px;
|
||||
height: 43px;
|
||||
width: 8px;
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: 10px;
|
||||
height: 43px;
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
#webamp #clutter-bar div {
|
||||
position: absolute;
|
||||
height: 7px;
|
||||
width: 8px;
|
||||
left: 0px;
|
||||
position: absolute;
|
||||
height: 7px;
|
||||
width: 8px;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
#webamp #clutter-bar #button-o {
|
||||
top: 3px;
|
||||
height: 8px;
|
||||
top: 3px;
|
||||
height: 8px;
|
||||
}
|
||||
#webamp #clutter-bar #button-a {
|
||||
top: 11px;
|
||||
top: 11px;
|
||||
}
|
||||
#webamp #clutter-bar #button-i {
|
||||
top: 18px;
|
||||
top: 18px;
|
||||
}
|
||||
#webamp #clutter-bar #button-d {
|
||||
top: 25px;
|
||||
height: 8px;
|
||||
top: 25px;
|
||||
height: 8px;
|
||||
}
|
||||
#webamp #clutter-bar #button-v {
|
||||
top: 33px;
|
||||
top: 33px;
|
||||
}
|
||||
|
||||
#webamp #play-pause {
|
||||
position: absolute;
|
||||
top: 28px;
|
||||
left: 26px;
|
||||
height: 9px;
|
||||
width: 9px;
|
||||
background-repeat: no-repeat;
|
||||
position: absolute;
|
||||
top: 28px;
|
||||
left: 26px;
|
||||
height: 9px;
|
||||
width: 9px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
#webamp .play #work-indicator,
|
||||
#webamp #work-indicator.selected {
|
||||
position: absolute;
|
||||
top: 28px;
|
||||
left: 24px;
|
||||
height: 9px;
|
||||
width: 3px;
|
||||
position: absolute;
|
||||
top: 28px;
|
||||
left: 24px;
|
||||
height: 9px;
|
||||
width: 3px;
|
||||
}
|
||||
#webamp .status #time {
|
||||
position: absolute;
|
||||
left: 39px;
|
||||
top: 26px;
|
||||
/* Just to make it clickable */
|
||||
height: 13px;
|
||||
width: 59px;
|
||||
position: absolute;
|
||||
left: 39px;
|
||||
top: 26px;
|
||||
/* Just to make it clickable */
|
||||
height: 13px;
|
||||
width: 59px;
|
||||
}
|
||||
|
||||
#webamp .stop .status #time {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
#webamp .pause .status #time {
|
||||
animation: blink 2s step-start 1s infinite;
|
||||
-webkit-animation: blink 2s step-start 1s infinite;
|
||||
animation: blink 2s step-start 1s infinite;
|
||||
-webkit-animation: blink 2s step-start 1s infinite;
|
||||
}
|
||||
|
||||
#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;
|
||||
left: -1px;
|
||||
width: 5px;
|
||||
height: 1px;
|
||||
/* Note that this get's augmented by the skin CSS if NUM_EX.BMP is present */
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
left: -1px;
|
||||
width: 5px;
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
#webamp .status #time #minute-first-digit {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
left: 9px;
|
||||
height: 13px;
|
||||
width: 9px;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
left: 9px;
|
||||
height: 13px;
|
||||
width: 9px;
|
||||
}
|
||||
#webamp .status #time #minute-second-digit {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
left: 21px;
|
||||
height: 13px;
|
||||
width: 9px;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
left: 21px;
|
||||
height: 13px;
|
||||
width: 9px;
|
||||
}
|
||||
#webamp .status #time #second-first-digit {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
left: 39px;
|
||||
height: 13px;
|
||||
width: 9px;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
left: 39px;
|
||||
height: 13px;
|
||||
width: 9px;
|
||||
}
|
||||
#webamp .status #time #second-second-digit {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
left: 51px;
|
||||
height: 13px;
|
||||
width: 9px;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
left: 51px;
|
||||
height: 13px;
|
||||
width: 9px;
|
||||
}
|
||||
|
||||
#webamp #main-window #visualizer {
|
||||
position: absolute;
|
||||
top: 43px;
|
||||
left: 24px;
|
||||
position: absolute;
|
||||
top: 43px;
|
||||
left: 24px;
|
||||
}
|
||||
|
||||
#webamp #main-window.shade #visualizer {
|
||||
top: 5px;
|
||||
left: 79px;
|
||||
top: 5px;
|
||||
left: 79px;
|
||||
}
|
||||
|
||||
#webamp #main-window.stop #visualizer {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#webamp .text {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#webamp #marquee {
|
||||
position: absolute;
|
||||
left: 111px;
|
||||
top: 24px;
|
||||
width: 155px;
|
||||
height: 6px;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
padding: 3px 0px; /* Ensure the target is correct for the cursor */
|
||||
position: absolute;
|
||||
left: 111px;
|
||||
top: 24px;
|
||||
width: 155px;
|
||||
height: 6px;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
padding: 3px 0px; /* Ensure the target is correct for the cursor */
|
||||
}
|
||||
|
||||
#webamp .media-info #kbps {
|
||||
position: absolute;
|
||||
left: 111px;
|
||||
top: 43px;
|
||||
width: 15px;
|
||||
height: 6px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
left: 111px;
|
||||
top: 43px;
|
||||
width: 15px;
|
||||
height: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#webamp .stop .media-info #kbps {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#webamp .media-info #khz {
|
||||
position: absolute;
|
||||
left: 156px;
|
||||
top: 43px;
|
||||
width: 10px;
|
||||
height: 6px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
left: 156px;
|
||||
top: 43px;
|
||||
width: 10px;
|
||||
height: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#webamp .stop .media-info #khz {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#webamp .media-info .mono-stereo {
|
||||
position: absolute;
|
||||
left: 212px;
|
||||
top: 41px;
|
||||
width: 57px;
|
||||
height: 12px;
|
||||
position: absolute;
|
||||
left: 212px;
|
||||
top: 41px;
|
||||
width: 57px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
#webamp .media-info .mono-stereo div {
|
||||
position: absolute;
|
||||
height: 12px;
|
||||
position: absolute;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
#webamp .media-info .mono-stereo #mono {
|
||||
width: 27px;
|
||||
width: 27px;
|
||||
}
|
||||
|
||||
#webamp .media-info .mono-stereo #stereo {
|
||||
left: 27px;
|
||||
width: 29px;
|
||||
left: 27px;
|
||||
width: 29px;
|
||||
}
|
||||
|
||||
#webamp #volume {
|
||||
position: absolute;
|
||||
left: 107px;
|
||||
top: 57px;
|
||||
height: 13px;
|
||||
width: 68px;
|
||||
background-position: 0 0;
|
||||
position: absolute;
|
||||
left: 107px;
|
||||
top: 57px;
|
||||
height: 13px;
|
||||
width: 68px;
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
#webamp #volume input {
|
||||
height: 13px;
|
||||
/* The input itself, is actually 3px shorter than the background
|
||||
height: 13px;
|
||||
/* The input itself, is actually 3px shorter than the background
|
||||
* https://twitter.com/LuigiHann/status/959275940688867328
|
||||
*/
|
||||
width: 65px;
|
||||
display: block;
|
||||
width: 65px;
|
||||
display: block;
|
||||
}
|
||||
#webamp #volume input::-webkit-slider-thumb {
|
||||
top: 1px;
|
||||
height: 11px;
|
||||
width: 14px;
|
||||
top: 1px;
|
||||
height: 11px;
|
||||
width: 14px;
|
||||
}
|
||||
#webamp #volume input::-moz-range-thumb {
|
||||
top: 1px;
|
||||
height: 11px;
|
||||
width: 14px;
|
||||
top: 1px;
|
||||
height: 11px;
|
||||
width: 14px;
|
||||
}
|
||||
|
||||
#webamp #balance {
|
||||
position: absolute;
|
||||
left: 177px;
|
||||
top: 57px;
|
||||
height: 13px;
|
||||
width: 38px;
|
||||
background-position: 0 0;
|
||||
position: absolute;
|
||||
left: 177px;
|
||||
top: 57px;
|
||||
height: 13px;
|
||||
width: 38px;
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
#webamp #balance::-webkit-slider-thumb {
|
||||
top: 1px;
|
||||
height: 11px;
|
||||
width: 14px;
|
||||
top: 1px;
|
||||
height: 11px;
|
||||
width: 14px;
|
||||
}
|
||||
#webamp #balance::-moz-range-thumb {
|
||||
top: 1px;
|
||||
height: 11px;
|
||||
width: 14px;
|
||||
top: 1px;
|
||||
height: 11px;
|
||||
width: 14px;
|
||||
}
|
||||
|
||||
#webamp .windows {
|
||||
position: absolute;
|
||||
left: 219px;
|
||||
top: 58px;
|
||||
width: 46px;
|
||||
height: 12px;
|
||||
position: absolute;
|
||||
left: 219px;
|
||||
top: 58px;
|
||||
width: 46px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
#webamp .windows div {
|
||||
position: absolute;
|
||||
width: 23px;
|
||||
height: 12px;
|
||||
position: absolute;
|
||||
width: 23px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
#webamp .windows #equalizer-button {
|
||||
left: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#webamp .windows #playlist-button {
|
||||
left: 23px;
|
||||
left: 23px;
|
||||
}
|
||||
|
||||
#webamp #position {
|
||||
position: absolute;
|
||||
left: 16px;
|
||||
top: 72px;
|
||||
width: 248px;
|
||||
height: 10px;
|
||||
position: absolute;
|
||||
left: 16px;
|
||||
top: 72px;
|
||||
width: 248px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
#webamp #position::-webkit-slider-thumb {
|
||||
height: 10px;
|
||||
width: 29px;
|
||||
/*
|
||||
height: 10px;
|
||||
width: 29px;
|
||||
/*
|
||||
* 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;
|
||||
-webkit-box-sizing: border-box;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#webamp #position::-moz-range-thumb {
|
||||
height: 10px;
|
||||
width: 29px;
|
||||
height: 10px;
|
||||
width: 29px;
|
||||
}
|
||||
|
||||
/* For some reason, we can't use display: none here */
|
||||
#webamp .stop #position::-webkit-slider-thumb {
|
||||
visibility: hidden;
|
||||
visibility: hidden;
|
||||
}
|
||||
#webamp .stop #position::-moz-range-thumb {
|
||||
visibility: hidden;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
/* For some reason this is needed for the position slider to show up now that
|
||||
* we are using React.
|
||||
*/
|
||||
#webamp .play #position::-webkit-slider-thumb {
|
||||
visibility: visible;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
#webamp .actions div {
|
||||
height: 18px;
|
||||
width: 23px;
|
||||
position: absolute;
|
||||
height: 18px;
|
||||
width: 23px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
#webamp .actions #previous {
|
||||
top: 88px;
|
||||
left: 16px;
|
||||
top: 88px;
|
||||
left: 16px;
|
||||
}
|
||||
#webamp .actions #play {
|
||||
top: 88px;
|
||||
left: 39px;
|
||||
top: 88px;
|
||||
left: 39px;
|
||||
}
|
||||
#webamp .actions #pause {
|
||||
top: 88px;
|
||||
left: 62px;
|
||||
top: 88px;
|
||||
left: 62px;
|
||||
}
|
||||
#webamp .actions #stop {
|
||||
top: 88px;
|
||||
left: 85px;
|
||||
top: 88px;
|
||||
left: 85px;
|
||||
}
|
||||
#webamp .actions #next {
|
||||
top: 88px;
|
||||
left: 108px;
|
||||
width: 22px;
|
||||
top: 88px;
|
||||
left: 108px;
|
||||
width: 22px;
|
||||
}
|
||||
|
||||
#webamp #eject {
|
||||
position: absolute;
|
||||
top: 89px;
|
||||
left: 136px;
|
||||
height: 16px;
|
||||
width: 22px;
|
||||
position: absolute;
|
||||
top: 89px;
|
||||
left: 136px;
|
||||
height: 16px;
|
||||
width: 22px;
|
||||
}
|
||||
|
||||
#webamp .shuffle-repeat {
|
||||
position: absolute;
|
||||
top: 89px;
|
||||
left: 164px;
|
||||
width: 74px;
|
||||
position: absolute;
|
||||
top: 89px;
|
||||
left: 164px;
|
||||
width: 74px;
|
||||
}
|
||||
|
||||
#webamp .shuffle-repeat div {
|
||||
position: absolute;
|
||||
height: 15px;
|
||||
position: absolute;
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
#webamp .shuffle-repeat #shuffle {
|
||||
width: 47px;
|
||||
width: 47px;
|
||||
}
|
||||
|
||||
#webamp .shuffle-repeat #repeat {
|
||||
left: 46px;
|
||||
width: 28px;
|
||||
left: 46px;
|
||||
width: 28px;
|
||||
}
|
||||
|
||||
#webamp #about {
|
||||
position: absolute;
|
||||
top: 91px;
|
||||
left: 253px;
|
||||
height: 15px;
|
||||
width: 13px;
|
||||
position: absolute;
|
||||
top: 91px;
|
||||
left: 253px;
|
||||
height: 15px;
|
||||
width: 13px;
|
||||
}
|
||||
|
||||
#webamp .digit {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
width: 9px;
|
||||
height: 13px;
|
||||
background-repeat: no-repeat;
|
||||
text-indent: -9999px;
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
width: 9px;
|
||||
height: 13px;
|
||||
background-repeat: no-repeat;
|
||||
text-indent: -9999px;
|
||||
}
|
||||
|
||||
/* Shade View */
|
||||
#webamp #main-window.shade {
|
||||
height: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
#webamp .shade .media-info,
|
||||
|
|
@ -423,87 +423,87 @@
|
|||
#webamp .shade #balance,
|
||||
#webamp .shade .shuffle-repeat,
|
||||
#webamp .shade .status {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
#webamp .shade #title-bar {
|
||||
}
|
||||
|
||||
#webamp .shade .actions div {
|
||||
position: absolute;
|
||||
position: absolute;
|
||||
}
|
||||
#webamp .shade .actions #previous,
|
||||
#webamp .shade .actions #previous:active {
|
||||
background: none;
|
||||
height: 10px;
|
||||
width: 7px;
|
||||
top: 2px;
|
||||
left: 169px;
|
||||
background: none;
|
||||
height: 10px;
|
||||
width: 7px;
|
||||
top: 2px;
|
||||
left: 169px;
|
||||
}
|
||||
#webamp .shade .actions #play,
|
||||
#webamp .shade .actions #play:active {
|
||||
background: none;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
top: 2px;
|
||||
left: 176px;
|
||||
background: none;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
top: 2px;
|
||||
left: 176px;
|
||||
}
|
||||
#webamp .shade .actions #pause,
|
||||
#webamp .shade .actions #pause:active {
|
||||
background: none;
|
||||
height: 10px;
|
||||
width: 9px;
|
||||
top: 2px;
|
||||
left: 186px;
|
||||
background: none;
|
||||
height: 10px;
|
||||
width: 9px;
|
||||
top: 2px;
|
||||
left: 186px;
|
||||
}
|
||||
#webamp .shade .actions #stop,
|
||||
#webamp .shade .actions #stop:active {
|
||||
background: none;
|
||||
height: 10px;
|
||||
width: 9px;
|
||||
top: 2px;
|
||||
left: 195px;
|
||||
background: none;
|
||||
height: 10px;
|
||||
width: 9px;
|
||||
top: 2px;
|
||||
left: 195px;
|
||||
}
|
||||
#webamp .shade .actions #next,
|
||||
#webamp .shade .actions #next:active {
|
||||
background: none;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
top: 2px;
|
||||
left: 204px;
|
||||
background: none;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
top: 2px;
|
||||
left: 204px;
|
||||
}
|
||||
#webamp .shade #eject,
|
||||
#webamp .shade #eject:active {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
top: 2px;
|
||||
left: 215px;
|
||||
background: none;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
top: 2px;
|
||||
left: 215px;
|
||||
background: none;
|
||||
}
|
||||
|
||||
#webamp .shade #position {
|
||||
position: absolute;
|
||||
left: 226px;
|
||||
top: 4px;
|
||||
width: 17px;
|
||||
height: 7px;
|
||||
position: absolute;
|
||||
left: 226px;
|
||||
top: 4px;
|
||||
width: 17px;
|
||||
height: 7px;
|
||||
}
|
||||
|
||||
#webamp .shade #position::-webkit-slider-thumb {
|
||||
height: 7px;
|
||||
width: 3px;
|
||||
/* This make it appear. Not sure why */
|
||||
background: none;
|
||||
height: 7px;
|
||||
width: 3px;
|
||||
/* This make it appear. Not sure why */
|
||||
background: none;
|
||||
}
|
||||
|
||||
#webamp .shade #position::-moz-range-thumb {
|
||||
height: 7px;
|
||||
width: 3px;
|
||||
/* This make it appear. Not sure why */
|
||||
background: none;
|
||||
height: 7px;
|
||||
width: 3px;
|
||||
/* This make it appear. Not sure why */
|
||||
background: none;
|
||||
}
|
||||
|
||||
#webamp #main-window .mini-time {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 127px;
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 127px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,88 +1,88 @@
|
|||
#webamp-media-library {
|
||||
font-size: 11px;
|
||||
font-family: "MS Sans Serif", "Segoe UI", sans-serif;
|
||||
-webkit-font-smoothing: none;
|
||||
padding-right: 2px;
|
||||
padding-bottom: 3px;
|
||||
font-size: 11px;
|
||||
font-family: "MS Sans Serif", "Segoe UI", sans-serif;
|
||||
-webkit-font-smoothing: none;
|
||||
padding-right: 2px;
|
||||
padding-bottom: 3px;
|
||||
}
|
||||
|
||||
#webamp-media-library input {
|
||||
height: 15px;
|
||||
border: none;
|
||||
background-color: inherit;
|
||||
padding: 0;
|
||||
height: 15px;
|
||||
border: none;
|
||||
background-color: inherit;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#webamp-media-library th {
|
||||
font-weight: normal;
|
||||
text-align: left;
|
||||
padding-left: 5px;
|
||||
white-space: nowrap;
|
||||
height: 14px;
|
||||
font-weight: normal;
|
||||
text-align: left;
|
||||
padding-left: 5px;
|
||||
white-space: nowrap;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
#webamp-media-library td {
|
||||
white-space: nowrap;
|
||||
white-space: nowrap;
|
||||
}
|
||||
#webamp-media-library ul {
|
||||
list-style: none;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#webamp-media-library ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#webamp-media-library ul li ul {
|
||||
padding-left: 10px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
#webamp-media-library .webamp-media-library-table {
|
||||
width: 100%;
|
||||
border-spacing: unset;
|
||||
width: 100%;
|
||||
border-spacing: unset;
|
||||
}
|
||||
#webamp-media-library .webamp-media-library-vertical-divider {
|
||||
padding-top: 2px;
|
||||
padding-bottom: 2px;
|
||||
padding-left: 4px;
|
||||
padding-right: 4px;
|
||||
cursor: col-resize;
|
||||
padding-top: 2px;
|
||||
padding-bottom: 2px;
|
||||
padding-left: 4px;
|
||||
padding-right: 4px;
|
||||
cursor: col-resize;
|
||||
}
|
||||
|
||||
#webamp-media-library .webamp-media-library-vertical-divider-line {
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#webamp-media-library .webamp-media-library-horizontal-divider {
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
cursor: row-resize;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
cursor: row-resize;
|
||||
}
|
||||
|
||||
#webamp-media-library .webamp-media-library-horizontal-divider-line {
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#webamp-media-library button {
|
||||
border: none;
|
||||
color: inherit;
|
||||
padding: 0;
|
||||
font: inherit;
|
||||
cursor: pointer;
|
||||
outline: inherit;
|
||||
height: 18px;
|
||||
cursor: inherit;
|
||||
/* TODO: I think only the center is supposed to stretch */
|
||||
background-size: 100% 18px;
|
||||
min-width: 53px;
|
||||
margin-right: 4px;
|
||||
border: none;
|
||||
color: inherit;
|
||||
padding: 0;
|
||||
font: inherit;
|
||||
cursor: pointer;
|
||||
outline: inherit;
|
||||
height: 18px;
|
||||
cursor: inherit;
|
||||
/* TODO: I think only the center is supposed to stretch */
|
||||
background-size: 100% 18px;
|
||||
min-width: 53px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
#webamp-media-library-track-summary-duration {
|
||||
/* This plus the margin-right on the button add up to 8px; */
|
||||
margin-left: 4px;
|
||||
/* This plus the margin-right on the button add up to 8px; */
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
.webamp-desktop {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: -1;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,20 +1,20 @@
|
|||
#webamp .mini-time {
|
||||
display: block;
|
||||
height: 6px;
|
||||
width: 25px;
|
||||
display: block;
|
||||
height: 6px;
|
||||
width: 25px;
|
||||
}
|
||||
|
||||
#webamp .mini-time.blinking .character:not(.background-character) {
|
||||
animation: blink 2s step-start 1s infinite;
|
||||
-webkit-animation: blink 2s step-start 1s infinite;
|
||||
animation: blink 2s step-start 1s infinite;
|
||||
-webkit-animation: blink 2s step-start 1s infinite;
|
||||
}
|
||||
|
||||
#webamp .mini-time .background-character {
|
||||
z-index: 1;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#webamp .mini-time .character {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
|
|
|||
174
css/page.css
174
css/page.css
|
|
@ -1,147 +1,147 @@
|
|||
/* Rules for the page layout */
|
||||
body {
|
||||
background-color: #224eb7;
|
||||
font-family: arial;
|
||||
font-size: 15px;
|
||||
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;
|
||||
display: none;
|
||||
position: absolute;
|
||||
width: 275px;
|
||||
margin-top: -58px;
|
||||
margin-left: -137px;
|
||||
top: 40%;
|
||||
left: 50%;
|
||||
background: white;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.about {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
color: white;
|
||||
/* Let users drag windows over this text */
|
||||
z-index: -1;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
color: white;
|
||||
/* Let users drag windows over this text */
|
||||
z-index: -1;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.about a {
|
||||
display: flex;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.about a svg {
|
||||
margin: 10px 13px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
fill: #fff;
|
||||
transition: 0.25s ease-out;
|
||||
margin: 10px 13px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
fill: #fff;
|
||||
transition: 0.25s ease-out;
|
||||
}
|
||||
|
||||
/* TODO: Ideally this would be a border not a :before */
|
||||
.about a:before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
content: "";
|
||||
width: 42px; /* TODO: This should be derived not hard coded */
|
||||
height: 2px;
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
transition: 0.25s ease-out;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
content: "";
|
||||
width: 42px; /* TODO: This should be derived not hard coded */
|
||||
height: 2px;
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
transition: 0.25s ease-out;
|
||||
}
|
||||
|
||||
.about a:hover:before {
|
||||
background-color: rgba(255, 255, 255, 255);
|
||||
transition: 0.25s ease-out;
|
||||
background-color: rgba(255, 255, 255, 255);
|
||||
transition: 0.25s ease-out;
|
||||
}
|
||||
|
||||
.about a:hover svg {
|
||||
transition: 0.25s ease-out;
|
||||
transform: scale(1.35);
|
||||
transition: 0.25s ease-out;
|
||||
transform: scale(1.35);
|
||||
}
|
||||
|
||||
#twitter-share {
|
||||
background-color: #1da1f2;
|
||||
background-color: #1da1f2;
|
||||
}
|
||||
#github-share {
|
||||
background-color: #2d3238;
|
||||
background-color: #2d3238;
|
||||
}
|
||||
|
||||
#mail-share {
|
||||
background-color: #6a7788;
|
||||
background-color: #6a7788;
|
||||
}
|
||||
|
||||
#butterchurn-share {
|
||||
display: none; /* Button is only shown if the window gets enabled */
|
||||
background-size: 100%; /* Image is 2x size for retina displays */
|
||||
background-size: 100%; /* Image is 2x size for retina displays */
|
||||
display: none; /* Button is only shown if the window gets enabled */
|
||||
background-size: 100%; /* Image is 2x size for retina displays */
|
||||
background-size: 100%; /* Image is 2x size for retina displays */
|
||||
}
|
||||
|
||||
#app {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
z-index: -2; /* Place this below the about buttons */
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
z-index: -2; /* Place this below the about buttons */
|
||||
}
|
||||
|
||||
#app #loading {
|
||||
color: white;
|
||||
text-align: center;
|
||||
font-size: 40px;
|
||||
height: 30px;
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
color: white;
|
||||
text-align: center;
|
||||
font-size: 40px;
|
||||
height: 30px;
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
#app #loading .ellipsis-anim span {
|
||||
opacity: 0;
|
||||
-webkit-animation: ellipsis-dot 1s infinite;
|
||||
animation: ellipsis-dot 1s infinite;
|
||||
opacity: 0;
|
||||
-webkit-animation: ellipsis-dot 1s infinite;
|
||||
animation: ellipsis-dot 1s infinite;
|
||||
}
|
||||
|
||||
#app #loading .ellipsis-anim span:nth-child(1) {
|
||||
-webkit-animation-delay: 0s;
|
||||
animation-delay: 0s;
|
||||
-webkit-animation-delay: 0s;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
#app #loading .ellipsis-anim span:nth-child(2) {
|
||||
-webkit-animation-delay: 0.1s;
|
||||
animation-delay: 0.1s;
|
||||
-webkit-animation-delay: 0.1s;
|
||||
animation-delay: 0.1s;
|
||||
}
|
||||
|
||||
#app #loading .ellipsis-anim span:nth-child(3) {
|
||||
-webkit-animation-delay: 0.2s;
|
||||
animation-delay: 0.2s;
|
||||
-webkit-animation-delay: 0.2s;
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
@-webkit-keyframes ellipsis-dot {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes ellipsis-dot {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,329 +1,329 @@
|
|||
/* Styles */
|
||||
#webamp #playlist-window {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#webamp .playlist-top {
|
||||
width: 100%;
|
||||
min-height: 20px;
|
||||
max-height: 20px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
min-height: 20px;
|
||||
max-height: 20px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#webamp .playlist-top-left {
|
||||
width: 25px;
|
||||
width: 25px;
|
||||
}
|
||||
|
||||
#webamp .playlist-top-left-spacer {
|
||||
width: 12px;
|
||||
width: 12px;
|
||||
}
|
||||
|
||||
#webamp .playlist-top-left-fill {
|
||||
flex-grow: 1;
|
||||
background-position: right;
|
||||
flex-grow: 1;
|
||||
background-position: right;
|
||||
}
|
||||
|
||||
#webamp .playlist-top-right-spacer {
|
||||
/* This goes to the right of the center */
|
||||
width: 13px;
|
||||
/* This goes to the right of the center */
|
||||
width: 13px;
|
||||
}
|
||||
|
||||
#webamp .playlist-top-right-fill {
|
||||
flex-grow: 1;
|
||||
background-position: right;
|
||||
flex-grow: 1;
|
||||
background-position: right;
|
||||
}
|
||||
|
||||
#webamp .playlist-top-title {
|
||||
width: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
#webamp .playlist-top-right {
|
||||
width: 25px;
|
||||
width: 25px;
|
||||
}
|
||||
|
||||
#webamp .playlist-middle {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
overflow: hidden;
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#webamp .playlist-middle-left {
|
||||
background-repeat: repeat-y;
|
||||
width: 12px;
|
||||
min-width: 12px;
|
||||
background-repeat: repeat-y;
|
||||
width: 12px;
|
||||
min-width: 12px;
|
||||
}
|
||||
|
||||
#webamp .playlist-middle-center {
|
||||
flex-grow: 1;
|
||||
padding: 3px 0;
|
||||
min-width: 0; /* Not sure why this is needed */
|
||||
flex-grow: 1;
|
||||
padding: 3px 0;
|
||||
min-width: 0; /* Not sure why this is needed */
|
||||
}
|
||||
|
||||
#webamp .playlist-tracks {
|
||||
display: flex;
|
||||
flex: 1 0 auto;
|
||||
display: flex;
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
|
||||
#webamp .playlist-tracks .track-cell {
|
||||
height: 13px;
|
||||
line-height: 13px;
|
||||
font-size: 9px;
|
||||
letter-spacing: 0.5px;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
height: 13px;
|
||||
line-height: 13px;
|
||||
font-size: 9px;
|
||||
letter-spacing: 0.5px;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
#webamp .playlist-track-durations > div {
|
||||
padding-right: 3px;
|
||||
text-align: right;
|
||||
padding-right: 3px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#webamp .playlist-track-titles {
|
||||
flex: 1 1 auto;
|
||||
overflow: hidden;
|
||||
flex: 1 1 auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#webamp .playlist-track-titles > div {
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#webamp .playlist-middle-right {
|
||||
background-repeat: repeat-y;
|
||||
background-position: top right;
|
||||
width: 20px;
|
||||
min-width: 20px;
|
||||
position: relative;
|
||||
padding-bottom: 18px;
|
||||
background-repeat: repeat-y;
|
||||
background-position: top right;
|
||||
width: 20px;
|
||||
min-width: 20px;
|
||||
position: relative;
|
||||
padding-bottom: 18px;
|
||||
}
|
||||
|
||||
#webamp .playlist-scrollbar {
|
||||
height: 100%;
|
||||
width: 8px;
|
||||
margin-left: 5px;
|
||||
height: 100%;
|
||||
width: 8px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
#webamp .playlist-scrollbar-handle {
|
||||
width: 8x;
|
||||
height: 18px;
|
||||
width: 8x;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
#webamp .playlist-bottom {
|
||||
width: 100%;
|
||||
height: 38px;
|
||||
min-height: 38px;
|
||||
max-height: 38px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 38px;
|
||||
min-height: 38px;
|
||||
max-height: 38px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#webamp .playlist-bottom-left {
|
||||
width: 125px;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
width: 125px;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
#webamp .playlist-menu li {
|
||||
list-style: none;
|
||||
display: none;
|
||||
width: 22px;
|
||||
height: 18px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
display: none;
|
||||
width: 22px;
|
||||
height: 18px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#webamp .playlist-menu li > div {
|
||||
height: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#webamp .playlist-menu ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
#webamp .playlist-menu.selected li {
|
||||
display: block;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#webamp .playlist-menu .bar {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: -3px;
|
||||
width: 3px;
|
||||
height: 54px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: -3px;
|
||||
width: 3px;
|
||||
height: 54px;
|
||||
}
|
||||
|
||||
#webamp #playlist-add-menu {
|
||||
position: absolute;
|
||||
bottom: 12px;
|
||||
left: 14px;
|
||||
width: 22px;
|
||||
height: 18px;
|
||||
position: absolute;
|
||||
bottom: 12px;
|
||||
left: 14px;
|
||||
width: 22px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
#webamp #playlist-remove-menu.playlist-menu .bar {
|
||||
height: 72px;
|
||||
height: 72px;
|
||||
}
|
||||
|
||||
#webamp #playlist-remove-menu {
|
||||
position: absolute;
|
||||
bottom: 12px;
|
||||
left: 43px;
|
||||
width: 22px;
|
||||
height: 18px;
|
||||
position: absolute;
|
||||
bottom: 12px;
|
||||
left: 43px;
|
||||
width: 22px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
#webamp #playlist-selection-menu {
|
||||
position: absolute;
|
||||
bottom: 12px;
|
||||
left: 72px;
|
||||
width: 22px;
|
||||
height: 18px;
|
||||
position: absolute;
|
||||
bottom: 12px;
|
||||
left: 72px;
|
||||
width: 22px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
#webamp #playlist-misc-menu {
|
||||
position: absolute;
|
||||
bottom: 12px;
|
||||
left: 101px;
|
||||
width: 22px;
|
||||
height: 18px;
|
||||
position: absolute;
|
||||
bottom: 12px;
|
||||
left: 101px;
|
||||
width: 22px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
#webamp #playlist-list-menu {
|
||||
position: absolute;
|
||||
bottom: 12px;
|
||||
right: 22px;
|
||||
width: 22px;
|
||||
height: 18px;
|
||||
position: absolute;
|
||||
bottom: 12px;
|
||||
right: 22px;
|
||||
width: 22px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
#webamp .playlist-bottom-right {
|
||||
width: 150px;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: 150px;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
#webamp .playlist-running-time-display {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 7px;
|
||||
height: 10px;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 7px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
#webamp .playlist-action-buttons {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: 3px;
|
||||
display: flex;
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: 3px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#webamp .playlist-action-buttons > div {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
#webamp #playlist-window .playlist-visualizer {
|
||||
width: 75px;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
right: 150px;
|
||||
display: none; /* Only show if the window is wide enough */
|
||||
width: 75px;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
right: 150px;
|
||||
display: none; /* Only show if the window is wide enough */
|
||||
}
|
||||
|
||||
#webamp #playlist-window.wide .playlist-visualizer {
|
||||
display: block;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#webamp #playlist-window .mini-time {
|
||||
position: absolute;
|
||||
top: 23px;
|
||||
left: 66px;
|
||||
position: absolute;
|
||||
top: 23px;
|
||||
left: 66px;
|
||||
}
|
||||
|
||||
#webamp #playlist-window #playlist-resize-target {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
#webamp #playlist-close-button {
|
||||
position: absolute;
|
||||
right: 2px;
|
||||
height: 9px;
|
||||
width: 9px;
|
||||
top: 3px;
|
||||
position: absolute;
|
||||
right: 2px;
|
||||
height: 9px;
|
||||
width: 9px;
|
||||
top: 3px;
|
||||
}
|
||||
|
||||
#webamp #playlist-shade-button {
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
height: 9px;
|
||||
width: 9px;
|
||||
top: 3px;
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
height: 9px;
|
||||
width: 9px;
|
||||
top: 3px;
|
||||
}
|
||||
|
||||
#webamp #playlist-window-shade {
|
||||
height: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
#webamp #playlist-window-shade .left {
|
||||
height: 14px;
|
||||
background-repeat: no-repeat;
|
||||
height: 14px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
#webamp #playlist-window-shade .right {
|
||||
height: 14px;
|
||||
background-repeat: no-repeat;
|
||||
background-position-x: right;
|
||||
height: 14px;
|
||||
background-repeat: no-repeat;
|
||||
background-position-x: right;
|
||||
}
|
||||
|
||||
#webamp #playlist-window #playlist-scroll-up-button,
|
||||
#webamp #playlist-window #playlist-scroll-down-button {
|
||||
position: absolute;
|
||||
width: 8px;
|
||||
height: 5px;
|
||||
right: 7px;
|
||||
position: absolute;
|
||||
width: 8px;
|
||||
height: 5px;
|
||||
right: 7px;
|
||||
}
|
||||
|
||||
#webamp #playlist-window #playlist-scroll-up-button {
|
||||
top: 2px;
|
||||
top: 2px;
|
||||
}
|
||||
#webamp #playlist-window #playlist-scroll-down-button {
|
||||
top: 8px;
|
||||
top: 8px;
|
||||
}
|
||||
|
||||
#webamp #playlist-window-shade #playlist-resize-target {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 3px;
|
||||
height: 9px;
|
||||
width: 9px;
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 3px;
|
||||
height: 9px;
|
||||
width: 9px;
|
||||
}
|
||||
|
||||
#webamp #playlist-shade-track-title {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 5px;
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 5px;
|
||||
}
|
||||
|
||||
#webamp #playlist-shade-time {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 30px;
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 30px;
|
||||
}
|
||||
|
||||
#webamp #playlist-window #visualizer {
|
||||
position: absolute;
|
||||
/* TODO: These numbers are not quite right */
|
||||
top: 10px;
|
||||
left: 5px;
|
||||
position: absolute;
|
||||
/* TODO: These numbers are not quite right */
|
||||
top: 10px;
|
||||
left: 5px;
|
||||
}
|
||||
|
|
|
|||
128
css/webamp.css
128
css/webamp.css
|
|
@ -1,112 +1,112 @@
|
|||
/* Rules used by all windows */
|
||||
|
||||
#webamp {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
/* Prevent accidental highlighting */
|
||||
#webamp canvas {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
#webamp * {
|
||||
/* Some environments globably change the box-sizing */
|
||||
box-sizing: content-box;
|
||||
-webkit-box-sizing: content-box;
|
||||
/* Some environments globably change the box-sizing */
|
||||
box-sizing: content-box;
|
||||
-webkit-box-sizing: content-box;
|
||||
}
|
||||
|
||||
#webamp *:focus {
|
||||
outline: 0;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
/* Range input css reset */
|
||||
#webamp input[type="range"] {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: none;
|
||||
border: none;
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: none;
|
||||
border: none;
|
||||
}
|
||||
#webamp input[type="range"]::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
background: none;
|
||||
-webkit-appearance: none;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
background: none;
|
||||
}
|
||||
#webamp input[type="range"]::-moz-range-thumb {
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
background: none;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
background: none;
|
||||
}
|
||||
#webamp input[type="range"]::-moz-range-track {
|
||||
border: none;
|
||||
background: none;
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
#webamp input[type="range"]:focus {
|
||||
outline: none;
|
||||
outline: none;
|
||||
}
|
||||
#webamp input[type="range"]::-moz-focus-outer {
|
||||
border: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
#webamp a:focus {
|
||||
outline: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Animation */
|
||||
@keyframes blink {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes blink {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
#webamp .character {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
width: 5px;
|
||||
height: 6px;
|
||||
/* background-image: TEXT.BMP via Javascript */
|
||||
text-indent: -9999px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
width: 5px;
|
||||
height: 6px;
|
||||
/* background-image: TEXT.BMP via Javascript */
|
||||
text-indent: -9999px;
|
||||
}
|
||||
|
||||
#webamp .window {
|
||||
position: absolute;
|
||||
/* 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) */
|
||||
position: absolute;
|
||||
/* 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) */
|
||||
}
|
||||
|
||||
#webamp .window {
|
||||
/* Work around rendering bug with clip-path */
|
||||
-webkit-transform: translateZ(0);
|
||||
/* Work around rendering bug with clip-path */
|
||||
-webkit-transform: translateZ(0);
|
||||
}
|
||||
#webamp .window.doubled {
|
||||
-moz-transform: translateZ(0) scale(2);
|
||||
-moz-transform-origin: top left;
|
||||
-webkit-transform: translateZ(0) scale(2);
|
||||
-webkit-transform-origin: top left;
|
||||
-moz-transform: translateZ(0) scale(2);
|
||||
-moz-transform-origin: top left;
|
||||
-webkit-transform: translateZ(0) scale(2);
|
||||
-webkit-transform-origin: top left;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -304,7 +304,14 @@ export function fetchMediaTags(file: string | Blob, id: number): Dispatchable {
|
|||
const blob = new Blob([byteArray], { type: picture[0].format });
|
||||
albumArtUrl = URL.createObjectURL(blob);
|
||||
}
|
||||
dispatch({ type: SET_MEDIA_TAGS, artist: artist ? artist : '', title: title ? title : '', album, albumArtUrl, id });
|
||||
dispatch({
|
||||
type: SET_MEDIA_TAGS,
|
||||
artist: artist ? artist : "",
|
||||
title: title ? title : "",
|
||||
album,
|
||||
albumArtUrl,
|
||||
id
|
||||
});
|
||||
} catch (e) {
|
||||
dispatch({ type: MEDIA_TAG_REQUEST_FAILED, id });
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue