Amelioring UX

1 files changed, 58 insertions, 74 deletions

diff --git a/design/design.css b/design/design.css
index 7d9cd39..7602c7d 100644
--- a/design/design.css
+++ b/design/design.css
@@ -1,8 +1,13 @@
+/**************/
+/* Header bar */
+/**************/
+
 .headerBar {
   background-color: #111111;
-  margin-bottom: 40px;
   font-size: 70px;
   box-shadow: 0px 2px 2px grey;
+  min-width: 1020px;
+  margin-bottom: 2px;
 }
 
 .headerBar > button {
@@ -36,16 +41,6 @@
   border-color: #CCCC88;
 }
 
-.timers {
-  text-align: center;
-  font-size: 30px;
-}
-
-.timer {
-  line-height: 80px;
-  height: 80px;
-}
-
 .headerBar > button {
   background-color: #111111;
   color: white;
@@ -77,111 +72,100 @@
   border-color: #CCCC88;
 }
 
+/**********/
+/* Timers */
+/**********/
+
 .timers {
   text-align: center;
   font-size: 30px;
+  display: table;
+  table-layout: auto;
+  margin-left: auto;
+  margin-right: auto;
+  width: 1020px;
 }
 
 .timer {
-  line-height: 80px;
-  height: 80px;
+  line-height: 140px;
+  height: 140px;
+  position: relative;
+  display: table-row;
 }
 
-.block {
-  display: inline-block;
-  background-color: #EEEEEE;
-  text-align: center;
-  height: 80px;
-  margin-right: 20px;
-  border-radius: 30px;
-  box-shadow: 0px 4px #AAAAAA;
-  border: 1px solid #DDDDDD;
+.timer:nth-child(even) {
+  background-color: #FAFAFA;
 }
 
-.block:hover {
-  background-color: #E6E6E6;
+.timer.isRinging:hover {
+  background-color: #FED5AE;
 }
 
-.block:focus {
-  border: 1px solid #AAAAAA;
+.timer .name,
+.timer .time,
+.timer button {
+  display: table-cell;
 }
 
-.block:active {
-  transform: translateY(2px);
-  box-shadow: 0px 2px #AAAAAA;
+.timer button {
+  background-color: rgba(0, 0, 0, 0);
+  border: none;
+  width: 140px;
+  height: 140px;
+  font-size: 35px;
+  padding: 0px;
+  position: relative;
 }
 
-.timer > .name {
+.timer button.remove {
+  color: #AA2222;
+}
+
+.timer:only-of-type button.remove {
+  color: grey;
+}
+
+.timer .name {
   width: 400px;
   letter-spacing: 2px;
   cursor: text;
 }
 
-.timer > .time {
+.timer .time {
   width: 200px;
   letter-spacing: 2px;
   cursor: text;
-  position: relative;
   border-radius: 0px;
 }
 
-.timer > .time .text {
-  position: relative;
-}
-
-.timer > .time .progressBar {
+.timer .progressBar {
   background-color: darkgrey;
   position: absolute;
   left: 0;
-  top: 0;
-  height: 79px;
+  top: 133px;
+  height: 10px;
 }
 
-.timer > .time:hover .progressBar {
-  background-color: grey;
-}
-
-.timer > .time.isRunning .progressBar {
+.timer.isRunning .progressBar {
   background-color: #CDE4C2;
 }
 
-.timer > .time.isRunning:hover .progressBar {
-  background-color: #B5CEAA;
-}
-
-.timer > .time.isRinging:hover {
-  cursor: pointer;
-}
-
-.timer > .time.isRinging .progressBar {
+.timer.isRinging .progressBar {
   background-color: #FED5AE;
 }
 
-.timer > .time.isRinging:hover .progressBar {
-  background-color: #F2CAA5;
+.timer:hover.isRinging .progressBar {
+  top: 0px;
+  height: 143px;
+  z-index: 1;
+  opacity: 0;
+  cursor: pointer;
 }
 
-.timer > .edition.empty {
+.timer .edition.empty {
   color: #DDDDDD;
 }
 
-.timer > .edition:not(.empty) {
+.timer .edition:not(.empty) {
   color: darkgrey;
 }
-
-.timer > button {
-  width: 100px;
-  font-size: 30px;
-}
-
-.timer > button.remove {
-  color: #AA2222;
-}
-
-.timers > .timer:only-of-type > button.remove {
-  color: grey;
-}
-
-.timer:not(last-child) {
-  margin-bottom: 40px;
-}