From 48999834d0396f3ea7af0f3679157a3781e92a39 Mon Sep 17 00:00:00 2001
From: Abhas Bhattacharya <abhasbhattacharya2@gmail.com>
Date: Mon, 12 Mar 2018 02:09:59 +0530
Subject: [PATCH] OpenToday - css - transparent text, answer positioning +
 utils

Make text transparent white, so that status color bleeds through
Complete positioning of answer boolean and holiday name parts
Add and move floatfix to utils css
---
 src/Components/OpenToday/Component.css | 49 +++++++++++++++-----------
 src/Utils/utils.css                    |  5 +++
 2 files changed, 34 insertions(+), 20 deletions(-)
 create mode 100644 src/Utils/utils.css

diff --git a/src/Components/OpenToday/Component.css b/src/Components/OpenToday/Component.css
index 3848858..143dbf5 100644
--- a/src/Components/OpenToday/Component.css
+++ b/src/Components/OpenToday/Component.css
@@ -1,8 +1,9 @@
+@import "../../Utils/utils.css";
 .OpenToday {
     width: 100%;
     height: 100%;
-
     font-size: 4em;
+    background-color: rgba(0, 0, 0, 0.75);
 }
 
 .OpenToday.green {
@@ -16,39 +17,47 @@
 .OpenToday .question, .OpenToday .answerComposite {
     padding-top: 5%;
     padding-bottom: 5%;
-
-    color: whitesmoke;
+    color: rgba(255, 255, 255, 0.75);
 }
 
 .OpenToday .question {
     float: left;
-
     width: 40%;
     height: 100%;
-
-    padding-left: 4%;
-    padding-right: 4%;
-
     position: relative;
-
-    border-right: 5px solid white;
+    border-right: 5px solid rgba(255, 255, 255, 0.5);
 }
 
 .OpenToday .question span {
-  display: block;
-  position: absolute;
-
-  text-align: right;
-
-  top: 40%;
-  right: 1em;
-  transform: translate(0%, -50%);
+    display: block;
+    position: absolute;
+    text-align: right;
+    top: 50%;
+    right: 0.5em;
+    transform: translate(0%, -50%);
 }
 
-
 .OpenToday .answerComposite {
     float: right;
-
     width: 60%;
     height: 100%;
+    position: relative;
+}
+
+.OpenToday .answerComposite-inner {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+}
+
+.OpenToday .answerComposite .answerBoolean {
+    color: rgba(255, 255, 255, 0.85);
+}
+
+.OpenToday .answerComposite .answerReason {
+    opacity: 0.85;
+
+    font-size: 0.85em;
 }
\ No newline at end of file
diff --git a/src/Utils/utils.css b/src/Utils/utils.css
new file mode 100644
index 0000000..8ff9a8f
--- /dev/null
+++ b/src/Utils/utils.css
@@ -0,0 +1,5 @@
+.float-group:after {
+  content: "";
+  display: table;
+  clear: both;
+}
\ No newline at end of file