diff --git a/src/api/templates/card.html b/src/api/templates/card.html index aa9a03b..f32ba3f 100644 --- a/src/api/templates/card.html +++ b/src/api/templates/card.html @@ -16,7 +16,8 @@ margin:0px; } - .frame { + + /*.frame { font-size:16px; font-weight:lighter; width:800px; @@ -38,6 +39,9 @@ padding:32px; } + .product-info .visual { + background-color: #f3f3f3; padding:32px; width:256px; + } .product-info .description { padding:4px; @@ -55,7 +59,7 @@ } - .card-info .amount {text-align:right;} + .payment-amount .menu {display:none; position:absolute; z-index:9; background-color:#ffffff; padding:4px;} .menu .item {padding:4px} @@ -64,7 +68,9 @@ .email { width:100%;} .fname { width:100% } .lname {width:100%} - + */ + .card-info .amount {text-align:right;} + .payment-amount .menu {display:none; position:absolute; z-index:9; background-color:#ffffff; padding:4px;} input { height:48px; border:2px solid transparent; @@ -79,6 +85,7 @@ /*border-left: 2px solid #ff6500 ;*/ border-left: 2px solid #4682B4; } + .error { border-color: maroon; } @@ -111,6 +118,74 @@ font-weight:bold ; color:#4682B4 ; } */ + @media only screen and (max-device-width: 960px){ + body {font-size:14px; font-family:sans-serif; font-weight:lighter; line-height: 20px;} + .pane {display:grid; justify-items:center; align-items:center; height:auto;} + .frame { + display:block; + + gap:2px; + padding:4px; + + } + .product-info {display:grid; grid-template-columns: 105px auto; gap:4px; + align-items:center; + margin-bottom:2px; + + } + + .visual{ + background-color:#f3f3f3; + border:1px solid #CAD5E0; + display:grid; + align-items: center; + justify-items: left; + + + } + + .visual img {width:100px} + .card input {width:100%;} + .pay-frame {margin-top:10px;} + + + + } + + @media only screen and (min-device-width: 1024px){ + body {font-size:16px; font-family:sans-serif; font-weight:lighter; line-height: 28px;} + .pane {display:grid; justify-items:center; align-items:center; height:98%;} + .frame { + width:800px; + display:grid; + grid-template-columns: 40% auto; gap:2px; + + + } + .visual { vertical-align:middle; + display:grid; + justify-items: center; + align-items:center; + + + } + .visual img {width:110px;} + .product-info{ + display:grid; + grid-template-rows: 70% auto; gap:2px; + border-right:1px solid #CAD5E0; + padding:4px; + } + .card {padding:4px;;} + .card input {width:100%; } + .pay-frame {margin-top:30px;} + } + @media only screen and (min-device-width: 1080px){ + .-frame {width:800px} + } + @media only screen and (min-device-width: 1920px){ + } + -