# HG changeset patch
# User Chloe Laisne <chloe.laisne@gmail.com>
# Date 1476781700 -19800
# Node ID c69dcc3b052463ec173a76b9a156960318c03e37
# Parent  c3a6266ebe0a6db870cdbafd8e62ac4d4666727d
New colors player and playlist

diff -r c3a6266ebe0a -r c69dcc3b0524 cms/app-client/app/styles/app.scss
--- a/cms/app-client/app/styles/app.scss	Mon Oct 17 22:40:26 2016 +0530
+++ b/cms/app-client/app/styles/app.scss	Tue Oct 18 14:38:20 2016 +0530
@@ -10,6 +10,13 @@
 $medium-white: #f5f5f5;
 $light-white: #fbfbfb;
 
+$corpus-white: #ffffff;
+$corpus-blue: #0085cb;
+$corpus-light-blue: #349dd6;
+$corpus-light-grey: #f3f3f3;
+$corpus-grey: #777777;
+$corpus-black: #0f0f0f;
+
 $content-height: 540px;
 $content-width: 1110px;
 
diff -r c3a6266ebe0a -r c69dcc3b0524 cms/app-client/app/styles/components/filter-component.scss
--- a/cms/app-client/app/styles/components/filter-component.scss	Mon Oct 17 22:40:26 2016 +0530
+++ b/cms/app-client/app/styles/components/filter-component.scss	Tue Oct 18 14:38:20 2016 +0530
@@ -1,6 +1,6 @@
 .filter-component {
-    background-color: $medium-blue;
-    color: $light-white;
+    background-color: $corpus-black;
+    color: $corpus-black;
     position: relative;
     padding: 0px 20px;
     overflow: hidden;
@@ -10,30 +10,16 @@
     display: none;
 }
 
-.filter-component h2 {
-    line-height: 60px;
-    color: $light-white;
-    font-size: 14px;
-}
-
-.filter-component p {
-    text-align: center;
-    color: $light-white;
-    margin: 0;
-    line-height: 40px;
-}
-
 .filter-component ul {
     list-style: none;
     padding: 0px;
     margin: 14px 0px;
-    font-size: 0px;
-    color: $dark-blue;
+    font-size: 0px; 
 }
 
 .filter-component ul li {
     display: inline-block;
-    background-color: $light-blue;
+    background-color: $corpus-white;
     border-radius: 4px;
     font-size: 12px;
     line-height: 30px;
@@ -45,13 +31,18 @@
     margin-right: 0px;
 }
 
-.filter-component ul li .fa {
+.filter-component ul li .fa:first-child {
     margin-right: 5px;
 }
 
-.filter-component ul li .remove {
+.filter-component ul li .fa-times {
     padding-left: 10px;
     cursor: pointer;
+    font-size: 0px;
+}
+
+.filter-component ul li .fa-times::before {
+    font-size: 13px;
 }
 
 .filter-component ul li .label {
diff -r c3a6266ebe0a -r c69dcc3b0524 cms/app-client/app/styles/components/player-component.scss
--- a/cms/app-client/app/styles/components/player-component.scss	Mon Oct 17 22:40:26 2016 +0530
+++ b/cms/app-client/app/styles/components/player-component.scss	Tue Oct 18 14:38:20 2016 +0530
@@ -3,7 +3,8 @@
     text-align: left;
     padding: 0px 40px;
     height: 80px;
-    background-color: $dark-blue;
+    background-color: $corpus-blue;
+    border-bottom: 1px solid$corpus-black;
     overflow: hidden;
     position: relative;
 }
@@ -32,7 +33,7 @@
 .player-component #audio .controls i.disabled {
     cursor: pointer;
     pointer-events: none;
-    opacity: .1;
+    color: $corpus-light-blue;
 }
 
 .player-component #audio .controls i.fa-backward {
@@ -41,7 +42,7 @@
 
 .player-component #audio .controls i.fa-play,
 .player-component #audio .controls i.fa-pause {
-    border: 2px solid $light-white;
+    border: 2px solid $corpus-white;
     border-radius: 100%;
     margin-right: 8px;
     margin-left: 8px;
@@ -103,7 +104,7 @@
 .player-component #audio .progress .bar {
     width: 303px;
     height: 3px;
-    background-color: $light-white;
+    background-color: $corpus-light-blue;
     margin: -1px 60px 0 60px;
     position: relative;
     display: block;
@@ -122,7 +123,7 @@
 .player-component #audio .progress .bar .value {
     width: 0%;
     height: 100%;
-    background-color: $blue;
+    background-color: $corpus-white;
     display: block;
 }
 
diff -r c3a6266ebe0a -r c69dcc3b0524 cms/app-client/app/styles/components/playlist-component.scss
--- a/cms/app-client/app/styles/components/playlist-component.scss	Mon Oct 17 22:40:26 2016 +0530
+++ b/cms/app-client/app/styles/components/playlist-component.scss	Tue Oct 18 14:38:20 2016 +0530
@@ -1,5 +1,5 @@
 .playlist-component {
-    background-color: $dark-blue;
+    background-color: $corpus-light-grey;
 }
 
 .playlist-component .header {
@@ -9,31 +9,37 @@
     text-transform: none;
     padding: 0px 15px;
     text-align: left;
-    color: $light-white;
+    color: $corpus-black;
     font-size: 13px;
     display: block;
     margin: 0;
     border: none;
+    border-bottom: 1px solid $corpus-black;
     box-sizing: border-box;
+    background-color: $corpus-white;
 }
 
 .playlist-component .header h2 {
     line-height: 40px;
-    color: $light-white;
+    text-transform: none;
     font-size: 13px;
     display: inline-block;
+    color: inherit;
 }
 
 .playlist-component .header .pagination {
     float: right;
 }
 
-.playlist-component .header .pagination .fa.disabled {
-    pointer-events: none;
-    opacity: 0.3;
+.playlist-component .header .pagination .fa {
+    cursor: pointer;
 }
 
-.playlist-component .header .pagination .span {
+.playlist-component .header .pagination .fa.disabled {
+    display: none;
+}
+
+.playlist-component .header .pagination span {
     display: inline-block;
     margin: 0 10px;
 }
@@ -44,7 +50,6 @@
     padding: 0;
     font-size: 0px;
     overflow-y: scroll;
-    background-color: $light-white;
     position: relative;
 }
 
@@ -52,8 +57,10 @@
     padding: 15px;
     font-size: 12px;
     line-height: 20px;
-    border-bottom: 1px solid $dark-grey;
-    color: $dark-grey;
+    border-bottom-width: 1px;
+    border-bottom-style: solid;
+    border-color: $corpus-black;
+    color: $corpus-black;
 }
 
 .playlist-component ul li:last-child {
@@ -65,9 +72,9 @@
 }
 
 .playlist-component ul li.playing {
-    background-color: $light-blue;
-    border-bottom-color: $medium-blue;
-    color: $medium-blue;
+    background-color: $corpus-blue;
+    border-bottom-color: $corpus-white;
+    color: $corpus-white;
     pointer-events: none;
 }
 
@@ -87,50 +94,74 @@
     margin-top: 10px;
 }
 
-.playlist-component ul li .tools .notice,
-.playlist-component ul li .tools .fa {
-    border: 1px solid $dark-grey;
-    cursor: pointer;
+.playlist-component ul li .fa,
+.playlist-component ul li button {
+    border-style: solid;
+    line-height: 22px;
+    height: 22px;
+    box-sizing: content-box;
+    display: inline-block;
+}
+
+.playlist-component ul li button,
+.playlist-component ul li .fa-share-alt {
+    border-width: 2px;
+}
+
+.playlist-component ul li .fa {
+    border-width: 2px;
+    border-radius: 100%;
+    width: 22px;
+    margin-left: 10px;
+    
+}
+
+.playlist-component ul li button,
+.playlist-component ul li .fa {
+    pointer-events: none;
+    cursor: default;
+    color: $corpus-grey;
+    border-color: $corpus-grey;
+}
+
+
+.playlist-component ul li .fa-play {
     color: inherit;
+    border-color: inherit;
     pointer-events: all;
 }
 
-.playlist-component ul li.playing .tools .notice,
-.playlist-component ul li.playing .tools .fa {
-    border-color: $medium-blue;
+.playlist-component ul li.playing .fa,
+.playlist-component ul li.playing button {
+    border-color: $corpus-white;
+    color: $corpus-white;
+    pointer-events: all;
+    cursor: pointer;
+    opacity: 1;
 }
 
-.playlist-component ul li.notice .tools .notice,
-.playlist-component ul li.notice .tools .fa {
-    border-color: $dark-grey;
-}
-
-.playlist-component ul li .tools .notice.active,
-.playlist-component ul li .tools .notice:hover,
-.playlist-component ul li .tools .fa:hover {
-    background-color: $dark-grey;
-    color: $light-white;
+.playlist-component ul li.playing button:hover,
+.playlist-component ul li.playing .fa:hover {
+    background-color: $corpus-light-blue;
 }
 
-.playlist-component ul li .tools .fa.active,
-.playlist-component ul li.playing .tools .notice.active,
-.playlist-component ul li.playing .tools .notice:hover,
-.playlist-component ul li.playing .tools .fa:hover {
-    background-color: $medium-blue;
-    color: $light-blue;
+.playlist-component ul li.playing .fa:active,
+.playlist-component ul li.playing .fa.active,
+.playlist-component ul li.playing .fa-pause,
+.playlist-component ul li.playing .fa-pause:hover,
+.playlist-component ul li.playing button.active {
+    background-color: $corpus-white;
+    color: $corpus-blue;
 }
 
-.playlist-component ul li.playing .tools .notice:hover,
-.playlist-component ul li.playing .tools .fa:hover {
-    color: $light-blue;
-}
-
-.playlist-component ul li:not(.playing) .notice,
-.playlist-component ul li:not(.playing) .fa-share-alt,
-.playlist-component ul li:not(.playing) .fa-text-height {
-    pointer-events: none;
-    cursor: default;
-    opacity: 0.5;
+.playlist-component ul li .tools .fa-share-alt {
+    font-size: 0px;
+    float: right;
+    width: auto;
+    border-radius: 0px;
+    border-left: none;
+    padding: 0px 6px;
+    margin: 0px;
 }
 
 .playlist-component ul li .meta p {
@@ -144,34 +175,10 @@
     padding: 0px 10px;
 }
 
-.playlist-component ul li .tools .notice + .fa {
-    border: none;
-    font-size: 0px;
-    float: right;
-    width: auto;
-    height: 20px;
-    border-radius: 0px;
-    border: 1px solid $medium-blue;
-    border-left: none;
-    padding: 0px 6px;
-    box-sizing: content-box;
-    margin: 0px;
-}
-
 .playlist-component ul li .tools .notice + .fa::before {
     font-size: 12px;
 }
 
-.playlist-component ul li .tools .fa {
-    border-width: 2px;
-    border-radius: 100%;
-    width: 24px;
-    height: 24px;
-    line-height: 20px;
-    margin-left: 10px;
-    display: inline-block;
-}
-
 .playlist-component ul li .languages {
     display: block;
     height: 20px;
diff -r c3a6266ebe0a -r c69dcc3b0524 cms/app-client/app/templates/components/filter-component.hbs
--- a/cms/app-client/app/templates/components/filter-component.hbs	Mon Oct 17 22:40:26 2016 +0530
+++ b/cms/app-client/app/templates/components/filter-component.hbs	Tue Oct 18 14:38:20 2016 +0530
@@ -1,21 +1,21 @@
 {{#if (ifOr filter.location filter.language filter.discourse filter.date filter.theme)}}
 <ul>
 	{{#if filter.location}}
-    <li class="filter location"><i class="fa fa-globe"></i>{{filter.location}}<span class="remove"{{action 'removeFilter' 'location'}}>&#10005;</span></li>
+    <li class="filter location"><i class="fa fa-globe"></i>{{filter.location}}<span class="fa fa-times"{{action 'removeFilter' 'location'}}>Remove</span></li>
 	{{/if}}
 	{{#if filter.language}}
-    <li class="filter language"><i class="fa fa-language"></i>{{doc-language class="label" url=filter.language}}<span class="remove"{{action 'removeFilter' 'language'}}>&#10005;</span></li>
+    <li class="filter language"><i class="fa fa-language"></i>{{doc-language class="label" url=filter.language}}<span class="fa fa-times"{{action 'removeFilter' 'language'}}>Remove</span></li>
 	{{/if}}
 	{{#if filter.discourse}}
-	<li class="filter discourse"><i class="fa fa-comments"></i>{{doc-subject url=filter.discourse}}<span class="remove"{{action 'removeFilter' 'discourse'}}>&#10005;</span></li>
+	<li class="filter discourse"><i class="fa fa-comments"></i>{{doc-subject url=filter.discourse}}<span class="fa fa-times"{{action 'removeFilter' 'discourse'}}>Remove</span></li>
 	{{/if}}
 	{{#if filter.date}}
     {{#each intervals as |interval| }}
-    <li class="filter date" data-dates="{{interval}}"><i class="fa fa-clock-o"></i>{{interval interval}}<span class="remove"{{action 'removeFilter' 'date' interval }}>&#10005;</span></li>
+    <li class="filter date" data-dates="{{interval}}"><i class="fa fa-clock-o"></i>{{interval interval}}<span class="fa fa-times"{{action 'removeFilter' 'date' interval}}>Remove</span></li>
     {{/each}}
 	{{/if}}
 	{{#if filter.theme}}
-    <li class="filter theme"><i class="fa fa-bookmark"></i>{{doc-subject url=filter.theme}}<span class="remove"{{action 'removeFilter' 'theme'}}>&#10005;</span></li>
+    <li class="filter theme"><i class="fa fa-bookmark"></i>{{doc-subject url=filter.theme}}<span class="fa fa-times"{{action 'removeFilter' 'theme'}}>Remove</span></li>
 	{{/if}}
 </ul>
 {{/if}}
\ No newline at end of file