Inline cursors in CSS

This commit is contained in:
Jordan Eldredge 2016-07-12 09:55:35 -07:00
parent 357b0c7950
commit 087546802f
3 changed files with 21 additions and 15 deletions

View file

@ -3,7 +3,7 @@
position: absolute;
height: 116px;
width: 275px;
cursor:url('https://jordaneldredge.com/projects/winamp2-js/cursors/MAINMENU.PNG'), auto;
cursor:url('../cursors/MAINMENU.PNG'), auto;
/* Ask the browser to scale showing large pixels if possible */
image-rendering: -moz-crisp-edges; /* Firefox */
image-rendering: -o-crisp-edges; /* Opera */
@ -59,7 +59,7 @@
left: 0;
height: 14px;
width: 275px;
cursor:url('https://jordaneldredge.com/projects/winamp2-js/cursors/TITLEBAR.PNG'), auto;
cursor:url('../cursors/TITLEBAR.PNG'), auto;
}
#winamp2-js #option,
@ -70,7 +70,7 @@
height: 9px;
width: 9px;
top: 3px;
cursor:url('https://jordaneldredge.com/projects/winamp2-js/cursors/MAINMENU.PNG'), auto;
cursor:url('../cursors/MAINMENU.PNG'), auto;
}
#winamp2-js #title-bar #option {
@ -94,7 +94,7 @@
}
#winamp2-js #title-bar #close {
left: 264px;
cursor:url('https://jordaneldredge.com/projects/winamp2-js/cursors/CLOSE.PNG'), auto;
cursor:url('../cursors/CLOSE.PNG'), auto;
}
#winamp2-js #clutter-bar {
position: absolute;
@ -273,19 +273,19 @@
height: 13px;
width: 68px;
background-position: 0 0;
cursor:url('https://jordaneldredge.com/projects/winamp2-js/cursors/POSBAR.PNG'), auto;
cursor:url('../cursors/POSBAR.PNG'), auto;
}
#winamp2-js #volume::-webkit-slider-thumb {
top: 1px;
height: 11px;
width: 14px;
cursor:url('https://jordaneldredge.com/projects/winamp2-js/cursors/POSBAR.PNG'), auto;
cursor:url('../cursors/POSBAR.PNG'), auto;
}
#winamp2-js #volume::-moz-range-thumb {
top: 1px;
height: 11px;
width: 14px;
cursor:url('https://jordaneldredge.com/projects/winamp2-js/cursors/POSBAR.PNG'), auto;
cursor:url('../cursors/POSBAR.PNG'), auto;
}
#winamp2-js #balance {
@ -295,20 +295,20 @@
height: 13px;
width: 38px;
background-position: 0 0;
cursor:url('https://jordaneldredge.com/projects/winamp2-js/cursors/POSBAR.PNG'), auto;
cursor:url('../cursors/POSBAR.PNG'), auto;
}
#winamp2-js #balance::-webkit-slider-thumb {
top: 1px;
height: 11px;
width: 14px;
cursor:url('https://jordaneldredge.com/projects/winamp2-js/cursors/POSBAR.PNG'), auto;
cursor:url('../cursors/POSBAR.PNG'), auto;
}
#winamp2-js #balance::-moz-range-thumb {
top: 1px;
height: 11px;
width: 14px;
cursor:url('https://jordaneldredge.com/projects/winamp2-js/cursors/POSBAR.PNG'), auto;
cursor:url('../cursors/POSBAR.PNG'), auto;
}
#winamp2-js .windows {
@ -339,13 +339,13 @@
top: 72px;
width: 248px;
height: 10px;
cursor:url('https://jordaneldredge.com/projects/winamp2-js/cursors/POSBAR.PNG'), auto;
cursor:url('../cursors/POSBAR.PNG'), auto;
}
#winamp2-js #position::-webkit-slider-thumb {
height: 10px;
width: 29px;
cursor:url('https://jordaneldredge.com/projects/winamp2-js/cursors/POSBAR.PNG'), auto;
cursor:url('../cursors/POSBAR.PNG'), 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
@ -357,7 +357,7 @@
#winamp2-js #position::-moz-range-thumb {
height: 10px;
width: 29px;
cursor:url('https://jordaneldredge.com/projects/winamp2-js/cursors/POSBAR.PNG'), auto;
cursor:url('../cursors/POSBAR.PNG'), auto;
}
/* For some reason, we can't use display: none here */
@ -444,7 +444,7 @@
}
#winamp2-js #shade-time {
cursor:url('https://jordaneldredge.com/projects/winamp2-js/cursors/MAINMENU.PNG'), auto;
cursor:url('../cursors/MAINMENU.PNG'), auto;
}
@ -457,7 +457,7 @@
display: none;
}
#winamp2-js .shade #title-bar {
cursor:url('https://jordaneldredge.com/projects/winamp2-js/cursors/MAINMENU.PNG'), auto;
cursor:url('../cursors/MAINMENU.PNG'), auto;
}
#winamp2-js .shade .actions div {

View file

@ -34,9 +34,11 @@
"css-loader": "^0.23.1",
"eslint": "2.*",
"eslint-plugin-react": "^5.2.2",
"file-loader": "^0.9.0",
"gzip-size-cli": "^1.0.0",
"pretty-bytes-cli": "^1.0.0",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"webpack": "^1.13.0"
},
"dependencies": {

View file

@ -15,6 +15,10 @@ module.exports = {
test: /\.css$/,
loader: 'style-loader!css-loader'
},
{
test: /\.png$/i,
loader: 'url-loader?limit=100000'
},
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,