added "or" line and javascript switching for currency and frequency

[people/shoehn/ipfire.org.git] / static / css / style.css

diff --git a/static/css/style.css b/static/css/style.css
index 4f3aa67a138fd65d52ee76c4634bddc6a1bbb2e8..3f3942f3d57a3d8a16de15d43df1b0126c6b7764 100644 (file)
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -5331,7 +5331,9 @@ input.radiobtn:not(old):checked + label {
 .inline-card {
   border-radius: 8px;
   background-color: #eceff1;
 .inline-card {
   border-radius: 8px;
   background-color: #eceff1;

-  padding: 24px; }
+  padding: 24px;
+  position: relative;
+  padding: 24px 20px; }

 
 label.amount {
   width: 84px;
 
 label.amount {
   width: 84px;


@@ -5342,9 +5344,9 @@ label.amount {
   box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 1px 2px 0 rgba(0, 0, 0, 0.23);
   font-size: 20px;
   color: #42a5f5;
   box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 1px 2px 0 rgba(0, 0, 0, 0.23);
   font-size: 20px;
   color: #42a5f5;

-  text-align: left;
+  text-align: center;

   margin: 0 8px 16px 8px;
   margin: 0 8px 16px 8px;

-  padding-top: 8px; }
+  padding: 8px 0 0 0; }

 
 input[name=amount] {
   display: none; }
 
 input[name=amount] {
   display: none; }


@@ -5353,6 +5355,28 @@ input[name=amount]:checked + label {
   background-image: linear-gradient(120deg, #4fc3f7, #1976d2);
   color: white; }
 
   background-image: linear-gradient(120deg, #4fc3f7, #1976d2);
   color: white; }
 

+.or {
+  display: block;
+  height: 200px;
+  width: 1px;
+  border: 1px solid rgba(38, 50, 56, 0.3);
+  position: absolute;
+  left: 350px;
+  top: 12px; }
+  .or:before {
+    content: "OR";
+    font-family: 'Ubuntu', sans-serif;
+    font-size: 16px;
+    font-weight: 500;
+    color: rgba(38, 50, 56, 0.3);
+    background-color: #eceff1;
+    display: block;
+    position: absolute;
+    top: 12px;
+    left: -12px;
+    width: 24px;
+    height: 24px; }
+

 body {
   min-height: 100vh;
   display: flex;
 body {
   min-height: 100vh;
   display: flex;