← All changes
|
modules/comments/subscription-modal-on-comment/subscription-modal.css
+39
-124
13.0.2
→
16.3-a.7
View file →
| @@ -1,95 +1,57 @@ | ||
| 1 | 1 | .jetpack-subscription-modal { |
| 2 | - visibility: hidden; | |
| 3 | - position: fixed; | |
| 4 | - z-index: 50000; | |
| 5 | - left: 0; | |
| 6 | - top: 0; | |
| 7 | - width: 100%; | |
| 8 | - height: 100%; | |
| 9 | - overflow: auto; | |
| 10 | - opacity: 0; | |
| 11 | - transition: visibility 0s, opacity 0.5s ease; | |
| 12 | - display: flex; | |
| 13 | - justify-content: space-evenly; | |
| 14 | - align-content: center; | |
| 15 | - flex-wrap: wrap; | |
| 2 | + visibility: hidden; | |
| 3 | + position: fixed; | |
| 4 | + z-index: 50000; | |
| 5 | + left: 0; | |
| 6 | + top: 0; | |
| 7 | + width: 100%; | |
| 8 | + height: 100%; | |
| 9 | + overflow: auto; | |
| 10 | + opacity: 0; | |
| 11 | + transition: visibility 0s, opacity 0.5s ease; | |
| 12 | + display: flex; | |
| 13 | + justify-content: space-evenly; | |
| 14 | + align-content: center; | |
| 15 | + flex-wrap: wrap; | |
| 16 | 16 | } |
| 17 | 17 | |
| 18 | 18 | .jetpack-subscription-modal.open { |
| 19 | - opacity: 1; | |
| 20 | - background-color: rgba(0,0,0,0.3); | |
| 21 | - visibility: visible; | |
| 19 | + opacity: 1; | |
| 20 | + background-color: rgba(0, 0, 0, 0.3); | |
| 21 | + visibility: visible; | |
| 22 | 22 | } |
| 23 | 23 | |
| 24 | 24 | .jetpack-subscription-modal__modal-content { |
| 25 | - text-align: center; | |
| 26 | - background-color: #fefefe; | |
| 27 | - width: 100%; | |
| 28 | - max-width: 650px; | |
| 29 | - box-sizing: border-box; | |
| 30 | - transition: visibility 0s, opacity 0.3s linear; | |
| 31 | - opacity: 0; | |
| 32 | - display: flex; | |
| 33 | - flex-direction: column; | |
| 34 | - gap: 5px; | |
| 35 | - justify-content: center; | |
| 25 | + text-align: center; | |
| 26 | + background-color: #fefefe; | |
| 27 | + width: 100%; | |
| 28 | + max-width: 650px; | |
| 29 | + box-sizing: border-box; | |
| 30 | + transition: visibility 0s, opacity 0.3s linear; | |
| 31 | + opacity: 0; | |
| 32 | + display: flex; | |
| 33 | + flex-direction: column; | |
| 34 | + gap: 5px; | |
| 35 | + justify-content: center; | |
| 36 | 36 | } |
| 37 | 37 | |
| 38 | 38 | .jetpack-subscription-modal.open .jetpack-subscription-modal__modal-content { |
| 39 | - opacity: 1; | |
| 40 | - top: 0; | |
| 41 | - visibility: visible; | |
| 39 | + opacity: 1; | |
| 40 | + top: 0; | |
| 41 | + visibility: visible; | |
| 42 | 42 | } |
| 43 | 43 | |
| 44 | 44 | /* Hide the modal content when iframe is present */ |
| 45 | 45 | .jetpack-subscription-modal.has-iframe .jetpack-subscription-modal__modal-content { |
| 46 | - background: transparent; | |
| 46 | + background: transparent; | |
| 47 | 47 | } |
| 48 | 48 | |
| 49 | 49 | .jetpack-subscription-modal.has-iframe .jetpack-subscription-modal__modal-content-form { |
| 50 | - visibility: hidden; | |
| 51 | - opacity: 0; | |
| 50 | + visibility: hidden; | |
| 51 | + opacity: 0; | |
| 52 | 52 | } |
| 53 | 53 | |
| 54 | -.jetpack-subscription-modal__modal-content .jetpack-subscription-modal__iframe-container { | |
| 55 | - visibility: hidden; | |
| 56 | - opacity: 0; | |
| 57 | - background-image: url( 'https://s0.wp.com/i/loading/dark-200.gif' ); | |
| 58 | - background-size: 50px; | |
| 59 | - background-repeat: no-repeat; | |
| 60 | - background-position: center 150px; | |
| 61 | - margin: 0 !important; | |
| 62 | - box-shadow: none; | |
| 63 | - -webkit-box-shadow: none; | |
| 64 | - -moz-box-shadow: none; | |
| 65 | - border: none; | |
| 66 | - bottom: 0; | |
| 67 | - left: 0; | |
| 68 | - right: 0; | |
| 69 | - top: 0; | |
| 70 | - width: 100% !important; | |
| 71 | - height: 100%; | |
| 72 | - position: absolute; | |
| 73 | -} | |
| 74 | - | |
| 75 | -.jetpack-subscription-modal.has-iframe .jetpack-subscription-modal__iframe-container { | |
| 76 | - opacity: 1; | |
| 77 | - visibility: visible; | |
| 78 | - | |
| 79 | -} | |
| 80 | - | |
| 81 | -.jetpack-subscription-modal__iframe { | |
| 82 | - margin: 0 !important; | |
| 83 | - height: 100% !important; | |
| 84 | - width: 100% !important; | |
| 85 | - position: absolute; | |
| 86 | - top: 0; | |
| 87 | - left: 0; | |
| 88 | - right: 0; | |
| 89 | - bottom: 0; | |
| 90 | -} | |
| 91 | - | |
| 92 | 54 | /* |
| 93 | 55 | * These text-wrap properties still have limited browser |
| 94 | 56 | * support, but based on feedback still adding them for when |
| 95 | 57 | * they are supported. |
| @@ -94,60 +56,13 @@ | ||
| 94 | 56 | * support, but based on feedback still adding them for when |
| 95 | 57 | * they are supported. |
| 96 | 58 | */ |
| 97 | 59 | .jetpack-subscription-modal__modal-content p { |
| 98 | - text-wrap: pretty; | |
| 99 | - text-wrap: pretty; | |
| 60 | + text-wrap: pretty; | |
| 100 | 61 | } |
| 101 | 62 | |
| 102 | -.jetpack-subscription-modal__form { | |
| 103 | - margin-top: 20px; | |
| 104 | - align-items: flex-start; | |
| 105 | - display: flex; | |
| 106 | -} | |
| 63 | +@media screen and (max-width: 640px) { | |
| 107 | 64 | |
| 108 | -.jetpack-subscription-modal__form-email { | |
| 109 | - flex: 1; | |
| 110 | - font-size: 16px; | |
| 111 | - line-height: 28px; | |
| 112 | - padding: 15px 23px 15px 23px !important; | |
| 113 | - border-radius: 50px !important; | |
| 114 | - border-width: 1px !important; | |
| 115 | - border-color: #113AF5 !important; | |
| 116 | - border-end-end-radius: 0 !important; | |
| 117 | - border-start-end-radius: 0 !important; | |
| 118 | - border-style: solid !important; | |
| 119 | - outline: none; | |
| 120 | -} | |
| 121 | -.jetpack-subscription-modal__form-email:focus { | |
| 122 | - outline: none !important; | |
| 123 | -} | |
| 124 | -.jetpack-subscription-modal__form-submit { | |
| 125 | - font-size: 16px; | |
| 126 | - line-height: 28px; | |
| 127 | - padding: 15px 23px 15px 23px; | |
| 128 | - margin: 0px; | |
| 129 | - margin-left: 10px; | |
| 130 | - border-radius: 50px; | |
| 131 | - border-width: 1px; | |
| 132 | - border-end-start-radius: 0; | |
| 133 | - border-start-start-radius: 0; | |
| 134 | - margin-inline-start: 0; | |
| 135 | - background-color: #113AF5; | |
| 136 | - border-color: #113AF5; | |
| 137 | - border-style: solid; | |
| 138 | - color: #FFFFFF; | |
| 139 | -} | |
| 140 | -.jetpack-subscription-modal__form-submit:hover { | |
| 141 | - opacity: .9; | |
| 142 | - cursor: pointer; | |
| 143 | -} | |
| 144 | -.jetpack-subscription-modal__form-submit:disabled { | |
| 145 | - opacity: .7 !important; | |
| 146 | - cursor: not-allowed; | |
| 147 | -} | |
| 148 | - | |
| 149 | -@media screen and (max-width: 640px) { | |
| 150 | - .jetpack-subscription-modal__modal-content { | |
| 151 | - width: 94%; | |
| 152 | - } | |
| 65 | + .jetpack-subscription-modal__modal-content { | |
| 66 | + width: 94%; | |
| 67 | + } | |
| 153 | 68 | } |