Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

1. Correct the -moz-calc() mistakes.

2. Change the name of "blue" and "Orange" CSS classes to something has semantic meaning.
  • Loading branch information...
commit 4c6b6304e9041ac31c67aeb6710137b29eeed109 1 parent e97e0aa
@dominickuo dominickuo authored
Showing with 53 additions and 50 deletions.
  1. +11 −11 apps/music/index.html
  2. +42 −39 apps/music/style/music.css
View
22 apps/music/index.html
@@ -12,7 +12,7 @@
<body>
<div id="title">
<div id="title-text">Music</div>
- <button id="title-back" class="blue" disabled=true>
+ <button id="title-back" class="title-back-button" disabled=true>
<span id="title-back-text">&#8249;</span>
</button>
</div>
@@ -26,9 +26,9 @@
<div id="player-cover-title">Song Title</div>
<div id="player-cover-artist">Song Artist</div>
<div id="player-cover-buttons">
- <button id="player-album-shuffle" class="blue" disabled=true>S</button>
+ <button id="player-album-shuffle" class="player-cover-button" disabled=true>S</button>
<div id="player-album-rating">&#9733;&nbsp;&nbsp;&#9733;&nbsp;&nbsp;&#9733;&nbsp;&nbsp;&#9733;</div>
- <button id="player-album-repeat" class="blue" disabled=true>R</button>
+ <button id="player-album-repeat" class="player-cover-button" disabled=true>R</button>
</div>
</div>
<div id="player-seek">
@@ -40,19 +40,19 @@
<span class="player-seek-remaining">99:99</span>
</div>
<div id="player-controls">
- <button id="player-controls-previous" class="orange" disabled=true>Previous</button>
- <button id="player-controls-play" class="orange" disabled=true>Play</button>
- <button id="player-controls-next" class="orange" disabled=true>Next</button>
+ <button id="player-controls-previous" class="player-controls-button" disabled=true>Previous</button>
+ <button id="player-controls-play" class="player-controls-button" disabled=true>Play</button>
+ <button id="player-controls-next" class="player-controls-button" disabled=true>Next</button>
</div>
<audio id="player-audio" class="hidden" controls autoplay></audio>
</div>
</div>
<div id="tabs">
- <button id="tabs-top" class="orange" disabled=true>Top</button>
- <button id="tabs-playlists" class="orange" disabled=true>Playlists</button>
- <button id="tabs-artist" class="orange" disabled=true>Artist</button>
- <button id="tabs-albums" class="orange" disabled=true>Albums</button>
- <button id="tabs-more" class="orange" disabled=true>More</button>
+ <button id="tabs-top" class="tabs-button" disabled=true>Top</button>
+ <button id="tabs-playlists" class="tabs-button" disabled=true>Playlists</button>
+ <button id="tabs-artist" class="tabs-button" disabled=true>Artist</button>
+ <button id="tabs-albums" class="tabs-button" disabled=true>Albums</button>
+ <button id="tabs-more" class="tabs-button" disabled=true>More</button>
</div>
</body>
</html>
View
81 apps/music/style/music.css
@@ -172,22 +172,6 @@ body.player-mode #tabs {
font-weight: bold;
}
-.orange {
- background: -moz-linear-gradient(center top , #FAA51A, #F47A20) repeat scroll 0 0 transparent;
- border: 0px solid #DA7C0C;
- color: #FEF4E9;
-}
-.orange:hover {
- background: -moz-linear-gradient(center top , #F88E11, #F06015) repeat scroll 0 0 transparent;
-}
-.orange:active {
- background: -moz-linear-gradient(center top , #F47A20, #FAA51A) repeat scroll 0 0 transparent;
- color: #FCD3A5;
-}
-.orange:disabled {
- opacity: 0.3;
-}
-
#player-album-rating {
opacity: 0.3;
width: 50%;
@@ -273,27 +257,6 @@ body.player-mode #tabs {
border-bottom-right-radius: 15px;
}
-.blue {
- background: -moz-linear-gradient(center top , #00ADEE, #0078A5) repeat scroll 0 0 transparent;
- border: 1px solid #0076A3;
- color: #D9EEF7;
-}
-.blue:hover {
- background: -moz-linear-gradient(center top , #0095CC, #00678E) repeat scroll 0 0 transparent;
-}
-.blue:active {
- background: -moz-linear-gradient(center top , #0078A5, #00ADEE) repeat scroll 0 0 transparent;
- color: #80BED6;
-}
-.blue:disabled {
- opacity: 0.3;
-}
-
-.music-symbol {
- width: 100%;
- height: auto;
-}
-
#tabs {
position: absolute;
bottom: 0px;
@@ -309,8 +272,8 @@ body.player-mode #tabs {
#tabs-more {
position: relative;
float: left;
- width: -moz-calc(20%);
- height: -moz-calc(100%);
+ width: 20%;
+ height: 100%;
padding: 0px;
font-size: 1.5em;
font-weight: bolder;
@@ -333,6 +296,46 @@ body.player-mode #tabs {
border-left: #F88E11 solid 1px;
}
+.title-back-button,
+.player-cover-button {
+ background: -moz-linear-gradient(center top , #00ADEE, #0078A5) repeat scroll 0 0 transparent;
+ border: 1px solid #0076A3;
+ color: #D9EEF7;
+}
+.title-back-button:hover,
+.player-cover-button:hover {
+ background: -moz-linear-gradient(center top , #0095CC, #00678E) repeat scroll 0 0 transparent;
+}
+.title-back-button:active,
+.player-cover-button:active {
+ background: -moz-linear-gradient(center top , #0078A5, #00ADEE) repeat scroll 0 0 transparent;
+ color: #80BED6;
+}
+.title-back-button:disabled,
+.player-cover-button:disabled {
+ opacity: 0.3;
+}
+
+.tabs-button,
+.player-controls-button {
+ background: -moz-linear-gradient(center top , #FAA51A, #F47A20) repeat scroll 0 0 transparent;
+ border: 0px solid #DA7C0C;
+ color: #FEF4E9;
+}
+.tabs-button:hover,
+.player-controls-button:hover {
+ background: -moz-linear-gradient(center top , #F88E11, #F06015) repeat scroll 0 0 transparent;
+}
+.tabs-button:active,
+.player-controls-button:active {
+ background: -moz-linear-gradient(center top , #F47A20, #FAA51A) repeat scroll 0 0 transparent;
+ color: #FCD3A5;
+}
+.tabs-button:disabled,
+.player-controls-button:disabled {
+ opacity: 0.3;
+}
+
.hidden {
display: none;
}
Please sign in to comment.
Something went wrong with that request. Please try again.