Adding a Ringing state that animate the color, does not ring a sound for the moment

1 files changed, 19 insertions, 4 deletions

diff --git a/design/design.css b/design/design.css
index ac34f6f..257a017 100644
--- a/design/design.css
+++ b/design/design.css
@@ -5,15 +5,17 @@
   height: 150px;
   line-height: 150px;
   font-size: 70px;
-  padding-left: 50px;
 }
 
-.title > h1 {
+.title > button.title {
   letter-spacing: 10px;
-  float: left;
+  border: none;
+  padding-left: 50px;
+  padding-right: 50px;
+  font-family: "DejaVu Serif";
 }
 
-.title > button {
+.title > button.addTimer {
   float: right;
   color: white;
   border: 5px solid white;
@@ -43,6 +45,19 @@
   border-radius: 2px;
 }
 
+@keyframes ringing {
+  30% {
+    background-color: #FED5AE;
+  }
+  100% {
+    background-color: #FED5AE;
+  }
+}
+
+.timer.isRinging > :not(.remove) {
+  animation: ringing 2s linear infinite alternate;
+}
+
 .timer.isRunning > .time {
   color: #33AA22;
 }