diff --git a/Gemfile b/Gemfile index 4519cf3..edd8a46 100644 --- a/Gemfile +++ b/Gemfile @@ -1,12 +1,20 @@ source 'http://rubygems.org' -gem 'rails', '3.0.8' +gem 'rails', '3.0.9' + +gem 'json' +gem 'sass' +gem 'coffee-script' -gem 'sqlite3' -gem 'pg' gem 'awesome_print', :require => 'ap' - gem 'delayed_job' - gem 'lastfm', :git => 'git://github.com/magnolia-fan/ruby-lastfm.git' gem 'musicbrainz-ruby', :git => 'git://github.com/magnolia-fan/musicbrainz-ruby.git' + +group :development do + gem 'sqlite3' +end + +group :production do + gem 'pg' +end \ No newline at end of file diff --git a/Gemfile.lock b/Gemfile.lock index 8ade364..2941804 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -8,7 +8,7 @@ GIT GIT remote: git://github.com/magnolia-fan/ruby-lastfm.git - revision: 1c82d5616c99689162afa8df854d16ebaa604e23 + revision: 024064d52c9fb3996664436a339a4b2ec7541d9d specs: lastfm (0.2.0) activesupport @@ -19,12 +19,12 @@ GEM remote: http://rubygems.org/ specs: abstract (1.0.0) - actionmailer (3.0.8) - actionpack (= 3.0.8) + actionmailer (3.0.9) + actionpack (= 3.0.9) mail (~> 2.2.19) - actionpack (3.0.8) - activemodel (= 3.0.8) - activesupport (= 3.0.8) + actionpack (3.0.9) + activemodel (= 3.0.9) + activesupport (= 3.0.9) builder (~> 2.1.2) erubis (~> 2.6.6) i18n (~> 0.5.0) @@ -32,22 +32,26 @@ GEM rack-mount (~> 0.6.14) rack-test (~> 0.5.7) tzinfo (~> 0.3.23) - activemodel (3.0.8) - activesupport (= 3.0.8) + activemodel (3.0.9) + activesupport (= 3.0.9) builder (~> 2.1.2) i18n (~> 0.5.0) - activerecord (3.0.8) - activemodel (= 3.0.8) - activesupport (= 3.0.8) + activerecord (3.0.9) + activemodel (= 3.0.9) + activesupport (= 3.0.9) arel (~> 2.0.10) tzinfo (~> 0.3.23) - activeresource (3.0.8) - activemodel (= 3.0.8) - activesupport (= 3.0.8) - activesupport (3.0.8) + activeresource (3.0.9) + activemodel (= 3.0.9) + activesupport (= 3.0.9) + activesupport (3.0.9) arel (2.0.10) awesome_print (0.4.0) builder (2.1.2) + coffee-script (2.2.0) + coffee-script-source + execjs + coffee-script-source (1.1.1) crack (0.1.8) daemons (1.1.4) delayed_job (2.1.4) @@ -55,16 +59,20 @@ GEM daemons erubis (2.6.6) abstract (>= 1.0.0) + execjs (1.2.0) + multi_json (~> 1.0) hashie (1.0.0) httparty (0.7.8) crack (= 0.1.8) i18n (0.5.0) + json (1.5.3) mail (2.2.19) activesupport (>= 2.3.6) i18n (>= 0.4.0) mime-types (~> 1.16) treetop (~> 1.4.8) mime-types (1.16) + multi_json (1.0.3) pg (0.11.0) polyglot (0.3.1) rack (1.2.3) @@ -72,20 +80,23 @@ GEM rack (>= 1.0.0) rack-test (0.5.7) rack (>= 1.0) - rails (3.0.8) - actionmailer (= 3.0.8) - actionpack (= 3.0.8) - activerecord (= 3.0.8) - activeresource (= 3.0.8) - activesupport (= 3.0.8) + rails (3.0.9) + actionmailer (= 3.0.9) + actionpack (= 3.0.9) + activerecord (= 3.0.9) + activeresource (= 3.0.9) + activesupport (= 3.0.9) bundler (~> 1.0) - railties (= 3.0.8) - railties (3.0.8) - actionpack (= 3.0.8) - activesupport (= 3.0.8) + railties (= 3.0.9) + railties (3.0.9) + actionpack (= 3.0.9) + activesupport (= 3.0.9) rake (>= 0.8.7) + rdoc (~> 3.4) thor (~> 0.14.4) rake (0.9.2) + rdoc (3.6.1) + sass (3.1.3) sqlite3 (1.3.3) thor (0.14.6) treetop (1.4.9) @@ -98,9 +109,12 @@ PLATFORMS DEPENDENCIES awesome_print + coffee-script delayed_job + json lastfm! musicbrainz-ruby! pg - rails (= 3.0.8) + rails (= 3.0.9) + sass sqlite3 diff --git a/app/controllers/import_controller.rb b/app/controllers/import_controller.rb index 72e6b5d..db1d8e2 100644 --- a/app/controllers/import_controller.rb +++ b/app/controllers/import_controller.rb @@ -17,7 +17,7 @@ class ImportController < ApplicationController brainz = MusicBrainz::Client.new(@@brainz_login, @@brainz_password, @@user_agent) lastfm = Lastfm.new(@@lastfm_api_key, @@lastfm_secret) - artist = Artist.find_by_name(name) + artist = Artist.find_or_create_by_name(name) begin @@ -38,16 +38,20 @@ class ImportController < ApplicationController artist.mbid = artist_mb_data[:mbid] # Get albums from MB - release_groups_mb = brainz.release_group(nil, :artist => artist_mb_data[:mbid]) + release_groups_mb = brainz.release_group(nil, :artist => artist_mb_data[:mbid], :limit => 500) unless release_groups_mb['release_group_list']['release_group'].nil? + if release_groups_mb['release_group_list']['release_group'].is_a? Hash + release_groups_mb['release_group_list']['release_group'] = [release_groups_mb['release_group_list']['release_group']] + end + release_groups_mb['release_group_list']['release_group'].each do |mb_album| album_name = mb_album['title'] + (mb_album['disambiguation'].nil? ? '' : ' ('+ mb_album['disambiguation'] +')') # Checking if there is already an album with the same name - albums_db = Album.where(:artist_id => artist.id, :name => album_name) + albums_db = Album.where(:artist_id => artist.id, :name => album_name, :album_type => mb_album['type']) # Get album releases from MB releases_mb = brainz.release(nil, {'release-group' => mb_album['id']}) @@ -180,7 +184,7 @@ class ImportController < ApplicationController end # releases_mb.empty? end # unless mb_main_tracks.empty? - + end # unless releases_mb.nil? end # release_groups_mb.each do |mb_album| diff --git a/lib/tasks/db_import.rake b/lib/tasks/db_import.rake index caa1958..fc4bb98 100644 --- a/lib/tasks/db_import.rake +++ b/lib/tasks/db_import.rake @@ -4,7 +4,7 @@ namespace :db do desc 'Imports test data from MusicBrainz database' task :import => :environment do - ati = ['Weezer'] + ati = ['Ashes Divide'] ati.each do |name| ImportController.importArtist(name) #ap res = ArtistController.musicBrainzExactSearch(name) diff --git a/public/css/_sass/_alpha_gradient.scss b/public/css/_sass/_alpha_gradient.scss new file mode 100644 index 0000000..c0de325 --- /dev/null +++ b/public/css/_sass/_alpha_gradient.scss @@ -0,0 +1,9 @@ +@mixin alpha_gradient($r, $g, $b, $hex) { + background: -moz-linear-gradient(left, rgba($r, $g, $b, 0) 0%, rgba($r, $g, $b, 1) 50%, rgba($r, $g, $b, 1) 100%); + background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba($r, $g, $b, 0)), color-stop(50%, rgba($r, $g, $b, 1)), color-stop(100%, rgba($r, $g, $b, 1))); + background: -webkit-linear-gradient(left, rgba($r, $g, $b, 0) 0%, rgba($r, $g, $b, 1) 50%, rgba($r, $g, $b, 1) 100%); + background: -o-linear-gradient(left, rgba($r, $g, $b, 0) 0%, rgba($r, $g, $b, 1) 50%, rgba($r, $g, $b, 1) 100%); + background: -ms-linear-gradient(left, rgba($r, $g, $b, 0) 0%, rgba($r, $g, $b, 1) 50%, rgba($r, $g, $b, 1) 100%); + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00#{$hex}', endColorstr='##{$hex}', GradientType=1); + background: linear-gradient(left, rgba($r, $g, $b, 0) 0%, rgba($r, $g, $b, 1) 50%, rgba($r, $g, $b, 1) 100%); +} \ No newline at end of file diff --git a/public/css/_sass/_opacity.scss b/public/css/_sass/_opacity.scss new file mode 100644 index 0000000..ea09332 --- /dev/null +++ b/public/css/_sass/_opacity.scss @@ -0,0 +1,6 @@ +@mixin opacity($val) { + -moz-opacity: $val; + -ms-filter:”alpha(opacity=$val*100)”; + filter:alpha(opacity=$val*100); + opacity: $val; +} \ No newline at end of file diff --git a/public/css/_sass/_rounded.scss b/public/css/_sass/_rounded.scss new file mode 100644 index 0000000..e55d977 --- /dev/null +++ b/public/css/_sass/_rounded.scss @@ -0,0 +1,5 @@ +@mixin rounded($radius: 5) { + border-radius: #{$radius}px; + -moz-border-radius: #{$radius}px; + -webkit-border-radius: #{$radius}px; +} \ No newline at end of file diff --git a/public/css/_sass/albums.scss b/public/css/_sass/albums.scss new file mode 100644 index 0000000..0378ddc --- /dev/null +++ b/public/css/_sass/albums.scss @@ -0,0 +1,141 @@ +@import "alpha_gradient"; + +.artist-info { + width: 100%; + float: left; + margin: 0 0 25px 0; + clear: both; + + .pic { + float: left; + width: 250px; + margin: 25px 0; + + img { + margin-left: 25px; + } + } + + .name { + margin: 25px 0 0 300px; + } + + .info { + margin: 0 17px 25px 300px; + } +} + +.albums { + width: 100%; + float: left; + clear: both; + + .album { + clear: both; + + .pic { + float: left; + width: 250px; + + > * { + margin-left: 25px; + } + + img { + width: 248px; + height: 248px; + border: #DDD 1px solid; + } + + .add-album-button-container { + position: relative; + margin: 10px -25px 0 0; + text-align: center; + } + } + + .name { + display: block; + margin: 0 0 10px 300px; + } + + .tracklist { + margin: 0 17px 30px 275px; + + ul { + li { + display: block; + height: 26px; + position: relative; + padding-left: 25px; + + &:hover { + background-color: #FAFAFA; + + .track-container { + .fade { + @include alpha_gradient(250, 250, 250, "fafafa"); + } + } + } + + &:first-child { + border-top: none; + } + + .add-track { + display: none; + float: left; + padding: 1px 5px; + margin: 3px 0 0 -22px; + } + + .track-container { + height: 20px; + padding: 5px 0 0 0; + border-top: #EEE 1px solid; + + > * { + position: absolute; + } + + .fade { + right: 0px; + top: 6px; + width: 80px; + height: 16px; + z-index: 20; + @include alpha_gradient(255, 255, 255, "ffffff"); + } + + .index { + left: 22px; + top: 9px; + display: block; + width: 15px; + text-align: right; + font-size: 10px; + color: #555; + } + + .trackname { + left: 40px; + top: 6px; + width: 90%; + height: 16px; + overflow: hidden; + z-index: 10; + } + + .length { + right: 0px; + top: 6px; + height: 16px; + z-index: 30; + } + } + } + } + } + } +} \ No newline at end of file diff --git a/public/css/layout.css b/public/css/_sass/common.scss similarity index 78% rename from public/css/layout.css rename to public/css/_sass/common.scss index bd183c8..9b4d95a 100644 --- a/public/css/layout.css +++ b/public/css/_sass/common.scss @@ -9,7 +9,7 @@ html, body { } body { - font-family: Helvetica, Arial, sans-serif; + font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 14px; -moz-user-select: none; -khtml-user-select: none; @@ -20,27 +20,27 @@ body { width: 100%; } -#header-container { +.header-container { margin-right: 350px; } -#player-container { +.player-container { width: 350px; height: 600px; float: right; background-color: #222; } -#data-container { +.data-container { width: auto; margin-right: 350px; overflow-y: auto; min-width: 650px; } -#player { +.player { width: 100%; height: 120px; } -#playlist { +.playlist { width: 100%; overflow-y: auto; } \ No newline at end of file diff --git a/public/css/_sass/header.scss b/public/css/_sass/header.scss new file mode 100644 index 0000000..df602c8 --- /dev/null +++ b/public/css/_sass/header.scss @@ -0,0 +1,60 @@ +.header-container { + .hello { + float: right; + margin: 6px 10px 0 0; + color: #222; + + .greating { + display: block; + float: left; + margin-right: 8px; + } + + .settings { + float: right; + width: 15px; + height: 15px; + margin: 1px 0; + background-image: url(/images/icns/settings.png); + cursor: pointer; + } + } + + .navigation { + background-color: #EEE; + background-image: url(/images/concrete_wall_2.png); + height: 30px; + + li { + display: block; + float: left; + width: auto; + height: 30px; + margin-left: 10px; + color: #222; + line-height: 30px; + text-shadow: #666 0px 0px 0.5px; + + &:hover { + cursor: pointer; + text-shadow: #666 0px 0px 2px; + } + + &.logo { + font-size: 20px; + line-height: 32px; + font-weight: bold; + margin-right: 12px; + } + + .vk_auth { + display: none; + } + + a { + color: inherit; + text-decoration: inherit; + } + } + } +} \ No newline at end of file diff --git a/public/css/_sass/misc.scss b/public/css/_sass/misc.scss new file mode 100644 index 0000000..f7ce722 --- /dev/null +++ b/public/css/_sass/misc.scss @@ -0,0 +1,114 @@ +@import "rounded"; + +.fullscreen { + width: 100%; + height: 100%; + text-align: center; +} + +.button { + display: inline; + width: auto; + padding: 5px 10px; + border: 1px solid; + cursor: pointer; + @include rounded(3); + + &.gray { + background-color: #EEE; + color: #444; + border-color: #DDD; + } +} + +/* Scrollbars */ +.css-scrollbar { + .scrollbar-pane { + margin-right: 8px; + } + + .scrollbar-handle-container { + width: 8px; + } + + .scrollbar-handle { + width: 8px; + } + + &.data-container { + .scrollbar-handle-container { + background-color: #FFF; + } + .scrollbar-handle { + background-color: #CCC; + + &:hover { + background-color: #999; + } + + &.move { + background-color: #AAA; + } + } + } + + &.player-container { + .scrollbar-handle-container { + background-color: #222; + } + .scrollbar-handle { + background-color: #444; + + &:hover { + background-color: #666; + } + + &.move { + background-color: #888; + } + } + } +} + + +.error_page { + position: relative; + width: 600px; + text-align: center; + top: 100px; + left: 50%; + margin-left: -300px; + + h1 { + font-size: 150px; + } + + span { + font-size: 24px; + } +} + +.kaboom { + width: 100%; + height: 30px; + clear: both; +} + +.auth_notice { + display: none; + position: absolute; + background-color: #07F; + color: #FFF; + top: 32px; + left: 230px; + padding: 8px; + border: #05D 1px solid; + @include rounded(3); + + .arrow { + float: left; + margin: -8px 15px 0 8px; + font-size: 25px; + font-weight: bold; + } +} \ No newline at end of file diff --git a/public/css/_sass/player.scss b/public/css/_sass/player.scss new file mode 100644 index 0000000..68d416a --- /dev/null +++ b/public/css/_sass/player.scss @@ -0,0 +1,213 @@ +@import "alpha_gradient"; +@import "rounded"; +@import "opacity"; +$icons_dir: "/images/icns/"; + +.player-container { + .player { + .now-playing { + position: relative; + height: 30px; + color: #FFF; + text-align: center; + line-height: 30px; + overflow: hidden; + + .fade { + position: absolute; + top: 0px; + right: 0px; + width: 80px; + height: 30px; + z-index: 10; + @include alpha_gradient(32, 32, 32, '202020'); + } + } + + .progress { + width: 330px; + height: 5px; + background-color: #333; + margin: 0 10px; + cursor: pointer; + + .loaded { + width: 0; + height: 5px; + background-color: #405050; + } + + .played { + width: 0; + height: 5px; + background-color: #09A; + } + } + + .controls { + width: 290px; + margin: 20px 95px; + + > * { + width: 40px; + height: 40px; + float: left; + margin-right: 20px; + cursor: pointer; + } + + .prev { + background-image: url('#{$icons_dir}prev.png'); + } + + .play { + background-image: url('#{$icons_dir}play.png'); + } + + .pause { + background-image: url('#{$icons_dir}pause.png'); + display: none; + } + + .next { + background-image: url('#{$icons_dir}next.png'); + } + } + } + + .playlist { + .playlist-tracks { + width: 343px; + + li { + display: block; + height: 26px; + + .item { + position: relative; + overflow: hidden; + height: 26px; + color: #FFF; + + &:hover { + background-color: #444; + cursor: default; + + .fade { + @include alpha_gradient(64, 64, 64, '404040'); + } + } + + .title { + position: absolute; + top: 0; + left: 5px; + z-index: 10; + width: 330px; + height: 26px; + line-height: 26px; + display: block; + float: left; + overflow: hidden; + } + + .duration { + display: block; + position: absolute; + top: 0; + right: 5px; + z-index: 30; + height: 26px; + line-height: 26px; + } + + .remove { + display: none; + position: absolute; + top: 4px; + right: 5px; + z-index: 30; + height: 15px; + font-size: 11px; + background-color: #622; + color: #FFF; + border: #822 1px solid; + padding: 1px 2px 0 2px; + @include rounded(2); + cursor: pointer; + } + + .fade { + position: absolute; + top: 0; + right: 0; + z-index: 20; + width: 100px; + height: 26px; + @include alpha_gradient(32, 32, 32, '202020'); + } + } + + &:nth-child(odd) { + .item { + background-color: #2A2A2A; + + .fade { + @include alpha_gradient(42, 42, 42, '2a2a2a'); + } + } + } + + &.now { + .item { + color: #09A; + } + } + } + } + } + + .additional-controls { + width: 350px; + height: 27px; + background-color: #333; + border-top: #444 1px solid; + + .item { + float: left; + margin-left: 10px; + font-size: 14px; + line-height: 26px; + color: #FFF; + @include opacity(0.3); + + &:hover { + @include opacity(1); + cursor: pointer; + } + + &.active { + @include opacity(0.8); + } + } + + img { + float: left; + margin-top: 1px; + } + + .annotation { + float: left; + margin-left: 2px; + } + + &#empty-playlist { + float: right; + margin-right: 10px; + + img { + margin-top: 3px; + } + } + } +} \ No newline at end of file diff --git a/public/css/_sass/search.scss b/public/css/_sass/search.scss new file mode 100644 index 0000000..801f143 --- /dev/null +++ b/public/css/_sass/search.scss @@ -0,0 +1,103 @@ +@import "rounded"; + +.search-container { + width: 425px; + padding: 0 5px; + + #search_form { + #search_field { + width: 300px; + font-size: 24px; + padding: 4px; + border: #CCC 1px solid; + @include rounded(3); + } + + #search_button { + width: 100px; + font-size: 24px; + padding: 4px; + background-color: #DDD; + border: #CCC 1px solid; + @include rounded(3); + } + } + + .spinner { + display: none; + margin: 20px 0 0 175px; + } + + .artist_loading { + display: none; + margin: 15px 0; + font-size: 18; + } + + .artist_pics { + display: none; + + .pic { + float: left; + width: 47px; + height: 47px; + overflow: hidden; + margin: 0 5px 5px 0; + } + + img { + width: 47px; + } + } + + .suggestions { + display: none; + width: 415px; + text-align: left; + font-size: 24px; + + div { + margin: 15px 0; + } + + ul { + li { + display: block; + width: auto; + margin-bottom: 6px; + + .data { + &.artist { + color: #04F; + border-bottom: #04F 1px dotted; + cursor: pointer; + } + } + + span { + font-size: 14px; + font-style: italic; + } + } + } + } +} + +.autocomplete { + margin: 4px 0 0 -1px; + + div { + font-size: 24px; + padding: 6px 5px; + border-top: #BBB 1px solid; + margin-bottom: 1px; + + &:first-child { + border: none; + } + + &.selected { + background-color: #DDD; + } + } +} \ No newline at end of file diff --git a/public/css/_sass/settings.scss b/public/css/_sass/settings.scss new file mode 100644 index 0000000..1515bb1 --- /dev/null +++ b/public/css/_sass/settings.scss @@ -0,0 +1,104 @@ +@import "rounded"; + +.settings-container { + margin: 25px; + + .tabs { + height: 26px; + + > div { + float: left; + height: 25px; + } + + .left-space { + width: 15px; + } + + .middle-space { + width: 8px; + } + + .tab { + position: relative; + border-left: #DDD 1px solid; + border-top: #DDD 1px solid; + border-right: #DDD 1px solid; + padding: 0 8px; + line-height: 24px; + margin-top: 2px; + @include rounded(5); + background-color: #FAFAFA; + cursor: pointer; + + &.active { + z-index: 200; + background-color: #FFF; + border-left: #CCC 1px solid; + border-top: #CCC 1px solid; + border-right: #CCC 1px solid; + border-bottom: #FFF 6px solid; + margin-top: -2px; + line-height: 29px; + font-weight: bold; + cursor: default; + } + } + } + + .form-container { + position: relative; + z-index: 100; + height: 500px; + border-top: #CCC 1px solid; + + .form { + margin: 25px; + + .field { + height: 40px; + margin-bottom: 10px; + clear: both; + + .label{ + float: left; + font-size: 24px; + line-height: 32px; + width: 140px; + padding: 3px 6px; + @include rounded(3); + background-color: #EAEAEA; + margin-right: -10px; + } + + .value { + float: left; + + input[type="text"]{ + font-size: 24px; + padding: 4px; + border: #CCC 1px solid; + @include rounded(3); + width: 300px; + } + } + + .action-button { + input[type="button"]{ + width: 120px; + font-size: 24px; + padding: 4px; + background-color: #DDD; + border: #CCC 1px solid; + @include rounded(3); + margin-left: 5px; + } + } + } + } + } + + .forms { + display: none; + } +} \ No newline at end of file diff --git a/public/css/albums.css b/public/css/albums.css index df831c2..0374183 100644 --- a/public/css/albums.css +++ b/public/css/albums.css @@ -1,138 +1,101 @@ -/* Main blocks*/ .artist-info { - width: 100%; - float: left; - margin: 0 0 25px 0; - clear: both; -} + width: 100%; + float: left; + margin: 0 0 25px 0; + clear: both; } + .artist-info .pic { + float: left; + width: 250px; + margin: 25px 0; } + .artist-info .pic img { + margin-left: 25px; } + .artist-info .name { + margin: 25px 0 0 300px; } + .artist-info .info { + margin: 0 17px 25px 300px; } + .albums { - width: 100%; - float: left; - clear: both; -} - -/* Artist info block */ -.artist-info .pic { - float: left; - width: 250px; - margin: 25px 0; -} - .artist-info .pic img { - margin-left: 25px; - } -.artist-info .name { - margin: 25px 0 0 300px; -} -.artist-info .info { - margin: 0 17px 25px 300px; -} - -/* Albums block */ -.album { - clear: both; -} - .album .pic { - float: left; - width: 250px; - } - .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; - text-align: center; - } - .album .pic .add-album { - - } - .album .name { - display: block; - margin: 0 0 10px 300px; - } - .album .tracklist { - margin: 0 17px 30px 275px; - } - .album .tracklist ul { - - } - .album .tracklist ul li { - display: block; - height: 26px; - position: relative; - padding-left: 25px; - } - .add-track { - display: none; - float: left; - padding: 1px 5px; - margin: 3px 0 0 -22px; - } - .album .tracklist ul li .track-container { - height: 20px; - padding: 5px 0 0 0; - border-top: #EEE 1px solid; - } - .album .tracklist ul li:hover { - background-color: #FAFAFA; - } - .album .tracklist ul li:first-child { - border-top: none; - } - .album .tracklist ul li .trackname { - position: absolute; - left: 40px; - top: 6px; - width: 90%; - height: 16px; - overflow: hidden; - z-index: 10; - } - .album .tracklist ul li .index { - position: absolute; - left: 22px; - top: 9px; - display: block; - width: 15px; - text-align: right; - font-size: 10px; - color: #555; - } - .album .tracklist ul li .length { - position: absolute; - right: 0px; - top: 6px; - height: 16px; - z-index: 30; - } - .album .tracklist ul li .fade { - position: absolute; - right: 0px; - top: 6px; - width: 80px; - height: 16px; - z-index: 20; - } - .album .tracklist ul li .fade { - background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, 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(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,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,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,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,1) 50%,rgba(255,255,255,1) 100%); /* W3C */ - } - .album .tracklist ul li:hover .fade { - background: -moz-linear-gradient(left, rgba(250,250,250,0) 0%, rgba(250,250,250,1) 50%, rgba(250,250,250,1) 100%); /* FF3.6+ */ - background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(250,250,250,0)), color-stop(50%,rgba(250,250,250,1)), color-stop(100%,rgba(250,250,250,1))); /* Chrome,Safari4+ */ - background: -webkit-linear-gradient(left, rgba(250,250,250,0) 0%,rgba(250,250,250,1) 50%,rgba(250,250,250,1) 100%); /* Chrome10+,Safari5.1+ */ - background: -o-linear-gradient(left, rgba(250,250,250,0) 0%,rgba(250,250,250,1) 50%,rgba(250,250,250,1) 100%); /* Opera11.10+ */ - background: -ms-linear-gradient(left, rgba(250,250,250,0) 0%,rgba(250,250,250,1) 50%,rgba(250,250,250,1) 100%); /* IE10+ */ - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00fafafa', endColorstr='#fafafa',GradientType=1 ); /* IE6-9 */ - background: linear-gradient(left, rgba(250,250,250,0) 0%,rgba(250,250,250,1) 50%,rgba(250,250,250,1) 100%); /* W3C */ - } \ No newline at end of file + width: 100%; + float: left; + clear: both; } + .albums .album { + clear: both; } + .albums .album .pic { + float: left; + width: 250px; } + .albums .album .pic > * { + margin-left: 25px; } + .albums .album .pic img { + width: 248px; + height: 248px; + border: #DDD 1px solid; } + .albums .album .pic .add-album-button-container { + position: relative; + margin: 10px -25px 0 0; + text-align: center; } + .albums .album .name { + display: block; + margin: 0 0 10px 300px; } + .albums .album .tracklist { + margin: 0 17px 30px 275px; } + .albums .album .tracklist ul li { + display: block; + height: 26px; + position: relative; + padding-left: 25px; } + .albums .album .tracklist ul li:hover { + background-color: #FAFAFA; } + .albums .album .tracklist ul li:hover .track-container .fade { + background: -moz-linear-gradient(left, rgba(250, 250, 250, 0) 0%, #fafafa 50%, #fafafa 100%); + background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(250, 250, 250, 0)), color-stop(50%, #fafafa), color-stop(100%, #fafafa)); + background: -webkit-linear-gradient(left, rgba(250, 250, 250, 0) 0%, #fafafa 50%, #fafafa 100%); + background: -o-linear-gradient(left, rgba(250, 250, 250, 0) 0%, #fafafa 50%, #fafafa 100%); + background: -ms-linear-gradient(left, rgba(250, 250, 250, 0) 0%, #fafafa 50%, #fafafa 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00fafafa', endColorstr='#fafafa', GradientType=1); + background: linear-gradient(left, rgba(250, 250, 250, 0) 0%, #fafafa 50%, #fafafa 100%); } + .albums .album .tracklist ul li:first-child { + border-top: none; } + .albums .album .tracklist ul li .add-track { + display: none; + float: left; + padding: 1px 5px; + margin: 3px 0 0 -22px; } + .albums .album .tracklist ul li .track-container { + height: 20px; + padding: 5px 0 0 0; + border-top: #EEE 1px solid; } + .albums .album .tracklist ul li .track-container > * { + position: absolute; } + .albums .album .tracklist ul li .track-container .fade { + right: 0px; + top: 6px; + width: 80px; + height: 16px; + z-index: 20; + background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, white 50%, white 100%); + background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(50%, white), color-stop(100%, white)); + background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, white 50%, white 100%); + background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, white 50%, white 100%); + background: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0%, white 50%, white 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=1); + background: linear-gradient(left, rgba(255, 255, 255, 0) 0%, white 50%, white 100%); } + .albums .album .tracklist ul li .track-container .index { + left: 22px; + top: 9px; + display: block; + width: 15px; + text-align: right; + font-size: 10px; + color: #555; } + .albums .album .tracklist ul li .track-container .trackname { + left: 40px; + top: 6px; + width: 90%; + height: 16px; + overflow: hidden; + z-index: 10; } + .albums .album .tracklist ul li .track-container .length { + right: 0px; + top: 6px; + height: 16px; + z-index: 30; } diff --git a/public/css/beathaven.css b/public/css/beathaven.css new file mode 100644 index 0000000..d9d7a62 --- /dev/null +++ b/public/css/beathaven.css @@ -0,0 +1,7 @@ +@import "common.css" all; +@import "misc.css" all; +@import "header.css" all; +@import "player.css" all; +@import "search.css" all; +@import "albums.css" all; +@import "settings.css" all; diff --git a/public/css/common.css b/public/css/common.css new file mode 100644 index 0000000..e129c50 --- /dev/null +++ b/public/css/common.css @@ -0,0 +1,41 @@ +* { + margin: 0; + padding: 0; + border: none; } + +html, body { + overflow: hidden; } + +body { + font-family: Helvetica Neue, Helvetica, Arial, sans-serif; + font-size: 14px; + -moz-user-select: none; + -khtml-user-select: none; + -webkit-user-select: none; + user-select: none; + cursor: default; + min-width: 1000px; + width: 100%; } + +.header-container { + margin-right: 350px; } + +.player-container { + width: 350px; + height: 600px; + float: right; + background-color: #222; } + +.data-container { + width: auto; + margin-right: 350px; + overflow-y: auto; + min-width: 650px; } + +.player { + width: 100%; + height: 120px; } + +.playlist { + width: 100%; + overflow-y: auto; } diff --git a/public/css/header.css b/public/css/header.css new file mode 100644 index 0000000..efb1603 --- /dev/null +++ b/public/css/header.css @@ -0,0 +1,41 @@ +.header-container .hello { + float: right; + margin: 6px 10px 0 0; + color: #222; } + .header-container .hello .greating { + display: block; + float: left; + margin-right: 8px; } + .header-container .hello .settings { + float: right; + width: 15px; + height: 15px; + margin: 1px 0; + background-image: url(/images/icns/settings.png); + cursor: pointer; } +.header-container .navigation { + background-color: #EEE; + background-image: url(/images/concrete_wall_2.png); + height: 30px; } + .header-container .navigation li { + display: block; + float: left; + width: auto; + height: 30px; + margin-left: 10px; + color: #222; + line-height: 30px; + text-shadow: #666 0px 0px 0.5px; } + .header-container .navigation li:hover { + cursor: pointer; + text-shadow: #666 0px 0px 2px; } + .header-container .navigation li.logo { + font-size: 20px; + line-height: 32px; + font-weight: bold; + margin-right: 12px; } + .header-container .navigation li .vk_auth { + display: none; } + .header-container .navigation li a { + color: inherit; + text-decoration: inherit; } diff --git a/public/css/misc.css b/public/css/misc.css index 2c99bc3..3270531 100644 --- a/public/css/misc.css +++ b/public/css/misc.css @@ -1,165 +1,77 @@ .fullscreen { - width: 100%; - height: 100%; - text-align: center; -} - -#navigation { - background-color: #EEE; - background-image: url(/images/concrete_wall_2.png); - height: 30px; -} - #navigation li { - display: block; - float: left; - width: auto; - height: 30px; - margin-left: 10px; - color: #222; - line-height: 30px; - text-shadow: #666 0px 0px 0.5px; - } - #navigation li:hover { - cursor: pointer; - text-shadow: #666 0px 0px 2px; - } - #navigation li.logo { - font-size: 20px; - line-height: 32px; - font-weight: bold; - margin-right: 12px; - } - #navigation li.vk_auth { - display: none; - } - #navigation li a { - color: inherit; - text-decoration: inherit; - } -#header-container .hello { - float: right; - margin: 6px 10px 0 0; - color: #222; -} - #header-container .hello .greating { - display: block; - float: left; - margin-right: 8px; - } - #header-container .hello .settings { - float: right; - width: 15px; - height: 15px; - margin: 1px 0; - background-image: url(/images/icns/settings.png); - cursor: pointer; - } + width: 100%; + height: 100%; + text-align: center; } .button { - display: inline; - width: auto; - padding: 5px 10px; - border-radius: 3px; - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - border: 1px solid; - cursor: pointer; -} - .button.gray { - background-color: #EEE; - color: #444; - border-color: #DDD; - } + display: inline; + width: auto; + padding: 5px 10px; + border: 1px solid; + cursor: pointer; + border-radius: 3px; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; } + .button.gray { + background-color: #EEE; + color: #444; + border-color: #DDD; } -.scrollbar-pane { - margin-right: 8px; -} +/* Scrollbars */ +.css-scrollbar .scrollbar-pane { + margin-right: 8px; } +.css-scrollbar .scrollbar-handle-container { + width: 8px; } +.css-scrollbar .scrollbar-handle { + width: 8px; } +.css-scrollbar.data-container .scrollbar-handle-container { + background-color: #FFF; } +.css-scrollbar.data-container .scrollbar-handle { + background-color: #CCC; } + .css-scrollbar.data-container .scrollbar-handle:hover { + background-color: #999; } + .css-scrollbar.data-container .scrollbar-handle.move { + background-color: #AAA; } +.css-scrollbar.player-container .scrollbar-handle-container { + background-color: #222; } +.css-scrollbar.player-container .scrollbar-handle { + background-color: #444; } + .css-scrollbar.player-container .scrollbar-handle:hover { + background-color: #666; } + .css-scrollbar.player-container .scrollbar-handle.move { + background-color: #888; } -.scrollbar-handle-container { - width: 8px; -} +.error_page { + position: relative; + width: 600px; + text-align: center; + top: 100px; + left: 50%; + margin-left: -300px; } + .error_page h1 { + font-size: 150px; } + .error_page span { + font-size: 24px; } -.scrollbar-handle { - width: 8px; -} - - #data-container .scrollbar-handle-container { - background-color: #FFF; - } - - #data-container .scrollbar-handle { - background-color: #CCC; - } - - #data-container .scrollbar-handle:hover { - background-color: #999; - } - - #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; - width: 600px; - text-align: center; - top: 100px; - left: 50%; - margin-left: -300px; -} - #error_page h1 { - font-size: 150px; - } - #error_page span { - font-size: 24px; - } - .kaboom { - width: 100%; - height: 30px; - clear: both; -} + width: 100%; + height: 30px; + clear: both; } .auth_notice { - display: none; - position: absolute; - background-color: #07F; - color: #FFF; - top: 32px; - left: 230px; - padding: 8px; - border: #05D 1px solid; - border-radius: 3px; - -webkit-border-radius: 3px; - -moz-border-radius: 3px; -} - .auth_notice .arrow { - float: left; - margin: -8px 15px 0 8px; - font-size: 25px; - font-weight: bold; - } - -/* Colorizing * -#player-container { background-color: #CFC; } -#data-container { background-color: #CCF; } -#player { background-color: #AAC; } -#playlist { background-color: #ACC; } -.artist-info { background-color: #8EA; } -.albums { background-color: #A8E; } \ No newline at end of file + display: none; + position: absolute; + background-color: #07F; + color: #FFF; + top: 32px; + left: 230px; + padding: 8px; + border: #05D 1px solid; + border-radius: 3px; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; } + .auth_notice .arrow { + float: left; + margin: -8px 15px 0 8px; + font-size: 25px; + font-weight: bold; } diff --git a/public/css/player.css b/public/css/player.css index 29f67d6..6f50812 100644 --- a/public/css/player.css +++ b/public/css/player.css @@ -1,213 +1,173 @@ -#player .now-playing { - position: relative; - height: 30px; - color: #FFF; - text-align: center; - line-height: 30px; - overflow: hidden; -} - #player .now-playing .fade { - position: absolute; - top: 0px; - right: 0px; - width: 80px; - height: 30px; - z-index: 10; - background: -moz-linear-gradient(left, rgba(34,34,34,0) 0%, rgba(34,34,34,1) 100%); /* FF3.6+ */ - background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(34,34,34,0)), color-stop(100%,rgba(34,34,34,1))); /* Chrome,Safari4+ */ - background: -webkit-linear-gradient(left, rgba(34,34,34,0) 0%,rgba(34,34,34,1) 100%); /* Chrome10+,Safari5.1+ */ - background: -o-linear-gradient(left, rgba(34,34,34,0) 0%,rgba(34,34,34,1) 100%); /* Opera11.10+ */ - background: -ms-linear-gradient(left, rgba(34,34,34,0) 0%,rgba(34,34,34,1) 100%); /* IE10+ */ - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00222222', endColorstr='#222222',GradientType=1 ); /* IE6-9 */ - background: linear-gradient(left, rgba(34,34,34,0) 0%,rgba(34,34,34,1) 100%); /* W3C */ - } -#player .progress { - width: 330px; - height: 5px; - background-color: #333; - margin: 0 10px; - cursor: pointer; -} - #player .progress .loaded { - width: 0; - height: 5px; - background-color: #405050; - } - #player .progress .played { - width: 0; - height: 5px; - background-color: #09A; - } -#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-container .additional-controls { - width: 350px; - height: 27px; - background-color: #333; - border-top: #444 1px solid; -} - #player-container .additional-controls .item { - float: left; - margin-left: 10px; - font-size: 14px; - line-height: 26px; - color: #FFF; - -moz-opacity: 0.4; - -ms-filter:”alpha(opacity=40)”; - filter:alpha(opacity=40); - opacity: 0.4; - - } - #player-container .additional-controls .item:hover { - -moz-opacity: 1; - -ms-filter:”alpha(opacity=100)”; - filter:alpha(opacity=100); - opacity: 1; - cursor: pointer; - } - #player-container .additional-controls .item.active { - -moz-opacity: 0.9; - -ms-filter:”alpha(opacity=90)”; - filter:alpha(opacity=90); - opacity: 0.9; - cursor: pointer; - } - #player-container .additional-controls .item img { - float: left; - margin-top: 1px; - } - #player-container .additional-controls .item .annotation { - float: left; - margin-left: 2px; - } - #player-container .additional-controls .item#empty-playlist { - float: right; - margin-right: 10px; - } - #player-container .additional-controls .item#empty-playlist img { - margin-top: 3px; - } - -.playlist-tracks { - width: 343px; -} -.playlist-tracks li { - display: block; - height: 26px; -} - .playlist-tracks li .item { - position: relative; - overflow: hidden; - height: 26px; - color: #FFF; - } - .playlist-tracks li .item .title { - position: absolute; - top: 0; - left: 5px; - z-index: 10; - width: 330px; - height: 26px; - line-height: 26px; - display: block; - float: left; - overflow: hidden; - } - .playlist-tracks li .item .duration { - display: block; - position: absolute; - top: 0; - right: 5px; - z-index: 30; - height: 26px; - line-height: 26px; - } - .playlist-tracks li .item .remove { - display: none; - position: absolute; - top: 4px; - right: 5px; - z-index: 30; - height: 15px; - font-size: 11px; - background-color: #622; - color: #FFF; - border: #822 1px solid; - padding: 1px 2px 0 2px; - -webkit-border-radius: 2px; - -moz-border-radius: 2px; - border-radius: 2px; - cursor: pointer; - } - .playlist-tracks li .item:hover { - background-color: #444; - cursor: default; - } - .playlist-tracks li:nth-child(odd) { - background-color: #2A2A2A; - cursor: default; - } - .playlist-tracks li.now .item { - color: #09A; - cursor: default; - } - -/* Gradients */ -.playlist-tracks li .item .fade { - position: absolute; - top: 0; - right: 0; - z-index: 20; - width: 100px; - height: 26px; - 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(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(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 */ -} \ No newline at end of file +@charset "UTF-8"; +.player-container .player .now-playing { + position: relative; + height: 30px; + color: #FFF; + text-align: center; + line-height: 30px; + overflow: hidden; } + .player-container .player .now-playing .fade { + position: absolute; + top: 0px; + right: 0px; + width: 80px; + height: 30px; + z-index: 10; + background: -moz-linear-gradient(left, rgba(32, 32, 32, 0) 0%, #202020 50%, #202020 100%); + background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(32, 32, 32, 0)), color-stop(50%, #202020), color-stop(100%, #202020)); + background: -webkit-linear-gradient(left, rgba(32, 32, 32, 0) 0%, #202020 50%, #202020 100%); + background: -o-linear-gradient(left, rgba(32, 32, 32, 0) 0%, #202020 50%, #202020 100%); + background: -ms-linear-gradient(left, rgba(32, 32, 32, 0) 0%, #202020 50%, #202020 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00202020', endColorstr='#202020', GradientType=1); + background: linear-gradient(left, rgba(32, 32, 32, 0) 0%, #202020 50%, #202020 100%); } +.player-container .player .progress { + width: 330px; + height: 5px; + background-color: #333; + margin: 0 10px; + cursor: pointer; } + .player-container .player .progress .loaded { + width: 0; + height: 5px; + background-color: #405050; } + .player-container .player .progress .played { + width: 0; + height: 5px; + background-color: #09A; } +.player-container .player .controls { + width: 290px; + margin: 20px 95px; } + .player-container .player .controls > * { + width: 40px; + height: 40px; + float: left; + margin-right: 20px; + cursor: pointer; } + .player-container .player .controls .prev { + background-image: url("/images/icns/prev.png"); } + .player-container .player .controls .play { + background-image: url("/images/icns/play.png"); } + .player-container .player .controls .pause { + background-image: url("/images/icns/pause.png"); + display: none; } + .player-container .player .controls .next { + background-image: url("/images/icns/next.png"); } +.player-container .playlist .playlist-tracks { + width: 343px; } + .player-container .playlist .playlist-tracks li { + display: block; + height: 26px; } + .player-container .playlist .playlist-tracks li .item { + position: relative; + overflow: hidden; + height: 26px; + color: #FFF; } + .player-container .playlist .playlist-tracks li .item:hover { + background-color: #444; + cursor: default; } + .player-container .playlist .playlist-tracks li .item:hover .fade { + background: -moz-linear-gradient(left, rgba(64, 64, 64, 0) 0%, #404040 50%, #404040 100%); + background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(64, 64, 64, 0)), color-stop(50%, #404040), color-stop(100%, #404040)); + background: -webkit-linear-gradient(left, rgba(64, 64, 64, 0) 0%, #404040 50%, #404040 100%); + background: -o-linear-gradient(left, rgba(64, 64, 64, 0) 0%, #404040 50%, #404040 100%); + background: -ms-linear-gradient(left, rgba(64, 64, 64, 0) 0%, #404040 50%, #404040 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00404040', endColorstr='#404040', GradientType=1); + background: linear-gradient(left, rgba(64, 64, 64, 0) 0%, #404040 50%, #404040 100%); } + .player-container .playlist .playlist-tracks li .item .title { + position: absolute; + top: 0; + left: 5px; + z-index: 10; + width: 330px; + height: 26px; + line-height: 26px; + display: block; + float: left; + overflow: hidden; } + .player-container .playlist .playlist-tracks li .item .duration { + display: block; + position: absolute; + top: 0; + right: 5px; + z-index: 30; + height: 26px; + line-height: 26px; } + .player-container .playlist .playlist-tracks li .item .remove { + display: none; + position: absolute; + top: 4px; + right: 5px; + z-index: 30; + height: 15px; + font-size: 11px; + background-color: #622; + color: #FFF; + border: #822 1px solid; + padding: 1px 2px 0 2px; + border-radius: 2px; + -moz-border-radius: 2px; + -webkit-border-radius: 2px; + cursor: pointer; } + .player-container .playlist .playlist-tracks li .item .fade { + position: absolute; + top: 0; + right: 0; + z-index: 20; + width: 100px; + height: 26px; + background: -moz-linear-gradient(left, rgba(32, 32, 32, 0) 0%, #202020 50%, #202020 100%); + background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(32, 32, 32, 0)), color-stop(50%, #202020), color-stop(100%, #202020)); + background: -webkit-linear-gradient(left, rgba(32, 32, 32, 0) 0%, #202020 50%, #202020 100%); + background: -o-linear-gradient(left, rgba(32, 32, 32, 0) 0%, #202020 50%, #202020 100%); + background: -ms-linear-gradient(left, rgba(32, 32, 32, 0) 0%, #202020 50%, #202020 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00202020', endColorstr='#202020', GradientType=1); + background: linear-gradient(left, rgba(32, 32, 32, 0) 0%, #202020 50%, #202020 100%); } + .player-container .playlist .playlist-tracks li:nth-child(odd) .item { + background-color: #2A2A2A; } + .player-container .playlist .playlist-tracks li:nth-child(odd) .item .fade { + background: -moz-linear-gradient(left, rgba(42, 42, 42, 0) 0%, #2a2a2a 50%, #2a2a2a 100%); + background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(42, 42, 42, 0)), color-stop(50%, #2a2a2a), color-stop(100%, #2a2a2a)); + background: -webkit-linear-gradient(left, rgba(42, 42, 42, 0) 0%, #2a2a2a 50%, #2a2a2a 100%); + background: -o-linear-gradient(left, rgba(42, 42, 42, 0) 0%, #2a2a2a 50%, #2a2a2a 100%); + background: -ms-linear-gradient(left, rgba(42, 42, 42, 0) 0%, #2a2a2a 50%, #2a2a2a 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#002a2a2a', endColorstr='#2a2a2a', GradientType=1); + background: linear-gradient(left, rgba(42, 42, 42, 0) 0%, #2a2a2a 50%, #2a2a2a 100%); } + .player-container .playlist .playlist-tracks li.now .item { + color: #09A; } +.player-container .additional-controls { + width: 350px; + height: 27px; + background-color: #333; + border-top: #444 1px solid; } + .player-container .additional-controls .item { + float: left; + margin-left: 10px; + font-size: 14px; + line-height: 26px; + color: #FFF; + -moz-opacity: 0.3; + -ms-filter: ”alpha(opacity=30) ”; + filter: alpha(opacity=30); + opacity: 0.3; } + .player-container .additional-controls .item:hover { + -moz-opacity: 1; + -ms-filter: ”alpha(opacity=100) ”; + filter: alpha(opacity=100); + opacity: 1; + cursor: pointer; } + .player-container .additional-controls .item.active { + -moz-opacity: 0.8; + -ms-filter: ”alpha(opacity=80) ”; + filter: alpha(opacity=80); + opacity: 0.8; } + .player-container .additional-controls img { + float: left; + margin-top: 1px; } + .player-container .additional-controls .annotation { + float: left; + margin-left: 2px; } + .player-container .additional-controls#empty-playlist { + float: right; + margin-right: 10px; } + .player-container .additional-controls#empty-playlist img { + margin-top: 3px; } diff --git a/public/css/search.css b/public/css/search.css index 9a992b3..dd0ebce 100644 --- a/public/css/search.css +++ b/public/css/search.css @@ -1,87 +1,67 @@ -#search-container { - width: 425px; - padding: 0 5px; -} - #search-container #search_field { - width: 300px; - font-size: 24px; - padding: 4px; - border: #CCC 1px solid; - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - border-radius: 3px; - } - #search-container #search_button { - width: 100px; - font-size: 24px; - padding: 4px; - background-color: #DDD; - border: #CCC 1px solid; - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - border-radius: 3px; - } - -.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; - } +.search-container { + width: 425px; + padding: 0 5px; } + .search-container #search_form #search_field { + width: 300px; + font-size: 24px; + padding: 4px; + border: #CCC 1px solid; + border-radius: 3px; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; } + .search-container #search_form #search_button { + width: 100px; + font-size: 24px; + padding: 4px; + background-color: #DDD; + border: #CCC 1px solid; + border-radius: 3px; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; } + .search-container .spinner { + display: none; + margin: 20px 0 0 175px; } + .search-container .artist_loading { + display: none; + margin: 15px 0; + font-size: 18; } + .search-container .artist_pics { + display: none; } + .search-container .artist_pics .pic { + float: left; + width: 47px; + height: 47px; + overflow: hidden; + margin: 0 5px 5px 0; } + .search-container .artist_pics img { + width: 47px; } + .search-container .suggestions { + display: none; + width: 415px; + text-align: left; + font-size: 24px; } + .search-container .suggestions div { + margin: 15px 0; } + .search-container .suggestions ul li { + display: block; + width: auto; + margin-bottom: 6px; } + .search-container .suggestions ul li .data.artist { + color: #04F; + border-bottom: #04F 1px dotted; + cursor: pointer; } + .search-container .suggestions ul li span { + font-size: 14px; + font-style: italic; } .autocomplete { - margin: 4px 0 0 -1px; -} - .autocomplete div { - font-size: 24px; - padding: 6px 5px; - border-top: #BBB 1px solid; - margin-bottom: 1px; - } - .autocomplete div:first-child { - border: none; - } - .autocomplete div.selected { - background-color: #DDD; - } - -.suggestions { - display: none; - width: 415px; - text-align: left; - font-size: 24px; -} - .suggestions div { - margin: 15px 0; - } - .suggestions ul li { - display: block; - width: auto; - margin-bottom: 6px; - } - .suggestions .data.artist { - color: #04F; - border-bottom: #04F 1px dotted; - cursor: pointer; - } - .suggestions li span { - font-size: 14px; - font-style: italic; - } \ No newline at end of file + margin: 4px 0 0 -1px; } + .autocomplete div { + font-size: 24px; + padding: 6px 5px; + border-top: #BBB 1px solid; + margin-bottom: 1px; } + .autocomplete div:first-child { + border: none; } + .autocomplete div.selected { + background-color: #DDD; } diff --git a/public/css/settings.css b/public/css/settings.css index 4f9dc0f..77e2c37 100644 --- a/public/css/settings.css +++ b/public/css/settings.css @@ -1,96 +1,79 @@ .settings-container { - margin: 25px; -} - .settings-container .tabs { - height: 26px; - } - .settings-container .tabs > div { - float: left; - height: 25px; - } - .settings-container .tabs .left-space { - width: 15px; - } - .settings-container .tabs .tab { - position: relative; - border-left: #DDD 1px solid; - border-top: #DDD 1px solid; - border-right: #DDD 1px solid; - padding: 0 8px; - line-height: 24px; - margin-top: 2px; - border-radius: 5px; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - background-color: #FAFAFA; - cursor: pointer; - } - .settings-container .tabs .tab.active { - position: relative; - z-index: 200; - background-color: #FFF; - border-left: #CCC 1px solid; - border-top: #CCC 1px solid; - border-right: #CCC 1px solid; - border-bottom: #FFF 6px solid; - margin-top: -2px; - line-height: 29px; - font-weight: bold; - cursor: default; - } - .settings-container .tabs .middle-space { - width: 8px; - } - .settings-container .form-container { - position: relative; - z-index: 100; - height: 500px; - border-top: #CCC 1px solid; - - } - .settings-container .form-container .form { - margin: 25px; - } - .settings-container .form-container .form .field { - height: 40px; - margin-bottom: 10px; - clear: both; - } - .settings-container .form-container .form .field .label{ - float: left; - font-size: 24px; - line-height: 32px; - width: 140px; - padding: 3px 6px; - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - border-radius: 3px; - background-color: #EAEAEA; - margin-right: -10px; - } - .settings-container .form-container .form .field .value { - float: left; - } - .settings-container .form-container .form .field input[type="text"]{ - font-size: 24px; - padding: 4px; - border: #CCC 1px solid; - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - border-radius: 3px; - width: 300px; - } - .settings-container .form-container .form .field input[type="button"]{ - width: 120px; - font-size: 24px; - padding: 4px; - background-color: #DDD; - border: #CCC 1px solid; - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - border-radius: 3px; - margin-left: 5px; - } - .settings-container .forms { - display: none; - } \ No newline at end of file + margin: 25px; } + .settings-container .tabs { + height: 26px; } + .settings-container .tabs > div { + float: left; + height: 25px; } + .settings-container .tabs .left-space { + width: 15px; } + .settings-container .tabs .middle-space { + width: 8px; } + .settings-container .tabs .tab { + position: relative; + border-left: #DDD 1px solid; + border-top: #DDD 1px solid; + border-right: #DDD 1px solid; + padding: 0 8px; + line-height: 24px; + margin-top: 2px; + border-radius: 5px; + -moz-border-radius: 5px; + -webkit-border-radius: 5px; + background-color: #FAFAFA; + cursor: pointer; } + .settings-container .tabs .tab.active { + z-index: 200; + background-color: #FFF; + border-left: #CCC 1px solid; + border-top: #CCC 1px solid; + border-right: #CCC 1px solid; + border-bottom: #FFF 6px solid; + margin-top: -2px; + line-height: 29px; + font-weight: bold; + cursor: default; } + .settings-container .form-container { + position: relative; + z-index: 100; + height: 500px; + border-top: #CCC 1px solid; } + .settings-container .form-container .form { + margin: 25px; } + .settings-container .form-container .form .field { + height: 40px; + margin-bottom: 10px; + clear: both; } + .settings-container .form-container .form .field .label { + float: left; + font-size: 24px; + line-height: 32px; + width: 140px; + padding: 3px 6px; + border-radius: 3px; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + background-color: #EAEAEA; + margin-right: -10px; } + .settings-container .form-container .form .field .value { + float: left; } + .settings-container .form-container .form .field .value input[type="text"] { + font-size: 24px; + padding: 4px; + border: #CCC 1px solid; + border-radius: 3px; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + width: 300px; } + .settings-container .form-container .form .field .action-button input[type="button"] { + width: 120px; + font-size: 24px; + padding: 4px; + background-color: #DDD; + border: #CCC 1px solid; + border-radius: 3px; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + margin-left: 5px; } + .settings-container .forms { + display: none; } diff --git a/public/index.html b/public/index.html index b86eefb..7f0606b 100644 --- a/public/index.html +++ b/public/index.html @@ -4,12 +4,7 @@ BetaHaven - - - - - - + @@ -28,8 +23,8 @@ -
-
+
+
Add some music to playlist
@@ -44,7 +39,7 @@
-
+
    @@ -59,12 +54,12 @@
    -
    +
    -
    -
    +
    diff --git a/public/js/beathaven/ajax.js b/public/js/beathaven/ajax.js index 7426b06..43f7267 100644 --- a/public/js/beathaven/ajax.js +++ b/public/js/beathaven/ajax.js @@ -46,7 +46,7 @@ var Ajax = { load404Page: function() { $.get('/404.html', function(data){ - $('#data-container .inner').html(data); + $('.data-container .inner').html(data); beathaven.redrawScrollbar(); }) }, diff --git a/public/js/beathaven/layout.js b/public/js/beathaven/layout.js index 6092d9e..f9ee42c 100644 --- a/public/js/beathaven/layout.js +++ b/public/js/beathaven/layout.js @@ -20,12 +20,12 @@ var beathaven = { }, adjustSizes: function() { - $('#data-container').height($(window).height() - $('#header-container').height()); - $('#data-container').width($(window).width() - $('#player').width()).scrollbar(); - $('#player-container').height($(window).height()); - $('#playlist').height($(window).height() - $('#player').height() - $('#player-container .additional-controls').height()); + $('.data-container').height($(window).height() - $('.header-container').height()); + $('.data-container').width($(window).width() - $('.player').width()).scrollbar(); + $('.player-container').height($(window).height()); + $('.playlist').height($(window).height() - $('.player').height() - $('.player-container .additional-controls').height()); - $('#playlist').scrollbar(); + $('.playlist').scrollbar(); }, checkRedrawScrollbar: function() { @@ -33,7 +33,7 @@ var beathaven = { if (typeof document.activeElement.id !== 'undefined') { focused_id = document.activeElement.id; } - var outer_height = $('#data-container > div').outerHeight(); + var outer_height = $('.data-container > div').outerHeight(); if (outer_height > 300 && outer_height != beathaven.last_height) { beathaven.last_height = outer_height; beathaven.redrawScrollbar(); @@ -46,8 +46,8 @@ var beathaven = { }, redrawScrollbar: function() { - $('#data-container').html($('#data-container').find('.inner').first()); - $('#data-container').scrollbar(); + $('.data-container').html($('.data-container').find('.inner').first()); + $('.data-container').scrollbar(); } } diff --git a/public/js/beathaven/pages.js b/public/js/beathaven/pages.js index 986380b..b6fdd5e 100644 --- a/public/js/beathaven/pages.js +++ b/public/js/beathaven/pages.js @@ -53,21 +53,21 @@ var Pages = { } }) - $('#data-container').css('backgroundImage', 'none'); - $('#data-container .inner').html('').append(artist_info).append(albums_info); + $('.data-container').css('backgroundImage', 'none'); + $('.data-container .inner').html('').append(artist_info).append(albums_info); yaCounter7596904.hit(Ajax.getAnchor(), data.artist.name, Ajax.referer); Ajax.setTitle(data.artist.name); }, renderSearch: function(data) { - $('#data-container').css('background', 'url(/images/concrete_wall_2.png) 0 -30px repeat'); - $('#data-container .inner').html(data); + $('.data-container').css('background', 'url(/images/concrete_wall_2.png) 0 -30px repeat'); + $('.data-container .inner').html(data); - $('#search-container') - .css('marginLeft', ($('#data-container').width() - 425) / 2 + 'px') - .css('marginTop', ($('#data-container').height() / 2 - 230) +'px') - .height(($('#data-container').height() - $('#search_form').height()) / 2); + $('.search-container') + .css('marginLeft', ($('.data-container').width() - 425) / 2 + 'px') + .css('marginTop', ($('.data-container').height() / 2 - 230) +'px') + .height(($('.data-container').height() - $('#search_form').height()) / 2); setTimeout(function(){ $('#search_field').bh_autocomplete({ @@ -88,8 +88,8 @@ var Pages = { }, renderSettings: function(data) { - $('#data-container').css('background', 'none'); - $('#data-container .inner').html(data); + $('.data-container').css('background', 'none'); + $('.data-container .inner').html(data); yaCounter7596904.hit(Ajax.getAnchor(), 'Settings', Ajax.referer); Ajax.setTitle('Settings'); $('.settings-container .tabs .tab').first().trigger('click'); diff --git a/public/js/beathaven/search.js b/public/js/beathaven/search.js index 8218e66..47ac40b 100644 --- a/public/js/beathaven/search.js +++ b/public/js/beathaven/search.js @@ -3,17 +3,17 @@ var Search = { pics: [], showSpinner: function() { - $('#search-container input').attr('disabled', 'disabled').blur(); - $('#search-container img').show(); + $('.search-container input').attr('disabled', 'disabled').blur(); + $('.search-container img').show(); $('.autocomplete-container').hide(); $('.artist_loading.failed').hide(); Search.hideSuggestions(); }, hideSpinner: function() { - $('#search-container input').removeAttr('disabled'); - $('#search_field').focus(); - $('#search-container img').hide(); + $('.search-container input').removeAttr('disabled'); + $('.search_field').focus(); + $('.search-container img').hide(); }, showSuggestions: function(values) { diff --git a/public/templates/search.html b/public/templates/search.html index dd6d895..cf236c4 100644 --- a/public/templates/search.html +++ b/public/templates/search.html @@ -1,4 +1,4 @@ -
    +