# HG changeset patch
# User Chloe Laisne <chloe.laisne@gmail.com>
# Date 1467668618 -7200
# Node ID 5e3cd85cde06b2cbc9a3c57f5ce732837cad9731
# Parent  d284324358b2257140416be0ccf3ffe388a8fc93
More sass variables
Playing state in playlist-component

diff -r d284324358b2 -r 5e3cd85cde06 cms/app-client/app/styles/app.scss
--- a/cms/app-client/app/styles/app.scss	Mon Jul 04 23:04:42 2016 +0200
+++ b/cms/app-client/app/styles/app.scss	Mon Jul 04 23:43:38 2016 +0200
@@ -1,11 +1,16 @@
 $dark-blue: #13212d;
 $medium-blue: #253946;
 $light-blue: #becfd4;
+$blue: #2faddd;
+$medium-grey: #71848d;
 $light-grey: #878e94;
+$dark-grey: #59626b;
+$medium-white: #f5f5f5;
 $light-white: #fbfbfb;
 
+
 body {
-    background-color: #f5f5f5;
+    background-color: $medium-white;
 }
 
 button {
@@ -58,7 +63,7 @@
 }
 
 .corpus-app-container {
-    color: #687a84;
+    color: $light-blue;
     box-sizing: border-box;
     background-color: $light-blue;
 }
diff -r d284324358b2 -r 5e3cd85cde06 cms/app-client/app/styles/components/player-component.scss
--- a/cms/app-client/app/styles/components/player-component.scss	Mon Jul 04 23:04:42 2016 +0200
+++ b/cms/app-client/app/styles/components/player-component.scss	Mon Jul 04 23:43:38 2016 +0200
@@ -89,7 +89,7 @@
 .player-component #audio .progress .bar {
     width: 302px;
     height: 3px;
-    background-color: #cfd2d5;
+    background-color: $light-white;
     margin: -1px 60px 0 60px;
     position: relative;
     display: block;
@@ -99,7 +99,7 @@
 .player-component #audio .progress .bar .value {
     width: 0%;
     height: 100%;
-    background-color: #2faddd;
+    background-color: $blue;
     display: block;
 }
 
diff -r d284324358b2 -r 5e3cd85cde06 cms/app-client/app/styles/components/playlist-component.scss
--- a/cms/app-client/app/styles/components/playlist-component.scss	Mon Jul 04 23:04:42 2016 +0200
+++ b/cms/app-client/app/styles/components/playlist-component.scss	Mon Jul 04 23:43:38 2016 +0200
@@ -25,33 +25,43 @@
     font-size: 12px;
     line-height: 20px;
     border-bottom: 1px solid #859097;
-    color: #59626b;
+    color: $dark-grey;
 }
 
 .playlist-component ul li.playing {
     background-color: $light-blue;
+    color: $medium-blue;
 }
 
 .playlist-component ul li .tools {
     float: right;
-    color: $light-grey;
 }
 
 .playlist-component ul li .tools button,
 .playlist-component ul li .tools .fa {
-    border: 2px solid $light-grey;
+    border: 1px solid $dark-grey;
     cursor: pointer;
-    color: $light-grey;
+    color: inherit;
+}
+
+.playlist-component ul li.playing .tools button,
+.playlist-component ul li.playing .tools .fa {
+    border-color: $medium-blue;
 }
 
 .playlist-component ul li .tools button:hover,
 .playlist-component ul li .tools .fa:hover {
-    background-color: $light-grey;
+    background-color: $dark-grey;
     color: $light-white;
 }
 
 .playlist-component ul li.playing .tools button:hover,
 .playlist-component ul li.playing .tools .fa:hover {
+    background-color: $medium-blue;
+}
+
+.playlist-component ul li.playing .tools button:hover,
+.playlist-component ul li.playing .tools .fa:hover {
     color: $light-blue;
 }
 
@@ -68,9 +78,11 @@
 .playlist-component ul li .tools .time {
     display: block;
     line-height: 24px;
+    font-weight: bold;
 }
 
 .playlist-component ul li .tools .fa {
+    border-width: 2px;
     border-radius: 100%;
     width: 24px;
     height: 24px;
@@ -81,7 +93,7 @@
 }
 
 .playlist-component ul li .tools .fa-play::before {
-    margin-left: 3px;
+    margin-left: 2px;
 }
 
 .playlist-component ul li .title,
diff -r d284324358b2 -r 5e3cd85cde06 cms/app-client/app/styles/tabs/chrono.scss
--- a/cms/app-client/app/styles/tabs/chrono.scss	Mon Jul 04 23:04:42 2016 +0200
+++ b/cms/app-client/app/styles/tabs/chrono.scss	Mon Jul 04 23:43:38 2016 +0200
@@ -8,7 +8,7 @@
 }
 
 #chrono-table .tens {
-    color: #71848d;
+    color: $medium-grey;
     font-size: 13px;
 }
 
@@ -32,7 +32,7 @@
     display: inline-block;
     margin: 0px 0px 0px 5px;
     cursor: pointer;
-    background-color: #71848d;
+    background-color: $medium-grey;
     color: $light-blue;
     font-size: 12px;
     box-sizing: border-box;
diff -r d284324358b2 -r 5e3cd85cde06 cms/app-client/app/styles/tabs/langues.scss
--- a/cms/app-client/app/styles/tabs/langues.scss	Mon Jul 04 23:04:42 2016 +0200
+++ b/cms/app-client/app/styles/tabs/langues.scss	Mon Jul 04 23:43:38 2016 +0200
@@ -1,7 +1,6 @@
 #chart_div {
     width: 100%;
     height: 540px;
-    background: #ddd;
 }
 
 text {
@@ -13,7 +12,7 @@
 }
 
 rect {
-    stroke: #fff;
+    stroke: $light-white;
 }
 
 rect.parent,