Fix frontend css

BitCannaGlobal · Nov 9, 2022 · 11b4d9a · 11b4d9a
1 parent fdff5f9
commit 11b4d9a
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 31 deletions.
diff --git a/css/cosmos.css b/css/cosmos.css
@@ -3,7 +3,7 @@
  * included in this file.
  */
 /* Float four columns side by side */
- 
+
 
 .column {
   float: left;
@@ -21,21 +21,24 @@
 }
 
 /* Style the counter cards */
-.card {
+.cosmos-card .card {
   /*box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);*/
   padding: 16px;
   /*border-radius: 5px;*/
 }
 
 .timerCard {
   width: 540px;
+  max-width: 100%;
   margin: 0 auto;
   font-family: Poppins, sans-serif;
   z-index: auto;
+  margin-top: 10px;
 }
 
 .cosmos-card {
   width: 540px;
+  max-width: 100%;
   height: min-content;
   background-color: white; /*3*/
   box-shadow: 0px 0px 4px #999; /*4*/
@@ -66,8 +69,6 @@
   border-radius: 5px;
   background: #FFFFFF 0% 0% no-repeat padding-box;
   margin: 0 auto;
-  border-radius 5px;
-  opacity 1;
   overflow:hidden;
 
 }
@@ -161,33 +162,33 @@
   float:left;
   margin: 0 10px 0px;
 }
-.cosmos-card-amount {
+.cosmos-card .cosmos-card-amount {
   display: flex;
   justify-content: center;
   color: #3C3C3C;
   font-size: 1rem;
   font-weight: lighter;
 }
-.btnText {
+.cosmos-card .btnText {
     width: 20%;
     vertical-align: middle; 
     /*display: inline-block;*/
 }
 /* page */
-svg {
+.cosmos-card svg {
   display:inline-flex;
   vertical-align: middle;
 }
 
-.right {  
+.cosmos-card .right {
   text-align: end;
   position: relative;
 }
 
-.input-wrapper {
+.cosmos-card .input-wrapper {
   position: relative
 }
-.input-wrapper:after {
+.cosmos-card .input-wrapper:after {
   font-family: 'FontAwesome';
   content: '\f24d';
   position: absolute;
@@ -196,26 +197,25 @@ svg {
 }
 
 
-.box {
-  position: absolute;
-  width: 450px;
+.cosmos-card .box {
+  margin-bottom: -2.2em;
 }
 
-.box select {
+.cosmos-card .box select {
   background-color: white;
   color: black;
   padding: 12px;
   width: 410px;
+  max-width: 100%;
   border: 2px solid #f3f3f3;
-  font-size: 20px;
   /*box-shadow: 0 5px 35px rgba(0, 0, 0, 0.2);*/
   -webkit-appearance: button;
   appearance: button;
   outline: none;
   border-radius: 5px;
 }
 
-.box select option {
+.cosmos-card .box select option {
   background-repeat:no-repeat;
   background-position:bottom left;
   padding-left:30px;
@@ -236,19 +236,20 @@ svg {
   pointer-events: none;
 } */
 
-.box:hover::before {
+.cosmos-card .box:hover::before {
   color: black;
   background-color: rgba(255, 255, 255, 0.2);
 }
 
-.box select option {
+.cosmos-card .box select option {
   padding: 30px;
 
 }
-.buttonSend {
-  border: none;
+.cosmos-card .buttonSend {
   color: white;
-  padding: 10px 187px;
+  padding: 10px;
+  width: 410px;
+  max-width: 100%;
   text-align: center;
   text-decoration: none;
   display: inline-block;
@@ -260,8 +261,7 @@ svg {
   border: 2px solid #3CC194; 
   border-radius: 5px;
 }
-.buttonRetry {
-  border: none;
+.cosmos-card .buttonRetry {
   color: white;
   padding: 10px 180px;
   text-align: center;
@@ -275,8 +275,7 @@ svg {
   border: 2px solid #3CC194; 
   border-radius: 5px;
 }
-.buttonCancel {
-  border: none;
+.cosmos-card .buttonCancel {
   color: white;
   padding: 19px 100px;
   text-align: center;
@@ -289,16 +288,40 @@ svg {
   color: black; 
   border: 2px solid red;
 
-} 
-.cancelTx {
+}
+.cosmos-card .cancelTx {
   border: none;
   padding: 10px;
   text-align: center;
+}
 
-
-} 
+.cosmos-card #finalAmount, .cosmos-card h5 {
+  margin: 4px 0;
+}
+.cosmos-card p {
+  padding: 0;
+  margin: 0;
+  margin-bottom: 6px;
+  font-size: 1em;
+}
+#cosmos-footer-text {
+  margin: 10px auto 0 auto;
+  font-size: 18px;
+  width: 540px;
+  max-width: 100%;
+  text-align: center;
+}
+.cosmos-card .buttonSend {
+  margin-top: 15px;
+}
+.cosmos-card button {
+  font-weight: bold;
+}
+.cosmos-card #cancelTx1 h5 {
+  font-weight: normal;
+}
 
-.loader {
+.cosmos-card .loader {
   border: 16px solid #f3f3f3; /* Light grey */
   border-top: 16px solid green; /* Blue */
   border-radius: 50%;
@@ -307,6 +330,12 @@ svg {
   animation: spin 1s linear infinite;
 }
 
+@media (max-width: 480px) {
+  .cosmos-content {
+    padding: 2em 1em;
+  }
+}
+
 @keyframes spin {
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }

diff --git a/views/templates/front/payment_return.tpl b/views/templates/front/payment_return.tpl
@@ -147,8 +147,10 @@
 <div class="timerCard" id="timer">
 Time left: <b><span id="minutes"></span>:<span id="seconds"></span></b>
 </div>
-
 
+     <div id="cosmos-footer-text">
+         <div>Powered by <b>BitCanna</b></div>
+     </div>