PluginProbe
HyperPay Payments / trunk
HyperPay Payments vtrunk
6.6.0 trunk 1.7 1.8 1.8.1 1.8.2 1.8.3 1.8.4 1.8.5 1.9.5 1.9.6 1.9.7 1.9.8 1.9.9 2.0.0 2.1.0 2.2.0 2.3.0 2.3.1 2.3.2 2.3.3 3.0.0 3.0.5 4.0.0 4.0.2 All 34 releases
hyperpay-gateways / src / assets / css / style.css

style.css in HyperPay Payments trunk, at src/assets/css/style.css

284 lines 5.6 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 .HP_supported-brans-icons {
2 display: flex;
3 align-items: center;
4 float: right;
5 }
6
7 [data-action="show-initial-forms"] {
8 display: none !important;
9 }
10
11 .HP_supported-brans-icons li {
12 flex: 1
13 }
14
15 .input-error {
16 border: 2px solid !important;
17 border-radius: 4px !important;
18 border-color: #d63638 !important;
19 }
20
21 .input-error-msg {
22 color: #d63638 !important;
23 font-weight: bold;
24 }
25
26 .hyperpay_custom_style {
27 width: 400px !important;
28 height: 175px !important;
29 /* visibility: hidden !important; */
30 }
31
32 .hyperpay_custom_style~.CodeMirror {
33 width: 400px !important;
34 height: 175px !important;
35 border: #8c8f94 1px solid;
36 border-radius: 3px;
37 }
38
39 .hyperpay_gateways_logo {
40 border-radius: 3px;
41 border: #0000001e 1px solid !important;
42 margin: 0px !important;
43
44 }
45
46 .wpwl-button-brand {
47 padding: 0px !important;
48 border-radius: 40px;
49 }
50
51 .wpwl-apple-pay-button {
52 -webkit-appearance: -apple-pay-button !important;
53 }
54
55 .wpwl-brand-ZOODPAY {
56 background: url(../images/continue-button.png);
57 background-size: contain;
58 background-repeat: no-repeat;
59 height: 50px;
60 width: 177px;
61 }
62
63 .modal {
64 display: none;
65 /* Hidden by default */
66 position: fixed;
67 /* Stay in place */
68 z-index: 1;
69 /* Sit on top */
70 left: 0;
71 top: 0;
72 width: 100%;
73 /* Full width */
74 height: 100%;
75 /* Full height */
76 overflow: auto;
77 /* Enable scroll if needed */
78 background-color: rgb(0, 0, 0);
79 /* Fallback color */
80 background-color: rgba(0, 0, 0, 0.4);
81 /* Black w/ opacity */
82 }
83
84 /* Modal Content/Box */
85 .modal-content {
86 background-color: #fefefe;
87 margin: 15% auto;
88 /* 15% from the top and centered */
89 padding: 20px;
90 border: 1px solid #888;
91 width: 80%;
92 /* Could be more or less, depending on screen size */
93 max-width: 550px;
94 ;
95 }
96
97 /* The Close Button */
98 .close {
99 color: #aaa;
100 float: right;
101 font-size: 28px;
102 font-weight: bold;
103 }
104
105 .close:hover,
106 .close:focus {
107 color: black;
108 text-decoration: none;
109 cursor: pointer;
110 }
111
112 .terms_zoodpay {
113 padding: 15px 20px;
114 }
115
116 .wpwl-control-iframe {
117 direction: ltr !important;
118 }
119
120 #payment .payment_methods li img {
121 height: 2em !important;
122 max-height: 2.5em !important;
123 }
124
125 .customLabel {
126 display: flex;
127 align-items: flex-start;
128 gap: 10px;
129 margin: 12px 0;
130 font-size: 16px;
131 line-height: 1.5;
132 color: #0a3254;
133 }
134
135 .wpwl-group-registration.wpwl-selected .wpwl-wrapper.wpwl-wrapper-registration.wpwl-wrapper-registration-cvv {
136 border: none !important;
137 }
138
139 .customLabel input[type="checkbox"] {
140 width: 18px;
141 height: 18px;
142 accent-color: #ff4e00;
143 /* HyperPay orange */
144 margin-top: 3px;
145 cursor: pointer;
146 }
147
148 .customLabel label {
149 cursor: pointer;
150 }
151
152
153 .wpwl-group-registration {
154 border: 2px solid #dcdcdc;
155 border-radius: 12px;
156 padding: 14px 16px;
157 margin-bottom: 14px;
158 transition: all 0.2s ease;
159 cursor: pointer;
160 }
161
162 .wpwl-group-registration.wpwl-selected {
163 border-color: #ff4e00;
164 outline: none;
165 }
166
167 .wpwl-form.wpwl-form-registrations.wpwl-form-has-inputs.wpwl-clearfix {
168 margin: 0 !important;
169 }
170
171
172 #wpwl-registrations {
173 background: #fff;
174 border-radius: 14px;
175 padding: 20px;
176 /*box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);*/
177 font-family: "Inter", sans-serif;
178 color: #2b2b2b;
179 }
180
181 .wpwl-form-registrations {
182 box-shadow: none !important;
183 }
184
185
186 .wpwl-container {
187 display: flex;
188 align-items: center;
189 justify-content: space-between;
190 }
191
192 .wpwl-container input[type="radio"] {
193 accent-color: #ff4e00;
194 width: 18px;
195 height: 18px;
196 margin-right: 12px;
197 }
198
199 .card-info {
200 display: flex;
201 align-items: center;
202 flex: 1;
203 gap: 10px;
204 font-size: 15px;
205 color: #555;
206 }
207
208 .card-icon {
209 font-size: 18px;
210 }
211
212 .card-type {
213 font-weight: 600;
214 color: #222;
215 }
216
217 .wpwl-group-registration.wpwl-selected .wpwl-wrapper.wpwl-wrapper-registration.wpwl-wrapper-registration-cvv {
218 border: 2px solid #dcdcdc;
219 border-radius: 10px;
220 font-size: 15px;
221 text-align: center;
222 transition: border-color 0.2s ease;
223 }
224
225
226 #wpwl-registrations button[type="submit"].wpwl-button-pay {
227 background: #ff4e00;
228 color: #fff;
229 border: none;
230 width: 100%;
231 padding: 14px;
232 border-radius: 12px;
233 font-weight: 600;
234 font-size: 16px;
235 cursor: pointer;
236 display: flex;
237 align-items: center;
238 justify-content: center;
239 gap: 8px;
240 transition: background 0.2s ease;
241 }
242
243 #wpwl-registrations button[type="submit"].wpwl-button-pay:hover {
244 background: #e64500;
245 }
246
247 #wpwl-registrations button[type="submit"].wpwl-button-pay::before {
248 content: "🔒 ";
249 /* Inserts the lock emoji */
250 display: inline-block;
251 /* Ensures proper spacing */
252 margin-right: 5px;
253 /* Adds space between the icon and text */
254 }
255
256 .wpwl-container input[type="radio"] {
257 accent-color: #ff4e00;
258 width: 18px;
259 height: 18px;
260 margin-right: 12px;
261 /* margin-top: 10px; */
262 margin: 0px;
263 position: absolute;
264 top: 50%;
265 transform: translateY(-50%);
266 }
267
268 .wpwl-control.wpwl-control-iframe.wpwl-control-cvv {
269 border-color: #ccc !important;
270 }
271
272 @media only screen and (max-width: 782px) {
273 .hyperpay_custom_style {
274 width: 100% !important;
275 }
276
277 .hyperpay_custom_style~.CodeMirror {
278 width: 100% !important;
279 }
280 }
281
282 .wpwl-wrapper-registration-brand, .add_new_card_brand {
283 margin-left: 20px;
284 }