More coherent design with progress bar

1 files changed, 19 insertions, 7 deletions

diff --git a/design/design.css b/design/design.css
index 7d66650..11002aa 100644
--- a/design/design.css
+++ b/design/design.css
@@ -123,19 +123,27 @@
   border-radius: 0px;
 }
 
-.timer > .time > .text {
+.timer > .time .text {
   position: relative;
 }
 
-.timer > .time > .progressBar {
-  background-color: #CDE4C2;
+.timer > .time .progressBar {
+  background-color: darkgrey;
   position: absolute;
   left: 0;
   top: 0;
   height: 79px;
 }
 
-.timer > .time:hover > .progressBar {
+.timer > .time:hover .progressBar {
+  background-color: grey;
+}
+
+.timer > .time.isRunning .progressBar {
+  background-color: #CDE4C2;
+}
+
+.timer > .time.isRunning:hover .progressBar {
   background-color: #B5CEAA;
 }
 
@@ -143,18 +151,22 @@
   cursor: pointer;
 }
 
-.timer > .time.isRinging > .progressBar {
+.timer > .time.isRinging .progressBar {
   background-color: #FED5AE;
 }
 
-.timer > .time.isRinging:hover > .progressBar {
+.timer > .time.isRinging:hover .progressBar {
   background-color: #F2CAA5;
 }
 
-.timer > .edition {
+.timer > .edition.empty {
   color: #DDDDDD;
 }
 
+.timer > .edition:not(.empty) {
+  color: darkgrey;
+}
+
 .timer > button {
   width: 100px;
   font-size: 30px;