Initial commit: apps.supersamsev.ru

webroot/css/elplat.css

@@ -0,0 +1,76 @@
+.elplatQRcodeWrap {
+    padding: 20px;
+    border-radius: 8px;
+    border: 1px solid #e7e7e7;
+    width: auto;
+    display: inline-block;
+    margin-right: 1.5rem;
+    position: relative;
+}
+
+#elplatQRcode {
+    width: 300px;
+    height: 300px;
+}
+
+#elplat-payment-modal ul {
+    margin-top: 1rem;
+    padding-left: 1rem;
+}
+
+#elplat-payment-modal ul li {
+    margin-top: 0.5rem;
+    text-align: left;
+}
+
+.elplatOrderInfo {
+    flex-direction: column;
+    width: 100%;
+    justify-content: space-around;
+    display: flex;
+    align-items: center;
+}
+
+.elplatOrderInfo  > div {
+    display: flex;
+    font-weight: bold;
+    font-size: 1rem;
+}
+
+#elplat-payment-modal .modal-body button { margin-top: 0.5rem; }
+
+.elplatInfo li span { display: block; }
+
+.elplatQRcodeWrap .elplatOkIcon, .elplatQRcodeWrap .elplatFailureIcon {
+    opacity: 0;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 192px;
+    height: auto;
+    transition: all 0.5s;
+}
+.elplatQRcodeWrap .elplatOkIcon.visible, .elplatQRcodeWrap .elplatFailureIcon.visible { opacity: 1;  }
+
+.elplatQRcodeWrap .elplatOkIcon svg, .elplatQRcodeWrap .elplatFailureIcon svg {
+    background: #eee;
+    border-radius: 50%;
+}
+
+@media (max-width: 768px) {
+    #elplat-payment-modal .modal-body {
+        padding: 15px;
+    }
+
+    .elplatQRcodeWrap .elplatOkIcon, .elplatQRcodeWrap .elplatFailureIcon {
+        width: 48px;
+    }
+}
+
+
+@media (max-width: 380px) {
+    .elplatInfo li span {
+        display: inline;
+    }
+}