diff --git a/src/Components/IsNiftyOpenApp/App.css b/src/Components/IsNiftyOpenApp/App.css index ef5e619..64d6e6e 100644 --- a/src/Components/IsNiftyOpenApp/App.css +++ b/src/Components/IsNiftyOpenApp/App.css @@ -53,7 +53,7 @@ height: 100%; } -.App .top-bar { +.App .top-bar>*, .App .top-bar svg { z-index: 1; } @@ -61,17 +61,15 @@ width: 100%; height: 80vh; position: relative; - z-index: -1; } .App .lower-half { width: 100%; height: 20vh; - - z-index: -1; } -.App .OpenXDayMini, .App .NextOpenCloseMini { +.App .OpenXDayMini, +.App .NextOpenCloseMini { border-top: 5px solid rgba(255, 255, 255, 0.6); } @@ -107,16 +105,3 @@ width: 100%; transform: translate(-50%, 0); } - -.disclaimer { - position: absolute; - bottom: 0; - left: 0; - right: 0; - margin: 0 1em; - padding: 0.5em; - font-size: .6em; - background-color: rgba(255,255,255,0.75); - border-radius: .5em; - text-align: center; -} \ No newline at end of file diff --git a/src/Components/IsNiftyOpenApp/App.tsx b/src/Components/IsNiftyOpenApp/App.tsx index 86d6c17..4edba3a 100644 --- a/src/Components/IsNiftyOpenApp/App.tsx +++ b/src/Components/IsNiftyOpenApp/App.tsx @@ -115,11 +115,6 @@ class IsNiftyOpenApp extends React.Component { /> -
- {`This data is taken from Karanataka ETV Flipkart holidays list, - but doesn't include optional holidays. - There is no gurantee that this data is correct or will be kept updated.`} -
); } diff --git a/src/Components/OpenXDay/Component.css b/src/Components/OpenXDay/Component.css index 012c5ae..48442b8 100644 --- a/src/Components/OpenXDay/Component.css +++ b/src/Components/OpenXDay/Component.css @@ -1,64 +1,81 @@ @import "../../Utils/utils.css"; .OpenXDay { - width: 100%; - height: 100%; - font-size: 4em; - background-color: rgba(0, 0, 0, 0.75); + width: 100%; + height: 100%; + font-size: 4em; + background-color: rgba(0, 0, 0, 0.75); } .OpenXDay.green { - background-color: #2ECC40; + background-color: #2ecc40; } .OpenXDay.red { - background-color: #FF4136; + background-color: #ff4136; } -.OpenXDay .question, .OpenXDay .answerComposite { - padding-top: 5%; - padding-bottom: 5%; - color: rgba(255, 255, 255, 0.75); +.OpenXDay .question, +.OpenXDay .answerComposite { + padding-top: 5%; + padding-bottom: 5%; + color: rgba(255, 255, 255, 0.75); } .OpenXDay .question { - float: left; - width: 50%; - height: 100%; - position: relative; - /* border-right: 5px solid rgba(255, 255, 255, 0.5); */ + float: left; + width: 50%; + height: 100%; + position: relative; + /* border-right: 5px solid rgba(255, 255, 255, 0.5); */ } -.OpenXDay .question span { - display: block; - position: absolute; - text-align: center; - top: 50%; - left: 0.5em; - transform: translate(0%, -50%); +.OpenXDay .question .question-text { + display: block; + position: absolute; + text-align: center; + top: 50%; + left: 0.5em; + transform: translate(0%, -50%); +} + +.OpenXDay .disclaimer { + visibility: hidden; + position: absolute; + bottom: 100%; + width: 90vw; + padding: 0.5em; + font-size: 0.25em; + background-color: rgb(64, 64, 64); + border-radius: 0.2em; + text-align: left; +} + +.OpenXDay .company-name:hover .disclaimer { + visibility: visible; } .OpenXDay .answerComposite { - float: right; - width: 50%; - height: 100%; - position: relative; + float: right; + width: 50%; + height: 100%; + position: relative; } .OpenXDay .answerComposite-inner { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - text-align: center; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; } .OpenXDay .answerComposite .answerBoolean { - color: rgba(255, 255, 255, 0.85); + color: rgba(255, 255, 255, 0.85); } .OpenXDay .answerComposite .answerReason { - opacity: 0.85; + opacity: 0.85; - font-size: 0.85em; -} \ No newline at end of file + font-size: 0.85em; +} diff --git a/src/Components/OpenXDay/Component.tsx b/src/Components/OpenXDay/Component.tsx index 7856fa7..3063904 100644 --- a/src/Components/OpenXDay/Component.tsx +++ b/src/Components/OpenXDay/Component.tsx @@ -43,8 +43,17 @@ export class OpenXDay extends React.Component { return (
- - Is Flipkart {this.question} today? + + Is  + + Flipkart +
+ {`This data is taken from Karanataka ETV Flipkart holidays list, + but doesn't include optional holidays. + There is no gurantee that this data is correct or will be kept updated.`} +
+
+  {this.question} today?