accordion.css
3 months ago
button.css
4 weeks ago
card.css
3 months ago
common.css
3 months ago
common.js
3 months ago
deprecated.css
3 months ago
form.css
3 months ago
header.css
3 months ago
modal-new.css
3 months ago
modal.css
3 months ago
modal.js
3 months ago
screen-options.js
3 months ago
tabs.js
3 months ago
toast.css
3 months ago
toaster.js
3 months ago
toggles.js
3 months ago
modal.css
101 lines
| 1 | .advads-modal { |
| 2 | @apply fixed inset-0 -z-[1] hidden overflow-auto bg-black/40 opacity-0 pointer-events-none; |
| 3 | @apply transition-opacity duration-400 ease-in w-full h-full; |
| 4 | } |
| 5 | |
| 6 | dialog.advads-modal::backdrop { |
| 7 | @apply bg-gray-500/40; |
| 8 | } |
| 9 | |
| 10 | .advads-modal:target, |
| 11 | .advads-modal[open] { |
| 12 | @apply table opacity-100 pointer-events-auto z-9999; |
| 13 | } |
| 14 | |
| 15 | dialog.advads-modal { |
| 16 | @apply p-0 border-0 m-0 max-h-screen; |
| 17 | max-width: 100vw; |
| 18 | } |
| 19 | |
| 20 | .advads-modal-content { |
| 21 | @apply relative bg-[#fefefe] max-w-5xl h-auto mx-auto overflow-y-scroll; |
| 22 | |
| 23 | box-shadow: |
| 24 | 0 4px 8px 0 rgba(0, 0, 0, 0.2), |
| 25 | 0 6px 20px 0 rgba(0, 0, 0, 0.19); |
| 26 | box-sizing: border-box; |
| 27 | margin-top: calc(5vh + var(--wp-admin--admin-bar--height, 0px)); |
| 28 | margin-bottom: 5vh; |
| 29 | max-height: calc(90vh - var(--wp-admin--admin-bar--height, 0px)); |
| 30 | animation-name: advads-modal-animatetop; |
| 31 | animation-duration: 0.4s; |
| 32 | -webkit-overflow-scrolling: touch; |
| 33 | |
| 34 | &::-webkit-scrollbar { |
| 35 | @apply w-3 absolute right-0; |
| 36 | } |
| 37 | |
| 38 | &::-webkit-scrollbar-track { |
| 39 | @apply bg-transparent shadow-none; |
| 40 | } |
| 41 | |
| 42 | &::-webkit-scrollbar-thumb { |
| 43 | @apply bg-border rounded-lg border-3 border-transparent bg-clip-content; |
| 44 | } |
| 45 | } |
| 46 | |
| 47 | .advads-modal-header { |
| 48 | @apply p-4 sm:flex items-center justify-between border-b border-border; |
| 49 | |
| 50 | h2 { @apply m-0; } |
| 51 | |
| 52 | .advads-modal-close { |
| 53 | @apply block no-underline text-gray-500; |
| 54 | } |
| 55 | } |
| 56 | |
| 57 | .advads-modal-body { |
| 58 | @apply p-4; |
| 59 | |
| 60 | h2, h3 { |
| 61 | font-size: 1.3em; |
| 62 | margin: 1em 0; |
| 63 | } |
| 64 | } |
| 65 | |
| 66 | .advads-modal-footer { |
| 67 | @apply bg-gray-50 px-4 py-3 flex sm:px-6 gap-x-4 justify-between border-t border-border; |
| 68 | position: sticky; |
| 69 | bottom: 0; |
| 70 | } |
| 71 | |
| 72 | @keyframes advads-modal-animatetop { |
| 73 | from { |
| 74 | top: -300px; |
| 75 | opacity: 0 |
| 76 | } |
| 77 | to { |
| 78 | top: 0; |
| 79 | opacity: 1 |
| 80 | } |
| 81 | } |
| 82 | |
| 83 | .advads-modal-close:hover, |
| 84 | .advads-modal-close:focus { |
| 85 | color: black; |
| 86 | text-decoration: none; |
| 87 | cursor: pointer; |
| 88 | } |
| 89 | |
| 90 | a.advads-modal-close-background { |
| 91 | width: 100%; |
| 92 | height: 100%; |
| 93 | position: absolute; |
| 94 | text-indent: -9999em; |
| 95 | cursor: default; |
| 96 | } |
| 97 | |
| 98 | .advads-ui-autocomplete.ui-front { |
| 99 | z-index: 10000; |
| 100 | } |
| 101 |