Changed color to blue (@KrisVos130 can you finish it off please)

app/client/head.html

@@ -53,4 +53,8 @@
         ga('create', 'UA-69432115-1', 'auto');
         ga('send', 'pageview');
     </script>
+    <style>
+        @import url(https://fonts.googleapis.com/css?family=Pacifico);
+        h3 {font-family: 'Pacifico', cursive;}
+    </style>
 </head>

app/client/stylesheets/app.css

@@ -143,17 +143,23 @@ hr{
 }
 
 .musare {
-    background-color: rgb(107, 197, 164) !important;
+    background-color: rgb(66, 165, 245) !important;
 }
 
 .musare-text {
-    color: rgb(107, 197, 164) !important;
+    color: rgb(3, 169, 244) !important;
 }
 
 .range-field > input[type="range"] {
-    border-color: #C2C0C2;
+    border-color: #42a5f5;
     border-right: 0;
     border-left: 0;
+    color: #42a5f5;
+}
+
+input[type="range"] + .thumb {
+    border-color: #42a5f5;
+    background-color: #42a5f5;
 }
 
 .table-right-td {
@@ -300,7 +306,7 @@ hr{
     text-align: center;
     padding: 5px;
     margin: 0;
-    background-color: #009C87 !important;
+    background-color: #1565c0 !important;
     color: white;
 }
 
@@ -319,7 +325,7 @@ hr{
 
 .room-slideout h5{
     text-align: center;
-    background-color: #028A77 !important;
+    background-color: #1565c0 !important;
     margin: 0;
     padding-top: 5px;
     padding-bottom: 5px;
@@ -415,4 +421,13 @@ hr{
 
 .chat-ul li {
     padding: 0 !important;
-}
+}
+
+.btn, .btn-large {
+    background-color: #1976d2;
+}
+
+.btn:hover, .btn-large:hover {
+  background-color: #1565c0;
+}
+hr { border: 0; height: 1px; background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)); }

app/client/templates/404.html

@@ -1,6 +1,6 @@
 <template name="404">
     <div class="row">
-        <div class="col l8 s8 m8 offset-l2 offset-m2 offset-s2 teal-text">
+        <div class="col l8 s8 m8 offset-l2 offset-m2 offset-s2 light-blue-text">
             <i class="material-icons center red-text" style="font-size: 20em; width: 100%;">remove_circle</i>
             <div class="divider"></div>
             <h1 class="center-align">404</h1>
@@ -8,4 +8,4 @@
             <a class="btn btn-block" href="/">Take me back!</a>
         </div>
     </div>
-</template>
+</template>

app/client/templates/addSong.html

@@ -2,7 +2,7 @@
     {{> header}}
     <main class="content-box row hack-container">
         <h3 class="black-text thin center">Add Song</h3>
-        <div class="card teal-text col m6 s12 l6 offset-m3 offset-l3">
+        <div class="card light-blue-text col m6 s12 l6 offset-m3 offset-l3">
             <div class="card-content">
                 <span>Import Video</span>
                 <hr>
@@ -67,4 +67,4 @@
         });
     </script>
     {{> footer}}
-</template>
+</template>

app/client/templates/admin.html

@@ -3,7 +3,7 @@
     <div class="landing">
         {{> header}}
         <div class="row" style="margin-top: 20px; height: auto;">
-            <div class="col s12 l6 m10 offset-m1 offset-l1 card-panel teal accent-3 white-text" style="height: 80%;">
+            <div class="col s12 l6 m10 offset-m1 offset-l1 card-panel light-blue accent-3 white-text" style="height: 80%;">
                 <div>
                     <h2 class="center-align">Stations</h2>
                 </div>
@@ -36,7 +36,7 @@
                     </a>
                 </div>
             </div>
-            <div class="col s12 m10 l3 offset-m1 offset-l1 card-panel teal accent-3 white-text" style="height: 80%;">
+            <div class="col s12 m10 l3 offset-m1 offset-l1 card-panel light-blue accent-3 white-text" style="height: 80%;">
                 <div>
                     <h2 class="center-align">Other</h2>
                 </div>
@@ -50,7 +50,7 @@
                     </a>
                 </div>
             </div>
-            <div class="col s12 l6 m10 offset-m1 offset-l1 card-panel teal accent-3 white-text" style="height: 80%;">
+            <div class="col s12 l6 m10 offset-m1 offset-l1 card-panel light-blue accent-3 white-text" style="height: 80%;">
                 <div>
                     <h2 class="center-align">Alerts</h2>
                 </div>
@@ -87,7 +87,7 @@
                     <a class="btn col l12 m12 s12 waves-effect waves-light modal-trigger" href="#alerts-modal">Create New Alert</a>
                 </div>
             </div>
-            <div class="col s12 m10 l3 offset-m1 offset-l1 card-panel teal accent-3 white-text" style="height: 80%;">
+            <div class="col s12 m10 l3 offset-m1 offset-l1 card-panel light-blue accent-3 white-text" style="height: 80%;">
                 <div>
                     <h2 class="center-align">Queue</h2>
                 </div>

app/client/templates/banned.html

@@ -2,7 +2,7 @@
     {{> alerts}}
 
     <div class="row">
-        <div class="col-md-4 col-md-offset-4 teal-text" id="banned-container">
+        <div class="col-md-4 col-md-offset-4 light-blue-text" id="banned-container">
             <i class="material-icons center red-text" style="font-size: 20em; width: 100%;">remove_circle</i>
             <div class="divider"></div>
             <h3 class="text text-center"><b>You were banned by</b> {{bannedBy}} <span title="{{bannedAt}}">{{rtime bannedAt}}</span>.</h3>

app/client/templates/donate.html

@@ -6,7 +6,7 @@
             ">Why to donate?</h1>
             <div class="col s12 m4">
                 <div class="icon-block">
-                    <h2 class="center teal-text text-accent-4"><i class="material-icons">grade</i></h2>
+                    <h2 class="center light-blue-text text-accent-4"><i class="material-icons">grade</i></h2>
                     <h5 class="center">Curabitur vitae malesuada quam</h5>
 
                     <p class="light">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dignissim ex orci, at viverra justo volutpat non. Nunc eu sapien fermentum, ullamcorper est at, porta enim. Vivamus vehicula dolor sodales purus volutpat, sed suscipit libero condimentum. Suspendisse potenti. Maecenas vestibulum diam ex, vel semper ante varius sit amet. Integer sit amet imperdiet dolor. Quisque sed sagittis dolor. Morbi bibendum hendrerit velit, a ultrices mauris volutpat in. Nam porta, risus ut molestie cursus, neque ipsum hendrerit sapien, id rutrum odio ex molestie mauris. Nullam eleifend tempor dictum. Donec et commodo nisl, non tincidunt odio. Nunc aliquam sollicitudin urna, non dignissim felis interdum id. Pellentesque facilisis sagittis diam, in convallis lectus euismod at.</p>
@@ -15,7 +15,7 @@
 
             <div class="col s12 m4">
                 <div class="icon-block">
-                    <h2 class="center teal-text text-accent-4"><i class="material-icons">grade</i></h2>
+                    <h2 class="center light-blue-text text-accent-4"><i class="material-icons">grade</i></h2>
                     <h5 class="center">Curabitur vitae malesuada quam</h5>
 
                     <p class="light">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dignissim ex orci, at viverra justo volutpat non. Nunc eu sapien fermentum, ullamcorper est at, porta enim. Vivamus vehicula dolor sodales purus volutpat, sed suscipit libero condimentum. Suspendisse potenti. Maecenas vestibulum diam ex, vel semper ante varius sit amet. Integer sit amet imperdiet dolor. Quisque sed sagittis dolor. Morbi bibendum hendrerit velit, a ultrices mauris volutpat in. Nam porta, risus ut molestie cursus, neque ipsum hendrerit sapien, id rutrum odio ex molestie mauris. Nullam eleifend tempor dictum. Donec et commodo nisl, non tincidunt odio. Nunc aliquam sollicitudin urna, non dignissim felis interdum id. Pellentesque facilisis sagittis diam, in convallis lectus euismod at.</p>
@@ -24,7 +24,7 @@
 
             <div class="col s12 m4">
                 <div class="icon-block">
-                    <h2 class="center teal-text text-accent-4"><i class="material-icons">grade</i></h2>
+                    <h2 class="center light-blue-text text-accent-4"><i class="material-icons">grade</i></h2>
                     <h5 class="center">Curabitur vitae malesuada quam</h5>
 
                     <p class="light">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dignissim ex orci, at viverra justo volutpat non. Nunc eu sapien fermentum, ullamcorper est at, porta enim. Vivamus vehicula dolor sodales purus volutpat, sed suscipit libero condimentum. Suspendisse potenti. Maecenas vestibulum diam ex, vel semper ante varius sit amet. Integer sit amet imperdiet dolor. Quisque sed sagittis dolor. Morbi bibendum hendrerit velit, a ultrices mauris volutpat in. Nam porta, risus ut molestie cursus, neque ipsum hendrerit sapien, id rutrum odio ex molestie mauris. Nullam eleifend tempor dictum. Donec et commodo nisl, non tincidunt odio. Nunc aliquam sollicitudin urna, non dignissim felis interdum id. Pellentesque facilisis sagittis diam, in convallis lectus euismod at.</p>
@@ -33,7 +33,7 @@
         </div>
         <br />
         <div class="row center">
-            <a class="waves-effect waves-light btn modal-trigger waves-light teal accent-4" href="#stipeModal">I want to Donate!</a>
+            <a class="waves-effect waves-light btn modal-trigger waves-light light-blue accent-4" href="#stipeModal">I want to Donate!</a>
             <p>By donating to musare.com you agree to the <a href="/terms">TERMS OF SERVICE</a> and <a href="/privacy">PRIVACY POLICY!</a> (Make sure you read it!)</p>
         </div>
     </div>
@@ -87,4 +87,4 @@
             );
     });
     </script>
-</template>
+</template>

app/client/templates/header.html

@@ -27,7 +27,7 @@
                 <a href="#" data-activates="mobile-navi" class="button-collapse white-text"><i class="material-icons">menu</i></a>
                 <ul class="right hide-on-med-and-down scroll-fix">
                   {{#if isModerator}}
-                    <li><a  class="teal-text text-accent-4" href="/admin"><b>Admin</b></a></li>
+                    <li><a  class="light-blue-text text-accent-4" href="/admin"><b>Admin</b></a></li>
                   {{/if}}
                     <li><a href="/news" class="white-text">News</a></li>
                     <li><a class="dropdown-button white-text" href="#!" data-activates="contributeDrop">Contribute<i

app/client/templates/home.html

@@ -26,7 +26,7 @@
                                         <p>{{roomDesc}}</p>
                                     </div>
                                     <div class="card-action">
-                                        <a href=/{{type}} class="teal-text text-accent-4">Join Room</a>
+                                        <a href=/{{type}} class="light-blue-text text-accent-4">Join Room</a>
                                     </div>
                                 </div>
                             </div>
@@ -48,7 +48,7 @@
                                     <p>{{roomDesc}}</p>
                                 </div>
                                 <div class="card-action">
-                                    <a href=/{{type}} class="teal-text text-accent-4">Join Room</a>
+                                    <a href=/{{type}} class="light-blue-text text-accent-4">Join Room</a>
                                 </div>
                             </div>
                         </div>
@@ -76,7 +76,7 @@
                                         <p>{{roomDesc}}</p>
                                     </div>
                                     <div class="card-action">
-                                        <a href=/private/{{name}} class="teal-text text-accent-4">Join Room</a>
+                                        <a href=/private/{{name}} class="light-blue-text text-accent-4">Join Room</a>
                                     </div>
                                 </div>
                             </div>
@@ -97,7 +97,7 @@
                                     <p>{{roomDesc}}</p>
                                 </div>
                                 <div class="card-action">
-                                    <a href=/private/{{name}} class="teal-text text-accent-4">Join Room</a>
+                                    <a href=/private/{{name}} class="light-blue-text text-accent-4">Join Room</a>
                                 </div>
                             </div>
                         </div>

app/client/templates/maintenance.html

@@ -1,9 +1,9 @@
 <template name="maintenance">
     <div class="row">
-        <div class="col l8 s8 m8 offset-l2 offset-m2 offset-s2 teal-text">
+        <div class="col l8 s8 m8 offset-l2 offset-m2 offset-s2 light-blue-text">
             <i class="material-icons center red-text" style="font-size: 20em; width: 100%;">remove_circle</i>
             <div class="divider"></div>
             <h3 class="center-align flow-text">Musare is currently in maintenance mode. Please stand by as we work on Musare. Musare should be back shortly.</h3>
         </div>
     </div>
-</template>
+</template>

app/client/templates/manageSongs.html

@@ -3,7 +3,7 @@
     <div class="landing">
         {{> header}}
         <div class="row">
-            <div class="col m8 s8 l8 offset-l2 offset-m1 offset-s2 admin-playlist-panel card-panel teal accent-3">
+            <div class="col m8 s8 l8 offset-l2 offset-m1 offset-s2 admin-playlist-panel card-panel light-blue accent-3">
                 <div class="card-content white-text">
                     <h3 class="text-center">Filters</h3>
                     <p>
@@ -16,7 +16,7 @@
                     </p>
                 </div>
             </div>
-            <div class="col m8 s8 l8 offset-l2 offset-m1 offset-s2 admin-playlist-panel card-panel teal accent-3">
+            <div class="col m8 s8 l8 offset-l2 offset-m1 offset-s2 admin-playlist-panel card-panel light-blue accent-3">
                 <div class="card-content white-text">
                     <h3 class="text-center">Songs</h3>
                     <table class="bordered">
@@ -68,7 +68,7 @@
                     <div width="960" height="540" id="previewPlayer"></div>
                 </div>
                 <div class="seeker-bar-container col l10 m10 s10 white" id="preview-progress">
-                    <div class="seeker-bar teal" style="width: 0%"></div>
+                    <div class="seeker-bar light-blue" style="width: 0%"></div>
                 </div>
             <span class="col l2 m2 s2 center" id="preview-time">
                 <span id="time-elapsed">0:00</span> / <span id="time-total">0:00</span>

app/client/templates/manageStation.html

@@ -3,7 +3,7 @@
     <div class="landing">
         {{> header}}
         <div class="row">
-            <div class="col m12 s12 l8 offset-l2 admin-playlist-panel card-panel teal accent-3">
+            <div class="col m12 s12 l8 offset-l2 admin-playlist-panel card-panel light-blue accent-3">
                 <div class="card-content white-text">
                     <h3 class="text-center">Description</h3>
                     <!--Meteor.call("editRoomDesc", Session.get("roomDesc"), description);-->
@@ -16,7 +16,7 @@
                     {{/if}}
                 </div>
             </div>
-            <div class="col m12 s12 l8 offset-l2 admin-playlist-panel card-panel teal accent-3">
+            <div class="col m12 s12 l8 offset-l2 admin-playlist-panel card-panel light-blue accent-3">
                 <div class="card-content white-text">
                     <h3 class="text-center">{{display}} playlist</h3>
                     <table class="bordered">
@@ -58,7 +58,7 @@
                     </table>
                 </div>
             </div>
-            <div class="col m12 s12 l8 offset-l2 admin-playlist-panel card-panel teal accent-3">
+            <div class="col m12 s12 l8 offset-l2 admin-playlist-panel card-panel light-blue accent-3">
                 <div class="card-content white-text">
                     <h3 class="text-center">Reports</h3>
                     <table class="bordered">
@@ -85,7 +85,7 @@
                     </table>
                 </div>
             </div>
-            <div class="col m12 s12 l8 offset-l2 admin-playlist-panel card-panel teal accent-3">
+            <div class="col m12 s12 l8 offset-l2 admin-playlist-panel card-panel light-blue accent-3">
                 <div class="card-content white-text">
                     <h3 class="text-center">Delete Room</h3>
                     <a id="deleteRoom" class="waves-effect waves-light btn red" style="margin-bottom: 10px">Delete Room</a>
@@ -102,7 +102,7 @@
                     <div width="960" height="540" id="previewPlayer"></div>
                 </div>
                 <div class="seeker-bar-container col l10 m10 s10 white" id="preview-progress">
-                    <div class="seeker-bar teal" style="width: 0%"></div>
+                    <div class="seeker-bar light-blue" style="width: 0%"></div>
                 </div>
             <span class="col l2 m2 s2 center" id="preview-time">
                 <span id="time-elapsed">0:00</span> / <span id="time-total">0:00</span>

app/client/templates/news.html

@@ -3,7 +3,7 @@
     <main class="content-box row hack-container">
         <h3 class="black-text thin center">News</h3>
             {{#each articles}}
-                <div class="card teal-text col m6 s12 l6 offset-m3 offset-l3">
+                <div class="card light-blue-text col m6 s12 l6 offset-m3 offset-l3">
                     <div class="card-content">
                         <span>{{title}}</span>
                         <hr>

app/client/templates/privateRoom.html

@@ -1,7 +1,7 @@
 <template name="privateRoom">
     <header>
         <nav>
-            <div class="nav-wrapper teal accent-4">
+            <div class="nav-wrapper light-blue accent-4">
                 <ul class="left hide-on-med-and-down">
                     <li><a href="/"><i class="material-icons">home</i></a></li>
                     <li><a id="vote-skip" class="tooltipped" data-position="bottom" data-delay="50" data-tooltip="Vote to skip this song"><i class="material-icons left">skip_next</i>{{votes}}</a></li>
@@ -42,7 +42,7 @@
                                 </form>
                             </div>
                             <div class="seeker-bar-container white" id="preview-progress">
-                                <div class="seeker-bar teal" style="width: 0%"></div>
+                                <div class="seeker-bar light-blue" style="width: 0%"></div>
                             </div>
                         </div>
                     </div>

app/client/templates/profile.html

@@ -16,7 +16,7 @@
                 </div>
             </div>
             <div class="col s12 m4 l4">
-                <div class="card teal accent-3 profile-card">
+                <div class="card light-blue accent-3 profile-card">
                     <div class="card-content white-text">
                         <span class="card-title">Liked Songs</span>
                         <ul>

app/client/templates/queues.html

@@ -3,7 +3,7 @@
     <div class="landing">
         {{> header}}
         <div class="row">
-            <div class="col m8 s8 l8 offset-l2 offset-m1 offset-s2 admin-queue-panel card-panel teal accent-3">
+            <div class="col m8 s8 l8 offset-l2 offset-m1 offset-s2 admin-queue-panel card-panel light-blue accent-3">
                 <div class="card-content white-text">
                     <h3 class="text-center">Review queue</h3>
                     <table class="bordered">
@@ -56,7 +56,7 @@
                     <div width="960" height="540" id="previewPlayer"></div>
                 </div>
                 <div class="seeker-bar-container col l10 m10 s10 white" id="preview-progress">
-                    <div class="seeker-bar teal" style="width: 0%"></div>
+                    <div class="seeker-bar light-blue" style="width: 0%"></div>
                 </div>
                 <span class="col l2 m2 s2 center" id="preview-time">
                     <span id="time-elapsed">0:00</span> / <span id="time-total">0:00</span>

app/client/templates/room.html

@@ -1,7 +1,7 @@
 <template name="room">
     <header>
         <nav>
-            <div class="nav-wrapper teal accent-4">
+            <div class="nav-wrapper light-blue accent-4">
                 <ul class="left hide-on-med-and-down">
                     <li><a href="/"><i class="material-icons">home</i></a></li>
                     <li><a href="#add_song_modal" class="tooltipped" data-position="bottom" data-delay="50" data-tooltip="Request a song" id="add-song-modal-button"><i class="material-icons">playlist_add</i></a></li>
@@ -49,7 +49,7 @@
                                 </div>
                             </div>
                             <div class="seeker-bar-container white" id="preview-progress">
-                                <div class="seeker-bar teal" style="width: 0%"></div>
+                                <div class="seeker-bar light-blue" style="width: 0%"></div>
                             </div>
                         </div>
                         <img alt="Not loading" class="responsive-img song-img col s12 m12 l4"
@@ -100,7 +100,7 @@
         </ul>
     </div>
     <!--Admin room controls-->
-    <ul id='admin-dropdown' style="background-color: #00bfa5 !important; display: none">
+    <ul id='admin-dropdown' style="background-color: #26a69a !important; display: none">
         <li><a id="pause"><i class="material-icons">pause</i></a></li>
         <li><a id="skip"><i class="material-icons">skip_next</i></a></li>
         <li><a id="shuffle"><i class="material-icons">shuffle</i></a></li>
@@ -146,18 +146,18 @@
                                 </div>
                                 <div class="input-field col l8 m8 s12 offset-l2 offset-m2">
                                     <i class="material-icons prefix">vpn_key</i>
-                                    <label for="id" class="teal-text">Song ID</label>
+                                    <label for="id" class="light-blue-text">Song ID</label>
                                     <input class="validate" name="id" id="id" type="text" pattern=".{11}"/>
                                 </div>
                                 <div class="input-field col l8 m8 s12 offset-l2 offset-m2">
                                     <i class="material-icons prefix">person</i>
-                                    <label for="artist" class="teal-text">Song Artist</label>
+                                    <label for="artist" class="light-blue-text">Song Artist</label>
                                     <input class="validate" name="artist" id="artist" aria-required="true"
                                            type="text"/>
                                 </div>
                                 <div class="input-field col l8 m8 s12 offset-l2 offset-m2">
                                     <i class="material-icons prefix">subject</i>
-                                    <label for="title" class="teal-text">Song Title</label>
+                                    <label for="title" class="light-blue-text">Song Title</label>
                                     <input class="validate required" name="title" id="title" type="text"/>
                                 </div>
                                 <button type="button" id="add-song-button"
@@ -179,7 +179,7 @@
                                 {{#if singleVideoResultsActive}}
                                     <div id="single-video-results">
                                         <div style="overflow: auto; height: 30vh; margin-top: 1rem;">
-                                            <ul class="collection teal-text">
+                                            <ul class="collection light-blue-text">
                                                 {{#each result in singleVideoResults}}
                                                     <li class="collection-item avatar youtube-search-result-li">
                                                         <img src="{{result.image}}"
@@ -235,7 +235,7 @@
                                     $('#genres_pl').material_select();
                                 </script>
                                 <div id="import-playlist-results">
-                                    <ul class="collection teal-text">
+                                    <ul class="collection light-blue-text">
                                         {{#each result in importPlaylistVideos}}
                                             <li class="collection-item avatar youtube-search-result-li">
                                                 <img src="{{result.image}}"