Attement to help with #16, removed a lot of color and clutter from the interface

src/App.vue

@@ -21,11 +21,11 @@ export default {
 // see https://github.com/webpack/webpack/issues/215
 @import 'semantic/semantic.css';
 
+
 #app {
   font-family: 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  color: #2c3e50;
 }
 .main.pusher {
   margin-left: 350px !important;
@@ -52,4 +52,8 @@ export default {
     }
   }
 }
+
+.discrete.link {
+    color: rgba(0, 0, 0, 0.87);
+}
 </style>

src/components/Sidebar.vue

@@ -16,14 +16,12 @@
       <a class="active item" data-tab="browse">Browse</a>
       <a class="item" data-tab="queue">
         Queue &nbsp;
-        <div class="ui tiny orange label">
-           <template v-if="queue.tracks.length === 0">
-             0
-           </template>
-           <template v-else>
-             {{ queue.currentIndex + 1}}/{{ queue.tracks.length }}
-           </template>
-        </div>
+         <template v-if="queue.tracks.length === 0">
+           (empty)
+         </template>
+         <template v-else>
+           ({{ queue.currentIndex + 1}} of {{ queue.tracks.length }})
+         </template>
       </a>
     </div>
   </div>
@@ -174,7 +172,8 @@ $sidebar-color: #1B1C1D;
 }
 
 .player-wrapper {
-  border-top: 1px solid white;
+  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
+  background-color: rgb(46, 46, 46) !important;
 }
 
 .logo {

src/components/audio/PlayButton.vue

 <template>
-  <div :class="['ui', {'teal': !discrete}, {'tiny': discrete}, 'buttons']">
-    <button title="Add to current queue" @click="add" :class="['ui', {'mini': discrete}, 'icon', {'labeled': !discrete}, 'button']">
+  <div :class="['ui', {'tiny': discrete}, 'buttons']">
+    <button title="Add to current queue" @click="add" :class="['ui', {'mini': discrete}, 'button']">
       <i class="ui play icon"></i>
       <template v-if="!discrete"><slot>Play</slot></template>
     </button>

src/components/audio/Player.vue

 <template>
   <div class="player">
     <div v-if="queue.currentTrack" class="track-area ui items">
-      <div class="ui item">
+      <div class="ui inverted item">
         <div class="ui tiny image">
           <img v-if="queue.currentTrack.album.cover" :src="Track.getCover(queue.currentTrack)">
           <img v-else src="../../assets/audio/default-cover.png">
         </div>
         <div class="middle aligned content">
-          <a class="header">
-            <router-link class="track" :to="{name: 'browse.track', params: {id: queue.currentTrack.id }}">
-              {{ queue.currentTrack.title }}
-            </router-link>
-          </a>
+          <router-link class="small header discrete link track" :to="{name: 'browse.track', params: {id: queue.currentTrack.id }}">
+            {{ queue.currentTrack.title }}
+          </router-link>
           <div class="meta">
             <router-link class="artist" :to="{name: 'browse.artist', params: {id: queue.currentTrack.artist.id }}">
-              <i class="users icon"></i> {{ queue.currentTrack.artist.name }}
-            </router-link>
+              {{ queue.currentTrack.artist.name }}
+            </router-link> /
             <router-link class="album" :to="{name: 'browse.album', params: {id: queue.currentTrack.album.id }}">
-              <i class="sound icon"></i> {{ queue.currentTrack.album.title }}
+              {{ queue.currentTrack.album.title }}
             </router-link>
           </div>
+          <div class="description">
+            <track-favorite-icon :track="queue.currentTrack"></track-favorite-icon>
+          </div>
         </div>
       </div>
     </div>
@@ -28,9 +29,6 @@
         <div class="left floated four wide column">
           <p class="timer start" @click="queue.audio.setTime(0)">{{queue.audio.state.currentTimeFormat}}</p>
         </div>
-        <div class=" actions eight wide column">
-          <track-favorite-icon v-if="queue.currentTrack" :track="queue.currentTrack"></track-favorite-icon>
-        </div>
 
         <div class="right floated four wide column">
           <p class="timer total">{{queue.audio.state.durationTimerFormat}}</p>
@@ -134,6 +132,16 @@ export default {
   }
 }
 
+.ui.inverted.item > .content > .description {
+  color: rgba(255, 255, 255, 0.9) !important;
+}
+
+.ui.item {
+  .meta {
+    font-size: 90%;
+    line-height: 1.2
+  }
+}
 .timer.total {
     text-align: right;
 }
@@ -143,12 +151,6 @@ export default {
 .track-area {
   .header, .meta, .artist, .album {
     color: white !important;
-  },
-  .artist, .album {
-    display: block;
-  }
-  .artist {
-    margin-bottom: 0.3rem;
   }
 }
 

src/components/audio/Search.vue

@@ -2,7 +2,7 @@
   <div>
     <h2>Search for some music</h2>
     <div :class="['ui', {'loading': isLoading }, 'search']">
-      <div class="ui icon massive input">
+      <div class="ui icon big input">
         <i class="search icon"></i>
         <input ref="search" class="prompt" placeholder="Artist, album, track..." v-model.trim="query" type="text" />
       </div>

src/components/audio/album/Card.vue

@@ -6,7 +6,7 @@
           <img v-else src="../../../assets/audio/default-cover.png">
         </div>
         <div class="header">
-          <router-link :to="{name: 'browse.album', params: {id: album.id }}">{{ album.title }}</router-link>
+          <router-link class="discrete link" :to="{name: 'browse.album', params: {id: album.id }}">{{ album.title }}</router-link>
         </div>
         <div class="meta">
           By <router-link :to="{name: 'browse.artist', params: {id: album.artist.id }}">
@@ -18,10 +18,10 @@
             <tbody>
               <tr v-for="track in tracks">
                 <td>
-                  <play-button :track="track" :discrete="true"></play-button>
+                  <play-button class="basic icon" :track="track" :discrete="true"></play-button>
                 </td>
                 <td colspan="6">
-                  <router-link class="track" :to="{name: 'browse.track', params: {id: track.id }}">
+                  <router-link class="track discrete link" :to="{name: 'browse.track', params: {id: track.id }}">
                     {{ track.title }}
                   </router-link>
                 </td>
@@ -38,7 +38,7 @@
         </div>
       </div>
       <div class="extra content">
-        <play-button class="mini right floated" :tracks="album.tracks">Play all</play-button>
+        <play-button class="mini basic right floated" :tracks="album.tracks">Play all</play-button>
         <span>
           <i class="music icon"></i>
           {{ album.tracks.length }} tracks

src/components/audio/artist/Card.vue

@@ -2,7 +2,7 @@
   <div class="ui card">
     <div class="content">
         <div class="header">
-          <router-link :to="{name: 'browse.artist', params: {id: artist.id }}">
+          <router-link class="discrete link" :to="{name: 'browse.artist', params: {id: artist.id }}">
             {{ artist.name }}
           </router-link>
         </div>
@@ -15,13 +15,13 @@
                   <img class="ui mini image" v-else src="../../../assets/audio/default-cover.png">
                 </td>
                 <td colspan="4">
-                  <router-link :to="{name: 'browse.album', params: {id: album.id }}">
+                  <router-link class="discrete link":to="{name: 'browse.album', params: {id: album.id }}">
                     <strong>{{ album.title }}</strong>
                   </router-link><br />
                   {{ album.tracks.length }} tracks
                 </td>
                 <td>
-                  <play-button class="right floated" :discrete="true" :tracks="album.tracks"></play-button>
+                  <play-button class="right floated basic icon" :discrete="true" :tracks="album.tracks"></play-button>
                 </td>
               </tr>
             </tbody>
@@ -33,12 +33,12 @@
         </div>
     </div>
     <div class="extra content">
-        <play-button class="mini right floated" :tracks="allTracks">Play all</play-button>
         <span>
           <i class="sound icon"></i>
           {{ artist.albums.length }} albums
         </span>
-        </div>
+        <play-button class="mini basic right floated" :tracks="allTracks">Play all</play-button>
+      </div>
     </div>
 </template>
 

src/components/audio/track/Table.vue

@@ -13,7 +13,7 @@
     <tbody>
       <tr v-for="track in tracks">
         <td>
-          <play-button :discrete="true" :track="track"></play-button>
+          <play-button class="basic icon" :discrete="true" :track="track"></play-button>
         </td>
         <td>
           <img class="ui mini image" v-if="track.album.cover" :src="backend.absoluteUrl(track.album.cover)">
@@ -25,16 +25,16 @@
             </router-link>
         </td>
         <td colspan="6">
-          <router-link class="artist" :to="{name: 'browse.artist', params: {id: track.artist.id }}">
+          <router-link class="artist discrete link" :to="{name: 'browse.artist', params: {id: track.artist.id }}">
             {{ track.artist.name }}
           </router-link>
         </td>
         <td colspan="6">
-          <router-link class="album" :to="{name: 'browse.album', params: {id: track.album.id }}">
+          <router-link class="album discrete link" :to="{name: 'browse.album', params: {id: track.album.id }}">
             {{ track.album.title }}
           </router-link>
         </td>
-        <td><track-favorite-icon :track="track"></track-favorite-icon></td>
+        <td><track-favorite-icon class="favorite-icon" :track="track"></track-favorite-icon></td>
       </tr>
     </tbody>
   </table>
@@ -61,4 +61,8 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
+
+tr:not(:hover) .favorite-icon:not(.favorited) {
+  display: none;
+}
 </style>

src/components/browse/Album.vue

@@ -20,13 +20,13 @@
           </h2>
           <div class="ui hidden divider"></div>
           </button>
-          <play-button :tracks="album.tracks">Play all</play-button>
+          <play-button class="orange" :tracks="album.tracks">Play all</play-button>
 
-          <a :href="wikipediaUrl" target="_blank" class="ui labeled icon button">
+          <a :href="wikipediaUrl" target="_blank" class="ui button">
             <i class="wikipedia icon"></i>
             Search on wikipedia
           </a>
-          <a :href="musicbrainzUrl" target="_blank" class="ui labeled icon button">
+          <a :href="musicbrainzUrl" target="_blank" class="ui button">
             <i class="external icon"></i>
             View on MusicBrainz
           </a>

src/components/browse/Artist.vue

@@ -16,13 +16,13 @@
           <div class="ui hidden divider"></div>
           <radio-button type="artist" :object-id="artist.id"></radio-button>
           </button>
-          <play-button :tracks="allTracks">Play all albums</play-button>
+          <play-button class="orange" :tracks="allTracks">Play all albums</play-button>
 
-          <a :href="wikipediaUrl" target="_blank" class="ui labeled icon button">
+          <a :href="wikipediaUrl" target="_blank" class="ui button">
             <i class="wikipedia icon"></i>
             Search on wikipedia
           </a>
-          <a :href="musicbrainzUrl" target="_blank" class="ui labeled icon button">
+          <a :href="musicbrainzUrl" target="_blank" class="ui button">
             <i class="external icon"></i>
             View on MusicBrainz
           </a>

src/components/browse/Home.vue

 <template>
   <div>
-    <div class="ui vertical center aligned stripe segment">
+    <div class="ui vertical stripe segment">
       <search :autofocus="true"></search>
     </div>
     <div class="ui vertical stripe segment">

src/components/browse/Track.vue

@@ -22,17 +22,17 @@
             </div>
           </h2>
 
-          <play-button :track="track">Play</play-button>
+          <play-button class="orange" :track="track">Play</play-button>
           <track-favorite-icon :track="track" :button="true"></track-favorite-icon>
-          <a :href="wikipediaUrl" target="_blank" class="ui labeled icon button">
+          <a :href="wikipediaUrl" target="_blank" class="ui button">
             <i class="wikipedia icon"></i>
             Search on wikipedia
           </a>
-          <a :href="musicbrainzUrl" target="_blank" class="ui labeled icon button">
+          <a :href="musicbrainzUrl" target="_blank" class="ui button">
             <i class="external icon"></i>
             View on MusicBrainz
           </a>
-          <a v-if="downloadUrl" :href="downloadUrl" target="_blank" class="ui labeled icon button">
+          <a v-if="downloadUrl" :href="downloadUrl" target="_blank" class="ui button">
             <i class="download icon"></i>
             Download
           </a>

src/components/favorites/TrackFavoriteIcon.vue

 <template>
-  <button @click="favoriteTracks.set(track.id, !isFavorite)" v-if="button" :class="['ui', 'pink', 'labeled', {'inverted': isFavorite}, {'favorited': isFavorite}, 'icon', 'button']">
+  <button @click="favoriteTracks.set(track.id, !isFavorite)" v-if="button" :class="['ui', 'pink', {'inverted': isFavorite}, {'favorited': isFavorite}, 'button']">
     <i class="heart icon"></i>
     <template v-if="isFavorite">
       In favorites
@@ -8,7 +8,7 @@
       Add to favorites
     </template>
   </button>
-  <i v-else @click="favoriteTracks.set(track.id, !isFavorite)" :class="['favorite-icon', 'heart', {'pink': isFavorite}, {'favorited': isFavorite}, 'icon']" :title="title"></i>
+  <i v-else @click="favoriteTracks.set(track.id, !isFavorite)" :class="['favorite-icon', 'heart', {'pink': isFavorite}, {'favorited': isFavorite}, 'link', 'icon']" :title="title"></i>
 </template>
 
 <script>
@@ -47,7 +47,4 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-i {
-  cursor: pointer;
-}
 </style>

src/components/radios/Button.vue

 <template>
-  <button @click="toggleRadio" :class="['ui', 'blue', 'labeled', {'inverted': running}, 'icon', 'button']">
+  <button @click="toggleRadio" :class="['ui', 'blue', {'inverted': running}, 'button']">
     <i class="ui feed icon"></i>
     <template v-if="running">Stop</template>
     <template v-else>Start</template>