| @@ -1,4 +1,319 @@ | ||
| 1 | +.merchant-pcr-app * { | |
| 2 | + outline: none; | |
| 3 | + border: none; | |
| 4 | + -webkit-box-sizing: border-box; | |
| 5 | + box-sizing: border-box; | |
| 6 | +} | |
| 7 | + | |
| 8 | +.merchant-pcr-app input:focus, | |
| 9 | +.merchant-pcr-app input.pcr-active, | |
| 10 | +.merchant-pcr-app button:focus, | |
| 11 | +.merchant-pcr-app button.pcr-active { | |
| 12 | + -webkit-box-shadow: none; | |
| 13 | + box-shadow: none; | |
| 14 | +} | |
| 15 | + | |
| 16 | +.merchant-pcr-app .pcr-palette:focus, | |
| 17 | +.merchant-pcr-app .pcr-slider:focus { | |
| 18 | + -webkit-box-shadow: none; | |
| 19 | + box-shadow: none; | |
| 20 | +} | |
| 21 | + | |
| 22 | +.merchant-pcr-app { | |
| 23 | + position: fixed; | |
| 24 | + z-index: 999999; | |
| 25 | + top: 0; | |
| 26 | + left: 0; | |
| 27 | + display: -webkit-box; | |
| 28 | + display: -ms-flexbox; | |
| 29 | + display: flex; | |
| 30 | + -webkit-box-orient: vertical; | |
| 31 | + -webkit-box-direction: normal; | |
| 32 | + -ms-flex-direction: column; | |
| 33 | + flex-direction: column; | |
| 34 | + border-radius: 0.1em; | |
| 35 | + opacity: 0; | |
| 36 | + visibility: hidden; | |
| 37 | + -webkit-transition: opacity 0.2s, visibility 0s 0.2s; | |
| 38 | + transition: opacity 0.2s, visibility 0s 0.2s; | |
| 39 | + -webkit-box-shadow: 0 0.15em 1.5em 0 rgba(0, 0, 0, 0.1), 0 0 1em 0 rgba(0, 0, 0, 0.03); | |
| 40 | + box-shadow: 0 0.15em 1.5em 0 rgba(0, 0, 0, 0.1), 0 0 1em 0 rgba(0, 0, 0, 0.03); | |
| 41 | + background: #fff; | |
| 42 | +} | |
| 43 | + | |
| 44 | +.merchant-pcr-app.visible { | |
| 45 | + visibility: visible; | |
| 46 | + opacity: 1; | |
| 47 | + -webkit-transition: opacity 0.2s; | |
| 48 | + transition: opacity 0.2s; | |
| 49 | +} | |
| 50 | + | |
| 51 | +.merchant-pcr-app .pcr-swatches { | |
| 52 | + display: -webkit-box; | |
| 53 | + display: -ms-flexbox; | |
| 54 | + display: flex; | |
| 55 | + -webkit-box-pack: justify; | |
| 56 | + -ms-flex-pack: justify; | |
| 57 | + justify-content: space-between; | |
| 58 | +} | |
| 59 | + | |
| 60 | +.merchant-pcr-app .pcr-swatches > button { | |
| 61 | + cursor: pointer; | |
| 62 | + font-size: 1em; | |
| 63 | + position: relative; | |
| 64 | + z-index: 1; | |
| 65 | + width: 20px; | |
| 66 | + height: 20px; | |
| 67 | + margin: 0; | |
| 68 | + padding: 0; | |
| 69 | + background: none; | |
| 70 | +} | |
| 71 | + | |
| 72 | +.merchant-pcr-app .pcr-swatches > button::before { | |
| 73 | + position: absolute; | |
| 74 | + content: ""; | |
| 75 | + top: 0; | |
| 76 | + left: 0; | |
| 77 | + bottom: 0; | |
| 78 | + right: 0; | |
| 79 | + background-image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>'); | |
| 80 | + background-size: 6px; | |
| 81 | + border-radius: 20px; | |
| 82 | + border: 1px solid transparent; | |
| 83 | + z-index: -1; | |
| 84 | +} | |
| 85 | + | |
| 86 | +.merchant-pcr-app .pcr-swatches > button::after { | |
| 87 | + content: ""; | |
| 88 | + position: absolute; | |
| 89 | + z-index: 1; | |
| 90 | + top: 0; | |
| 91 | + left: 0; | |
| 92 | + right: 0; | |
| 93 | + bottom: 0; | |
| 94 | + border-radius: 20px; | |
| 95 | + border: 1px solid rgba(0, 0, 0, 0.3); | |
| 96 | + background: var(--pcr-color); | |
| 97 | +} | |
| 98 | + | |
| 99 | +.merchant-pcr-app .pcr-interaction { | |
| 100 | + display: -webkit-box; | |
| 101 | + display: -ms-flexbox; | |
| 102 | + display: flex; | |
| 103 | + grid-gap: 5px; | |
| 104 | +} | |
| 105 | + | |
| 106 | +.merchant-pcr-app .pcr-interaction input { | |
| 107 | + font-size: 11px; | |
| 108 | + border-radius: 3px; | |
| 109 | +} | |
| 110 | +.merchant-pcr-app .pcr-interaction input:focus { | |
| 111 | + border-color: #3858E9; | |
| 112 | +} | |
| 113 | + | |
| 114 | +.merchant-pcr-app .pcr-interaction .pcr-result { | |
| 115 | + -webkit-box-flex: 1; | |
| 116 | + -ms-flex: 1; | |
| 117 | + flex: 1; | |
| 118 | + margin: 0; | |
| 119 | + width: 100%; | |
| 120 | + max-width: 100%; | |
| 121 | +} | |
| 122 | + | |
| 123 | +.merchant-pcr-app .pcr-interaction .pcr-clear { | |
| 124 | + cursor: pointer; | |
| 125 | + margin: 0; | |
| 126 | + padding: 0 10px; | |
| 127 | + border-radius: 3px; | |
| 128 | + color: #fff; | |
| 129 | + background-color: #3858E9; | |
| 130 | + text-transform: uppercase; | |
| 131 | +} | |
| 132 | + | |
| 133 | +.merchant-pcr-app .pcr-selection .pcr-picker { | |
| 134 | + -webkit-user-select: none; | |
| 135 | + -moz-user-select: none; | |
| 136 | + -ms-user-select: none; | |
| 137 | + user-select: none; | |
| 138 | + position: absolute; | |
| 139 | + height: 16px; | |
| 140 | + width: 16px; | |
| 141 | + border-radius: 16px; | |
| 142 | + background-color: #fff !important; | |
| 143 | + -webkit-box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.2); | |
| 144 | + box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.2); | |
| 145 | +} | |
| 146 | + | |
| 147 | +.merchant-pcr-app .pcr-selection .pcr-color-palette, | |
| 148 | +.merchant-pcr-app .pcr-selection .pcr-color-chooser, | |
| 149 | +.merchant-pcr-app .pcr-selection .pcr-color-opacity { | |
| 150 | + -webkit-user-select: none; | |
| 151 | + -moz-user-select: none; | |
| 152 | + -ms-user-select: none; | |
| 153 | + user-select: none; | |
| 154 | + position: relative; | |
| 155 | + display: -webkit-box; | |
| 156 | + display: -ms-flexbox; | |
| 157 | + display: flex; | |
| 158 | + -webkit-box-orient: vertical; | |
| 159 | + -webkit-box-direction: normal; | |
| 160 | + -ms-flex-direction: column; | |
| 161 | + flex-direction: column; | |
| 162 | + cursor: -webkit-grab; | |
| 163 | + cursor: grab; | |
| 164 | +} | |
| 165 | + | |
| 166 | +.merchant-pcr-app .pcr-selection .pcr-color-palette:active, | |
| 167 | +.merchant-pcr-app .pcr-selection .pcr-color-chooser:active, | |
| 168 | +.merchant-pcr-app .pcr-selection .pcr-color-opacity:active { | |
| 169 | + cursor: -webkit-grabbing; | |
| 170 | + cursor: grabbing; | |
| 171 | +} | |
| 172 | + | |
| 173 | +.merchant-pcr-app[data-theme=merchant] { | |
| 174 | + width: 250px; | |
| 175 | + max-width: 95vw; | |
| 176 | + padding: 10px; | |
| 177 | + -webkit-box-sizing: border-box; | |
| 178 | + box-sizing: border-box; | |
| 179 | + display: -webkit-box; | |
| 180 | + display: -ms-flexbox; | |
| 181 | + display: flex; | |
| 182 | + grid-gap: 10px; | |
| 183 | + -webkit-box-orient: vertical; | |
| 184 | + -webkit-box-direction: normal; | |
| 185 | + -ms-flex-direction: column; | |
| 186 | + flex-direction: column; | |
| 187 | +} | |
| 188 | + | |
| 189 | +.merchant-pcr-app[data-theme=merchant] .pcr-selection { | |
| 190 | + display: grid; | |
| 191 | + grid-gap: 10px; | |
| 192 | + grid-template-columns: 1fr 4fr; | |
| 193 | + grid-template-rows: 5fr auto auto; | |
| 194 | + -webkit-box-align: center; | |
| 195 | + -ms-flex-align: center; | |
| 196 | + align-items: center; | |
| 197 | + height: 150px; | |
| 198 | + width: 100%; | |
| 199 | + align-self: flex-start; | |
| 200 | +} | |
| 201 | + | |
| 202 | +.merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-preview { | |
| 203 | + grid-area: 2/1/4/1; | |
| 204 | + height: 100%; | |
| 205 | + width: 100%; | |
| 206 | + display: -webkit-box; | |
| 207 | + display: -ms-flexbox; | |
| 208 | + display: flex; | |
| 209 | + -webkit-box-align: center; | |
| 210 | + -ms-flex-align: center; | |
| 211 | + align-items: center; | |
| 212 | + -webkit-box-pack: center; | |
| 213 | + -ms-flex-pack: center; | |
| 214 | + justify-content: center; | |
| 215 | +} | |
| 216 | + | |
| 217 | +.merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-preview .pcr-last-color { | |
| 218 | + display: none; | |
| 219 | +} | |
| 220 | + | |
| 221 | +.merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-preview .pcr-current-color { | |
| 222 | + position: relative; | |
| 223 | + width: 32px; | |
| 224 | + height: 32px; | |
| 225 | + border-radius: 32px; | |
| 226 | + overflow: hidden; | |
| 227 | + border: 1px solid rgba(0, 0, 0, 0.3); | |
| 228 | + background-color: var(--pcr-color); | |
| 229 | +} | |
| 230 | + | |
| 231 | +.merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-preview .pcr-current-color::before { | |
| 232 | + position: absolute; | |
| 233 | + content: ""; | |
| 234 | + top: 0; | |
| 235 | + left: 0; | |
| 236 | + width: 100%; | |
| 237 | + height: 100%; | |
| 238 | + background: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>'); | |
| 239 | + background-size: 6px; | |
| 240 | + border-radius: 100%; | |
| 241 | + z-index: -1; | |
| 242 | +} | |
| 243 | + | |
| 244 | +.merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-palette { | |
| 245 | + grid-area: 1/1/2/3; | |
| 246 | + width: 100%; | |
| 247 | + height: 100%; | |
| 248 | + z-index: 1; | |
| 249 | +} | |
| 250 | + | |
| 251 | +.merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-palette .pcr-picker { | |
| 252 | + width: 18px; | |
| 253 | + height: 18px; | |
| 254 | + border: 2px solid #fff; | |
| 255 | + -webkit-box-shadow: 0 0 1px 2px #000, inset 0 0 1px 1px #000; | |
| 256 | + box-shadow: 0 0 1px 2px #000, inset 0 0 1px 1px #000; | |
| 257 | + background-color: transparent !important; | |
| 258 | +} | |
| 259 | + | |
| 260 | +.merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-palette .pcr-palette { | |
| 261 | + width: 100%; | |
| 262 | + height: 100%; | |
| 263 | +} | |
| 264 | + | |
| 265 | +.merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-palette .pcr-palette::before { | |
| 266 | + position: absolute; | |
| 267 | + content: ""; | |
| 268 | + top: 0; | |
| 269 | + left: 0; | |
| 270 | + width: 100%; | |
| 271 | + height: 100%; | |
| 272 | + background: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>'); | |
| 273 | + background-size: 8px; | |
| 274 | + z-index: -1; | |
| 275 | +} | |
| 276 | + | |
| 277 | +.merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-chooser { | |
| 278 | + grid-area: 2/2/2/2; | |
| 279 | +} | |
| 280 | + | |
| 281 | +.merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-opacity { | |
| 282 | + grid-area: 3/2/3/2; | |
| 283 | +} | |
| 284 | + | |
| 285 | +.merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-chooser, | |
| 286 | +.merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-opacity { | |
| 287 | + height: 12px; | |
| 288 | + margin-right: 10px; | |
| 289 | +} | |
| 290 | + | |
| 291 | +.merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-chooser .pcr-picker, | |
| 292 | +.merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-opacity .pcr-picker { | |
| 293 | + top: 50%; | |
| 294 | + -webkit-transform: translateY(-50%); | |
| 295 | + transform: translateY(-50%); | |
| 296 | +} | |
| 297 | + | |
| 298 | +.merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-chooser .pcr-slider, | |
| 299 | +.merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-opacity .pcr-slider { | |
| 300 | + -webkit-box-flex: 1; | |
| 301 | + -ms-flex-positive: 1; | |
| 302 | + flex-grow: 1; | |
| 303 | +} | |
| 304 | + | |
| 305 | +.merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-chooser .pcr-slider { | |
| 306 | + background: -webkit-gradient(linear, left top, right top, from(red), color-stop(#ff0), color-stop(lime), color-stop(cyan), color-stop(blue), color-stop(#f0f), to(red)); | |
| 307 | + background: linear-gradient(to right, red, #ff0, lime, cyan, blue, #f0f, red); | |
| 308 | +} | |
| 309 | + | |
| 310 | +.merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-opacity .pcr-slider { | |
| 311 | + background: -webkit-gradient(linear, left top, right top, from(transparent), to(black)), url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>'); | |
| 312 | + background: linear-gradient(to right, transparent, black), url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>'); | |
| 313 | + background-size: 100%, 6px; | |
| 314 | +} | |
| 315 | + | |
| 1 | 316 | .merchant-metabox { |
| 2 | 317 | display: -webkit-box; |
| 3 | 318 | display: -ms-flexbox; |
| 4 | 319 | display: flex; |
| @@ -104,10 +419,14 @@ | ||
| 104 | 419 | display: -ms-flexbox; |
| 105 | 420 | display: flex; |
| 106 | 421 | -ms-flex-wrap: wrap; |
| 107 | 422 | flex-wrap: wrap; |
| 108 | - grid-gap: 20px; | |
| 423 | + grid-gap: 0; | |
| 109 | 424 | padding: 20px; |
| 425 | + -webkit-box-orient: vertical; | |
| 426 | + -webkit-box-direction: normal; | |
| 427 | + -ms-flex-direction: column; | |
| 428 | + flex-direction: column; | |
| 110 | 429 | } |
| 111 | 430 | .merchant-metabox-field:first-child { |
| 112 | 431 | border-top: none; |
| 113 | 432 | } |
| @@ -134,10 +453,10 @@ | ||
| 134 | 453 | flex-direction: column; |
| 135 | 454 | } |
| 136 | 455 | |
| 137 | 456 | .merchant-metabox-field-title { |
| 138 | - width: 30%; | |
| 139 | - max-width: 275px; | |
| 457 | + width: 100%; | |
| 458 | + max-width: none; | |
| 140 | 459 | display: -webkit-box; |
| 141 | 460 | display: -ms-flexbox; |
| 142 | 461 | display: flex; |
| 143 | 462 | -ms-flex-wrap: wrap; |
| @@ -146,12 +465,15 @@ | ||
| 146 | 465 | -webkit-box-orient: vertical; |
| 147 | 466 | -webkit-box-direction: normal; |
| 148 | 467 | -ms-flex-direction: column; |
| 149 | 468 | flex-direction: column; |
| 469 | + margin-bottom: 10px; | |
| 150 | 470 | } |
| 151 | 471 | .merchant-metabox-field-title h4 { |
| 152 | 472 | margin: 0; |
| 153 | 473 | color: #1e1e1e; |
| 474 | + font-size: 13px; | |
| 475 | + font-weight: 500; | |
| 154 | 476 | } |
| 155 | 477 | .merchant-metabox-field-title small { |
| 156 | 478 | opacity: 0.75; |
| 157 | 479 | } |
| @@ -165,11 +487,12 @@ | ||
| 165 | 487 | flex: 1; |
| 166 | 488 | } |
| 167 | 489 | |
| 168 | 490 | .merchant-metabox-field-description { |
| 169 | - font-size: 80%; | |
| 170 | - opacity: 0.75; | |
| 171 | - margin-top: 10px; | |
| 491 | + font-size: 12px; | |
| 492 | + color: #666; | |
| 493 | + opacity: 1; | |
| 494 | + margin-top: 5px; | |
| 172 | 495 | } |
| 173 | 496 | .merchant-metabox-field-description code { |
| 174 | 497 | font-size: 1em; |
| 175 | 498 | } |
| @@ -180,17 +503,41 @@ | ||
| 180 | 503 | -webkit-box-shadow: none; |
| 181 | 504 | box-shadow: none; |
| 182 | 505 | } |
| 183 | 506 | |
| 507 | +.merchant-metabox-datetime-field input, | |
| 184 | 508 | .merchant-metabox-field-text input { |
| 185 | - width: 50%; | |
| 509 | + padding: 12px; | |
| 510 | + line-height: 1.3em; | |
| 511 | + width: 100%; | |
| 186 | 512 | max-width: 100%; |
| 513 | + min-height: auto; | |
| 514 | + border: 1px solid #D6D6D6; | |
| 515 | + border-radius: 4px; | |
| 187 | 516 | } |
| 517 | +.merchant-metabox-datetime-field input:focus, | |
| 518 | +.merchant-metabox-field-text input:focus { | |
| 519 | + outline: none; | |
| 520 | + -webkit-box-shadow: none; | |
| 521 | + box-shadow: none; | |
| 522 | + border-color: #3858E9; | |
| 523 | +} | |
| 188 | 524 | |
| 189 | 525 | .merchant-metabox-field-number input { |
| 190 | - width: 100px; | |
| 526 | + padding: 12px; | |
| 527 | + line-height: 1.3em; | |
| 528 | + width: 100%; | |
| 191 | 529 | max-width: 100%; |
| 530 | + min-height: auto; | |
| 531 | + border: 1px solid #D6D6D6; | |
| 532 | + border-radius: 4px; | |
| 192 | 533 | } |
| 534 | +.merchant-metabox-field-number input:focus { | |
| 535 | + outline: none; | |
| 536 | + -webkit-box-shadow: none; | |
| 537 | + box-shadow: none; | |
| 538 | + border-color: #3858E9; | |
| 539 | +} | |
| 193 | 540 | |
| 194 | 541 | .merchant-metabox-field-textarea textarea { |
| 195 | 542 | width: 100%; |
| 196 | 543 | max-width: 100%; |
| @@ -263,8 +610,116 @@ | ||
| 263 | 610 | .merchant-metabox-field-switcher input:checked + i:before { |
| 264 | 611 | left: 26px; |
| 265 | 612 | } |
| 266 | 613 | |
| 614 | +.merchant-metabox-radio-field { | |
| 615 | + display: -webkit-box; | |
| 616 | + display: -ms-flexbox; | |
| 617 | + display: flex; | |
| 618 | + -ms-flex-wrap: wrap; | |
| 619 | + flex-wrap: wrap; | |
| 620 | + -webkit-box-align: center; | |
| 621 | + -ms-flex-align: center; | |
| 622 | + align-items: center; | |
| 623 | + gap: 30px; | |
| 624 | + /* Hide the hardcoded <br> tags */ | |
| 625 | +} | |
| 626 | +.merchant-metabox-radio-field br { | |
| 627 | + display: none; | |
| 628 | +} | |
| 629 | +.merchant-metabox-radio-field label { | |
| 630 | + display: -webkit-inline-box; | |
| 631 | + display: -ms-inline-flexbox; | |
| 632 | + display: inline-flex; | |
| 633 | + -webkit-box-align: center; | |
| 634 | + -ms-flex-align: center; | |
| 635 | + align-items: center; | |
| 636 | + gap: 12px; | |
| 637 | + margin: 0; | |
| 638 | + cursor: pointer; | |
| 639 | +} | |
| 640 | +.merchant-metabox-radio-field label span { | |
| 641 | + font-size: 14px; | |
| 642 | + font-weight: 400; | |
| 643 | + color: #1D2327; | |
| 644 | + opacity: 0.8; | |
| 645 | +} | |
| 646 | +.merchant-metabox-radio-field label input:checked + span { | |
| 647 | + opacity: 1; | |
| 648 | +} | |
| 649 | +.merchant-metabox-radio-field label input { | |
| 650 | + -ms-flex-negative: 0; | |
| 651 | + flex-shrink: 0; | |
| 652 | + margin: 0; | |
| 653 | + width: 20px; | |
| 654 | + height: 20px; | |
| 655 | + border: 1px solid #D6D6D6; | |
| 656 | + background-color: #fff; | |
| 657 | + display: -webkit-inline-box; | |
| 658 | + display: -ms-inline-flexbox; | |
| 659 | + display: inline-flex; | |
| 660 | + -webkit-box-align: center; | |
| 661 | + -ms-flex-align: center; | |
| 662 | + align-items: center; | |
| 663 | + -webkit-box-pack: center; | |
| 664 | + -ms-flex-pack: center; | |
| 665 | + justify-content: center; | |
| 666 | + -webkit-transition: none; | |
| 667 | + transition: none; | |
| 668 | + -webkit-box-sizing: border-box; | |
| 669 | + box-sizing: border-box; | |
| 670 | + -webkit-box-shadow: none; | |
| 671 | + box-shadow: none; | |
| 672 | + border-radius: 100%; | |
| 673 | + -moz-appearance: none; | |
| 674 | + appearance: none; | |
| 675 | + -webkit-appearance: none; | |
| 676 | +} | |
| 677 | +.merchant-metabox-radio-field label input:focus { | |
| 678 | + border-color: #fff; | |
| 679 | + -webkit-box-shadow: none; | |
| 680 | + box-shadow: none; | |
| 681 | + outline: none; | |
| 682 | +} | |
| 683 | +.merchant-metabox-radio-field label input:checked { | |
| 684 | + border-color: #3858E9; | |
| 685 | + background-color: #fff; | |
| 686 | + -webkit-box-shadow: 0 0 0 1px #3858E9; | |
| 687 | + box-shadow: 0 0 0 1px #3858E9; | |
| 688 | +} | |
| 689 | +.merchant-metabox-radio-field label input:checked::before { | |
| 690 | + content: ""; | |
| 691 | + width: 12px; | |
| 692 | + height: 12px; | |
| 693 | + border-radius: 12px; | |
| 694 | + background-color: #3858E9; | |
| 695 | + display: block; | |
| 696 | +} | |
| 697 | + | |
| 698 | +.merchant-metabox-field-select select { | |
| 699 | + padding: 12px 20px 12px 12px; | |
| 700 | + line-height: 1.3em; | |
| 701 | + width: 100%; | |
| 702 | + max-width: 100%; | |
| 703 | + min-height: auto; | |
| 704 | + border-radius: 6px; | |
| 705 | + color: #2F2F2F; | |
| 706 | + border: 1px solid #D6D6D6; | |
| 707 | + background-color: #fff; | |
| 708 | +} | |
| 709 | +.merchant-metabox-field-select select:hover { | |
| 710 | + color: #2F2F2F; | |
| 711 | +} | |
| 712 | +.merchant-metabox-field-select select:focus { | |
| 713 | + outline: none; | |
| 714 | + -webkit-box-shadow: none; | |
| 715 | + box-shadow: none; | |
| 716 | + border-color: #3858E9; | |
| 717 | +} | |
| 718 | +.merchant-metabox-field-select select option { | |
| 719 | + color: #2F2F2F; | |
| 720 | +} | |
| 721 | + | |
| 267 | 722 | .merchant-metabox-field-choices-images { |
| 268 | 723 | display: -webkit-box; |
| 269 | 724 | display: -ms-flexbox; |
| 270 | 725 | display: flex; |
| @@ -1015,9 +1470,10 @@ | ||
| 1015 | 1470 | display: -ms-flexbox; |
| 1016 | 1471 | display: flex; |
| 1017 | 1472 | } |
| 1018 | 1473 | |
| 1019 | -.merchant-metabox-field-append, .merchant-metabox-field-prepend { | |
| 1474 | +.merchant-metabox-field-append, | |
| 1475 | +.merchant-metabox-field-prepend { | |
| 1020 | 1476 | background: #f0f0f1; |
| 1021 | 1477 | border: 1px solid #8c8f94; |
| 1022 | 1478 | -webkit-box-align: center; |
| 1023 | 1479 | -ms-flex-align: center; |
| @@ -1046,8 +1502,126 @@ | ||
| 1046 | 1502 | border-top-left-radius: 5px; |
| 1047 | 1503 | border-bottom-left-radius: 5px; |
| 1048 | 1504 | } |
| 1049 | 1505 | |
| 1506 | +.merchant-pcr-app { | |
| 1507 | + position: absolute; | |
| 1508 | + top: 100% !important; | |
| 1509 | + left: 0 !important; | |
| 1510 | + z-index: 9999; | |
| 1511 | + margin-top: 10px; | |
| 1512 | +} | |
| 1513 | + | |
| 1514 | +.merchant-metabox-color-field { | |
| 1515 | + display: -webkit-box; | |
| 1516 | + display: -ms-flexbox; | |
| 1517 | + display: flex; | |
| 1518 | + -webkit-box-align: center; | |
| 1519 | + -ms-flex-align: center; | |
| 1520 | + align-items: center; | |
| 1521 | + gap: 10px; | |
| 1522 | + position: relative; | |
| 1523 | +} | |
| 1524 | +.merchant-metabox-color-field .merchant-color-picker { | |
| 1525 | + cursor: pointer; | |
| 1526 | + width: 36px; | |
| 1527 | + height: 36px; | |
| 1528 | + min-width: 36px; | |
| 1529 | + min-height: 36px; | |
| 1530 | + border: 1px solid rgba(0, 0, 0, 0.1); | |
| 1531 | + border-radius: 4px; | |
| 1532 | + -webkit-transition: border-color 0.2s ease; | |
| 1533 | + transition: border-color 0.2s ease; | |
| 1534 | +} | |
| 1535 | +.merchant-metabox-color-field .merchant-color-picker:hover { | |
| 1536 | + border-color: rgba(0, 0, 0, 0.3); | |
| 1537 | +} | |
| 1538 | +.merchant-metabox-color-field .merchant-color-input { | |
| 1539 | + width: 100px; | |
| 1540 | + max-width: 100%; | |
| 1541 | + padding: 4px 10px; | |
| 1542 | + border: 1px solid #8c8f94; | |
| 1543 | + border-radius: 4px; | |
| 1544 | + display: block; | |
| 1545 | + text-align: center; | |
| 1546 | +} | |
| 1547 | + | |
| 1548 | +.merchant-range { | |
| 1549 | + display: -webkit-box; | |
| 1550 | + display: -ms-flexbox; | |
| 1551 | + display: flex; | |
| 1552 | + -webkit-box-align: center; | |
| 1553 | + -ms-flex-align: center; | |
| 1554 | + align-items: center; | |
| 1555 | + gap: 15px; | |
| 1556 | + width: 100%; | |
| 1557 | +} | |
| 1558 | +.merchant-range .merchant-range-input { | |
| 1559 | + -webkit-appearance: none; | |
| 1560 | + width: 100%; | |
| 1561 | + height: 4px; | |
| 1562 | + border-radius: 5px; | |
| 1563 | + background: #e2e2e2; | |
| 1564 | + outline: none; | |
| 1565 | + padding: 0; | |
| 1566 | + margin: 0; | |
| 1567 | +} | |
| 1568 | +.merchant-range .merchant-range-input::-webkit-slider-thumb { | |
| 1569 | + -webkit-appearance: none; | |
| 1570 | + appearance: none; | |
| 1571 | + width: 14px; | |
| 1572 | + height: 14px; | |
| 1573 | + border-radius: 50%; | |
| 1574 | + background: #3858e9; | |
| 1575 | + cursor: pointer; | |
| 1576 | + -webkit-transition: background 0.15s ease-in-out; | |
| 1577 | + transition: background 0.15s ease-in-out; | |
| 1578 | + -webkit-box-shadow: 0 0 0 1px #3858e9; | |
| 1579 | + box-shadow: 0 0 0 1px #3858e9; | |
| 1580 | +} | |
| 1581 | +.merchant-range .merchant-range-input::-moz-range-thumb { | |
| 1582 | + width: 14px; | |
| 1583 | + height: 14px; | |
| 1584 | + border: 0; | |
| 1585 | + border-radius: 50%; | |
| 1586 | + background: #3858e9; | |
| 1587 | + cursor: pointer; | |
| 1588 | + -moz-transition: background 0.15s ease-in-out; | |
| 1589 | + transition: background 0.15s ease-in-out; | |
| 1590 | + box-shadow: 0 0 0 1px #3858e9; | |
| 1591 | +} | |
| 1592 | +.merchant-range .merchant-range-number-input { | |
| 1593 | + width: 70px; | |
| 1594 | + min-width: 70px; | |
| 1595 | + padding: 5px 10px; | |
| 1596 | + text-align: center; | |
| 1597 | + border: 1px solid #d6d6d6; | |
| 1598 | + border-radius: 4px; | |
| 1599 | + font-size: 13px; | |
| 1600 | + color: #1e1e1e; | |
| 1601 | +} | |
| 1602 | +.merchant-range .merchant-range-number-input:focus { | |
| 1603 | + border-color: #3858e9; | |
| 1604 | + outline: none; | |
| 1605 | +} | |
| 1606 | +.merchant-range .merchant-range-number-input::-webkit-inner-spin-button, .merchant-range .merchant-range-number-input::-webkit-outer-spin-button { | |
| 1607 | + -webkit-appearance: none; | |
| 1608 | + margin: 0; | |
| 1609 | +} | |
| 1610 | +.merchant-range .merchant-range-number-input { | |
| 1611 | + -moz-appearance: textfield; | |
| 1612 | +} | |
| 1613 | +.merchant-range .merchant-range-unit { | |
| 1614 | + color: #757575; | |
| 1615 | + font-size: 13px; | |
| 1616 | + margin-left: -10px; | |
| 1617 | +} | |
| 1618 | + | |
| 1619 | +body.rtl .merchant-range .merchant-range-unit { | |
| 1620 | + margin-left: 0; | |
| 1621 | + margin-right: -10px; | |
| 1622 | +} | |
| 1623 | + | |
| 1050 | 1624 | @media only screen and (max-width: 991px) { |
| 1051 | 1625 | .merchant-metabox-tabs { |
| 1052 | 1626 | display: none; |
| 1053 | 1627 | } |
| @@ -1080,5 +1654,24 @@ | ||
| 1080 | 1654 | .merchant-metabox-field-uploads-content input, |
| 1081 | 1655 | .merchant-metabox-field-repeater-content input { |
| 1082 | 1656 | width: 100%; |
| 1083 | 1657 | } |
| 1658 | +} | |
| 1659 | +.rtl .merchant-metabox-tabs a:before { | |
| 1660 | + right: 0; | |
| 1661 | + left: unset; | |
| 1662 | +} | |
| 1663 | +.rtl .merchant-metabox-tabs { | |
| 1664 | + margin-left: unset; | |
| 1665 | + margin-right: -20px; | |
| 1666 | +} | |
| 1667 | +.rtl .merchant-metabox-field-append { | |
| 1668 | + border-radius: 5px; | |
| 1669 | +} | |
| 1670 | +.rtl .merchant-metabox-contents .merchant-metabox-field-flexible-content-item { | |
| 1671 | + border-left: 1px solid #c3c4c7; | |
| 1672 | + border-right: 3px solid #3858e9; | |
| 1673 | +} | |
| 1674 | +.rtl .merchant-metabox-contents .merchant-metabox-field-flexible-content-item-title { | |
| 1675 | + margin-left: unset; | |
| 1676 | + margin-right: 10px; | |
| 1084 | 1677 | } |
