localhots/oldhaven
1
0
Fork 0
Code Releases Activity

Improved design, delayed blowjobs, error handling, nice artist loading.

Browse Source
This commit is contained in:
magnolia-fan
2011-06-21 00:42:21 +04:00
parent 7dbf6b87cc
commit b69c9cdbe0
13 changed files with 219 additions and 395 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/stylesheets/albums.css
+5
View File
@@ -38,6 +38,11 @@
.album .pic > * {
margin-left: 25px;
}
.album .pic img {
width: 248px;
height: 248px;
border: #DDD 1px solid;
}
.add-album-button-container {
position: relative;
margin: 10px -25px 0 0;
public/stylesheets/layout.css
+3
View File
@@ -13,6 +13,7 @@ body {
-webkit-user-select: none;
user-select: none;
cursor: default;
min-width: 1000px;
}
#header-container {
@@ -22,11 +23,13 @@ body {
width: 350px;
height: 600px;
float: right;
background-color: #222;
}
#data-container {
width: auto;
margin-right: 350px;
overflow-y: auto;
min-width: 650px;
}
#player {
public/stylesheets/misc.css
+36 -13
View File
@@ -5,7 +5,8 @@
}
#navigation {
background-color: #333;
background-color: #EEE;
background-image: url(/images/concrete_wall_2.png);
height: 30px;
}
#navigation li {
@@ -14,13 +15,13 @@
width: auto;
height: 30px;
margin-left: 10px;
color: #FFF;
color: #222;
line-height: 30px;
text-shadow: #CCC 0px 0px 0.5px;
text-shadow: #666 0px 0px 0.5px;
}
#navigation li:hover {
cursor: pointer;
text-shadow: #CCC 0px 0px 2px;
text-shadow: #666 0px 0px 2px;
}
#navigation li.logo {
font-size: 20px;
@@ -38,7 +39,7 @@
#header-container .hello {
float: right;
margin: 6px 10px 0 0;
color: #FFF;
color: #222;
}
.button {
@@ -62,22 +63,44 @@
}
.scrollbar-handle-container {
background: #FFF;
width: 8px;
}
.scrollbar-handle {
width: 8px;
background: #EEE;
}
.scrollbar-handle:hover {
background: #999;
}
#data-container .scrollbar-handle-container {
background-color: #FFF;
}
#data-container .scrollbar-handle {
background-color: #CCC;
}
#data-container .scrollbar-handle:hover {
background-color: #999;
}
.scrollbar-handle.move {
background: #AAA;
}
#data-container .scrollbar-handle.move {
background-color: #AAA;
}
#player-container .scrollbar-handle-container {
background-color: #222;
}
#player-container .scrollbar-handle {
background-color: #444;
}
#player-container .scrollbar-handle:hover {
background-color: #666;
}
#player-container .scrollbar-handle.move {
background-color: #888;
}
#error_page {
position: relative;
public/stylesheets/player.css
+67 -79
View File
@@ -1,53 +1,50 @@
#player {
background-color: #222;
#player .now-playing {
height: 30px;
color: #FFF;
text-align: center;
line-height: 30px;
}
#player .now-playing {
height: 30px;
color: #FFF;
text-align: center;
line-height: 30px;
}
#player .progress {
width: 330px;
#player .progress {
width: 330px;
height: 5px;
background-color: #333;
margin: 0 10px;
cursor: pointer;
}
#player .progress .loaded {
width: 0;
height: 5px;
background-color: #333;
margin: 0 10px;
cursor: pointer;
background-color: #405050;
}
#player .progress .loaded {
#player .progress .played {
width: 0;
height: 5px;
background-color: #405050;
background-color: #09A;
}
#player .progress .played {
width: 0;
height: 5px;
background-color: #09A;
}
#player .controls {
width: 290px;
margin: 20px 95px;
#player .controls {
width: 290px;
margin: 20px 95px;
}
#player .controls > div {
width: 40px;
height: 40px;
float: left;
margin-right: 20px;
cursor: pointer;
}
#player .controls .prev {
background-image: url('/images/icns/prev.png');
}
#player .controls .play {
background-image: url('/images/icns/play.png');
}
#player .controls .pause {
background-image: url('/images/icns/pause.png');
display: none;
}
#player .controls .next {
background-image: url('/images/icns/next.png');
}
#player .controls > div {
width: 40px;
height: 40px;
float: left;
margin-right: 20px;
cursor: pointer;
}
#player .controls .prev {
background-image: url('/images/icns/prev.png');
}
#player .controls .play {
background-image: url('/images/icns/play.png');
}
#player .controls .pause {
background-image: url('/images/icns/pause.png');
display: none;
}
#player .controls .next {
background-image: url('/images/icns/next.png');
}
.playlist-tracks {
width: 343px;
@@ -60,6 +57,7 @@
position: relative;
overflow: hidden;
height: 26px;
color: #FFF;
}
.playlist-tracks li .item .title {
position: absolute;
@@ -82,15 +80,15 @@
line-height: 26px;
}
.playlist-tracks li .item:hover {
background-color: #D0E0F0;
background-color: #444;
cursor: default;
}
.playlist-tracks li:nth-child(even) {
background-color: #F0F0F0;
.playlist-tracks li:nth-child(odd) {
background-color: #2A2A2A;
cursor: default;
}
.playlist-tracks li.now .item {
background-color: #E0EAF0;
color: #09A;
cursor: default;
}
.playlist-tracks li .item .duration {
@@ -106,41 +104,31 @@
z-index: 20;
width: 100px;
height: 26px;
background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.6) 42%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(42%,rgba(255,255,255,0.6)), color-stop(50%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.6) 42%,rgba(255,255,255,1) 50%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.6) 42%,rgba(255,255,255,1) 50%,rgba(255,255,255,1) 100%); /* Opera11.10+ */
background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.6) 42%,rgba(255,255,255,1) 50%,rgba(255,255,255,1) 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
background: linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.6) 42%,rgba(255,255,255,1) 50%,rgba(255,255,255,1) 100%); /* W3C */
background: -moz-linear-gradient(left, rgba(32,32,32,0) 0%, rgba(32,32,32,1) 50%, rgba(32,32,32,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(32,32,32,0)), color-stop(50%,rgba(32,32,32,1)), color-stop(100%,rgba(32,32,32,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(32,32,32,0) 0%,rgba(32,32,32,1) 50%,rgba(32,32,32,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(32,32,32,0) 0%,rgba(32,32,32,1) 50%,rgba(32,32,32,1) 100%); /* Opera11.10+ */
background: -ms-linear-gradient(left, rgba(32,32,32,0) 0%,rgba(32,32,32,1) 50%,rgba(32,32,32,1) 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00202020', endColorstr='#202020',GradientType=1 ); /* IE6-9 */
background: linear-gradient(left, rgba(32,32,32,0) 0%,rgba(32,32,32,1) 50%,rgba(32,32,32,1) 100%); /* W3C */
}
.playlist-tracks li:nth-child(even) .item .fade {
background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(249,249,249,0.6) 42%, rgba(248,248,248,1) 50%, rgba(240,240,240,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(42%,rgba(249,249,249,0.6)), color-stop(50%,rgba(248,248,248,1)), color-stop(100%,rgba(240,240,240,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(249,249,249,0.6) 42%,rgba(248,248,248,1) 50%,rgba(240,240,240,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(249,249,249,0.6) 42%,rgba(248,248,248,1) 50%,rgba(240,240,240,1) 100%); /* Opera11.10+ */
background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(249,249,249,0.6) 42%,rgba(248,248,248,1) 50%,rgba(240,240,240,1) 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#f0f0f0',GradientType=1 ); /* IE6-9 */
background: linear-gradient(left, rgba(255,255,255,0) 0%,rgba(249,249,249,0.6) 42%,rgba(248,248,248,1) 50%,rgba(240,240,240,1) 100%); /* W3C */
}
.playlist-tracks li.now .item .fade {
background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(242,246,249,0.6) 42%, rgba(240,244,248,1) 50%, rgba(224,234,240,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(42%,rgba(242,246,249,0.6)), color-stop(50%,rgba(240,244,248,1)), color-stop(100%,rgba(224,234,240,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(242,246,249,0.6) 42%,rgba(240,244,248,1) 50%,rgba(224,234,240,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(242,246,249,0.6) 42%,rgba(240,244,248,1) 50%,rgba(224,234,240,1) 100%); /* Opera11.10+ */
background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(242,246,249,0.6) 42%,rgba(240,244,248,1) 50%,rgba(224,234,240,1) 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#e0eaf0',GradientType=1 ); /* IE6-9 */
background: linear-gradient(left, rgba(255,255,255,0) 0%,rgba(242,246,249,0.6) 42%,rgba(240,244,248,1) 50%,rgba(224,234,240,1) 100%); /* W3C */
.playlist-tracks li:nth-child(odd) .item .fade {
background: -moz-linear-gradient(left, rgba(42,42,42,0) 0%, rgba(42,42,42,1) 50%, rgba(42,42,42,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(42,42,42,0)), color-stop(50%,rgba(42,42,42,1)), color-stop(100%,rgba(42,42,42,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(42,42,42,0) 0%,rgba(42,42,42,1) 50%,rgba(42,42,42,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(42,42,42,0) 0%,rgba(42,42,42,1) 50%,rgba(42,42,42,1) 100%); /* Opera11.10+ */
background: -ms-linear-gradient(left, rgba(42,42,42,0) 0%,rgba(42,42,42,1) 50%,rgba(42,42,42,1) 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#002a2a2a', endColorstr='#2a2a2a',GradientType=1 ); /* IE6-9 */
background: linear-gradient(left, rgba(42,42,42,0) 0%,rgba(42,42,42,1) 50%,rgba(42,42,42,1) 100%); /* W3C */
}
.playlist-tracks li .item:hover .fade {
background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(235,242,249,0.6) 42%, rgba(231,240,248,1) 50%, rgba(208,224,240,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(42%,rgba(235,242,249,0.6)), color-stop(50%,rgba(231,240,248,1)), color-stop(100%,rgba(208,224,240,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(235,242,249,0.6) 42%,rgba(231,240,248,1) 50%,rgba(208,224,240,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(235,242,249,0.6) 42%,rgba(231,240,248,1) 50%,rgba(208,224,240,1) 100%); /* Opera11.10+ */
background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(235,242,249,0.6) 42%,rgba(231,240,248,1) 50%,rgba(208,224,240,1) 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#d0e0f0',GradientType=1 ); /* IE6-9 */
background: linear-gradient(left, rgba(255,255,255,0) 0%,rgba(235,242,249,0.6) 42%,rgba(231,240,248,1) 50%,rgba(208,224,240,1) 100%); /* W3C */
background: -moz-linear-gradient(left, rgba(64,64,64,0) 0%, rgba(64,64,64,1) 50%, rgba(64,64,64,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(64,64,64,0)), color-stop(50%,rgba(64,64,64,1)), color-stop(100%,rgba(64,64,64,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(64,64,64,0) 0%,rgba(64,64,64,1) 50%,rgba(64,64,64,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(64,64,64,0) 0%,rgba(64,64,64,1) 50%,rgba(64,64,64,1) 100%); /* Opera11.10+ */
background: -ms-linear-gradient(left, rgba(64,64,64,0) 0%,rgba(64,64,64,1) 50%,rgba(64,64,64,1) 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00404040', endColorstr='#404040',GradientType=1 ); /* IE6-9 */
background: linear-gradient(left, rgba(64,64,64,0) 0%,rgba(64,64,64,1) 50%,rgba(64,64,64,1) 100%); /* W3C */
}
public/stylesheets/search.css
+32 -11
View File
@@ -1,7 +1,6 @@
#search-container {
width: 100%;
text-align: center;
margin-top: 50px;
width: 425px;
padding: 0 5px;
}
#search-container #search_field {
width: 300px;
@@ -22,10 +21,30 @@
-moz-border-radius: 3px;
border-radius: 3px;
}
#search-container img {
margin-top: 30px;
display: none;
.spinner {
display: none;
margin: 20px 0 0 175px;
}
.artist_loading {
display: none;
margin: 15px 0;
font-size: 18;
}
.artist_pics {
display: none;
}
.artist_pics .pic {
float: left;
width: 47px;
height: 47px;
overflow: hidden;
margin: 0 5px 5px 0;
}
.artist_pics .pic img {
width: 47px;
}
.autocomplete {
margin: 4px 0 0 -1px;
@@ -33,22 +52,24 @@
.autocomplete div {
font-size: 24px;
padding: 6px 5px;
background-color: #FAFAFA;
border-top: #BBB 1px solid;
margin-bottom: 1px;
}
.autocomplete div:first-child {
border: none;
}
.autocomplete div.selected {
background-color: #EAEAEA;
background-color: #DDD;
}
.suggestions {
display: none;
margin: 30px 0 0 250px;
width: 500px;
width: 415px;
text-align: left;
font-size: 24px;
}
.suggestions div {
margin-bottom: 20px;
margin: 15px 0;
}
.suggestions ul li {
display: block;