Adding a progress bar to the timer time

1 files changed, 29 insertions, 14 deletions

diff --git a/design/design.css b/design/design.css
index 80a1c64..7d66650 100644
--- a/design/design.css
+++ b/design/design.css
@@ -93,7 +93,7 @@
   text-align: center;
   height: 80px;
   margin-right: 20px;
-  border-radius: 35px;
+  border-radius: 30px;
   box-shadow: 0px 4px #AAAAAA;
   border: 1px solid #DDDDDD;
 }
@@ -111,29 +111,44 @@
   box-shadow: 0px 2px #AAAAAA;
 }
 
-.timer.isRunning > :not(.remove) {
-  background-color: #CDE4C2;
+.timer > button.name {
+  width: 300px;
+  border-radius: 0px;
 }
 
-.timer.isRunning > :not(.remove):hover {
-  background-color: #BAD4AD;
+.timer > .time {
+  width: 200px;
+  cursor: text;
+  position: relative;
+  border-radius: 0px;
 }
 
-.timer.isRinging > :not(.remove) {
-  background-color: #FED5AE;
+.timer > .time > .text {
+  position: relative;
 }
 
-.timer.isRinging > :not(.remove):hover {
-  background-color: #F2CAA5;
+.timer > .time > .progressBar {
+  background-color: #CDE4C2;
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 79px;
 }
 
-.timer > button.name {
-  width: 300px;
+.timer > .time:hover > .progressBar {
+  background-color: #B5CEAA;
 }
 
-.timer > .time {
-  width: 200px;
-  cursor: text;
+.timer > .time.isRinging:hover {
+  cursor: pointer;
+}
+
+.timer > .time.isRinging > .progressBar {
+  background-color: #FED5AE;
+}
+
+.timer > .time.isRinging:hover > .progressBar {
+  background-color: #F2CAA5;
 }
 
 .timer > .edition {