Skip to content
Browse files

New sexy look

Based on work done by @bleikamp on #33.
  • Loading branch information...
1 parent cb3f1f6 commit a37833eb515b81af1eea580f94b8544a829ef637 @holman holman committed Dec 1, 2011
Showing with 53 additions and 67 deletions.
  1. +17 −19 lib/play/templates/song.mustache
  2. +36 −48 public/css/base.css
View
36 lib/play/templates/song.mustache
@@ -1,4 +1,8 @@
<div class="song">
+ <div class="star">
+ <a href="/star/{{id}}" title="star song">☆</a>
+ </div>
+
<div class="artist">
<a href="/artist/{{artist_name}}">{{artist_name}}</a>
</div>
@@ -8,31 +12,25 @@
</div>
<div class="controls">
+ {{#queued?}}
+ <span><a href="/remove/{{id}}" title="remove from queue" class="remove">Don't Play</a></span>
+ {{/queued?}}
+ {{^queued?}}
+ <span><a href="/add/{{id}}" title="add to queue" class="add">Play</a></span>
+ {{/queued?}}
+
+ <a href="/song/{{id}}/download">Download</a>
+ </div>
+
+ <div class="stats">
+ {{to_playcount}}.
+
{{#current_votes}}
{{#user}}
<a href="/{{login}}">
<img src="//www.gravatar.com/avatar.php?gravatar_id={{gravatar_id}}&size=50" class="gravatar" height="25" width="25" />
</a>
{{/user}}
{{/current_votes}}
-
- <span class="wrap">
- <a href="/song/{{id}}/download">Download</a>
-
- <a href="/artist/{{artist_name}}/album/{{album_name}}">Show Album</a>
-
- <span><a href="/star/{{id}}" title="star song" class="star">Star</a></span>
-
- {{#queued?}}
- <span><a href="/remove/{{id}}" title="remove from queue" class="remove">Don't Play</a></span>
- {{/queued?}}
- {{^queued?}}
- <span><a href="/add/{{id}}" title="add to queue" class="add">Play</a></span>
- {{/queued?}}
- </span>
-
- &nbsp;
-
- <div class="stats">{{to_playcount}}.</div>
</div>
</div>
View
84 public/css/base.css
@@ -9,7 +9,8 @@
*/
html{
- font-family: Helvetica, sans-serif;
+ font-family: "Helvetica Neue", Helvetica, sans-serif;
+ -webkit-font-smoothing: subpixel-antialiased;
}
body{
background-color: #fff;
@@ -76,83 +77,70 @@ a:hover{
width: 600px;
margin: 0 auto;
padding: 10px 0;
- background-color: #E9E9E9;
- background-image: -webkit-gradient(
- linear,
- left bottom,
- left top,
- color-stop(0, rgb(233,233,233)),
- color-stop(0.5, #fff)
- );
- font-weight: bold;
- border-bottom: 1px solid #ccc;
+ background-color: #fff;
+ border-bottom: 1px solid #eee;
+}
+.song .star{
+ float: left;
+ margin-left: 15px;
+}
+.song .star a{
+ color: #ccc;
}
.song .artist{
- padding-left: 10px;
- font-size: 24px;
- letter-spacing: -1px;
+ padding-top: 3px;
+ padding-left: 40px;
+ font-size: 14px;
+ font-weight: 500;
}
.song .artist a{
- color: #BCBCBC;
+ color: #bcbcbc;
}
.song .title{
margin-bottom: 5px;
- padding-left: 10px;
- font-size: 36px;
- letter-spacing: -2px;
+ margin-top: 5px;
+ padding-left: 40px;
+ font-size: 28px;
+ font-weight: 500;
+ letter-spacing: -px;
}
.song .title a{
color: #424242;
}
.song .album{
- float: left;
- font-size: 16px;
- letter-spacing: -2px;
+ padding-left: 40px;
+ font-weight: bold;
+ font-size: 14px;
}
.song .album a{
- color: #3299BB;
+ color: #bcbcbc;
}
.song .controls{
+ margin: 15px 0 0 40px;
height: 25px;
- text-align: right;
font-size: 11px;
}
-.song .controls .wrap a{
+.song .controls a{
+ font-weight: bold;
color: #fff;
- text-shadow: 0 1px 1px #424242;
- background-color: #3299BB;
- background-image: -webkit-gradient(
- linear,
- left bottom,
- left top,
- color-stop(0.37, rgb(50,153,187)),
- color-stop(0.69, rgb(113,200,227))
- );
- border-radius: 5px;
+ text-shadow: 0 -1px -1px rgb(50,153,187);
+ border: 1px solid #3299BB;
+ background-color: rgb(75,169,199);
+ box-shadow: inset 0px 1px 0px 0px rgb(128,193,216);
+ border-radius: 4px;
padding: 5px 10px;
margin-right: 5px;
}
-.song .controls .wrap a:hover{
+.song .controls a:hover{
color: #fff;
background-image: none;
background-color: #3299BB;
}
-.song .controls img{
- vertical-align: middle;
- margin-right: 5px;
- margin-bottom: 3px;
- border-radius: 3px;
- opacity: .75;
-}
-.song .controls a img{
- background-color: #000;
-}
.song .stats{
- float: left;
- margin-left: 2px;
+ display: none;
+ background-color: #111;
padding: 5px 10px;
font-size: 13px;
- font-weight: 300;
color: #BCBCBC;
}

0 comments on commit a37833e

Please sign in to comment.
Something went wrong with that request. Please try again.