style.scss (6291B)
1 @mixin placeholder-color($color) { 2 &::-webkit-input-placeholder { /* WebKit browsers */ 3 color: $color; 4 font-style: italic; 5 opacity: 1; 6 } 7 &:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ 8 color: $color; 9 font-style: italic; 10 opacity: 1; 11 } 12 &::-moz-placeholder { /* Mozilla Firefox 19+ */ 13 color: $color; 14 font-style: italic; 15 opacity: 1; 16 } 17 &:-ms-input-placeholder { /* Internet Explorer 10+ */ 18 color: $color; 19 font-style: italic; 20 opacity: 1; 21 } 22 } 23 24 .redux-templates-modal-wrapper { 25 26 .redux-templates-modal-body { 27 flex: 1 1 auto; 28 padding-left: 30px; 29 padding-right: 30px; 30 box-sizing: border-box; 31 background: #fff; 32 33 h5 { 34 font-size: 1.1em; 35 font-weight: 600; 36 } 37 38 ul { 39 list-style-position: inside; 40 list-style-type: disc; 41 42 &.redux-templates-import-wizard-missing-dependency li { 43 line-height: 1.8; 44 } 45 } 46 47 .error { 48 color: #f00; 49 i { 50 color: inherit; 51 } 52 &.installError { 53 text-align: center; 54 } 55 } 56 } 57 58 .redux-templates-import-wizard-spinner-wrapper { 59 position: absolute; 60 width: calc(100% - 60px); // as the parent has 30px each horizontal padding 61 height: 100%; 62 flex: 1 1 auto; 63 align-items: center; 64 justify-content: center; 65 display: flex; 66 flex-direction: column; 67 .text-transition { 68 text-align: center; 69 font-size: 18px; 70 color: #555d66; 71 margin-bottom: 20px; 72 } 73 } 74 75 .redux-templates-import-progress { 76 77 font-size: 1.1em; 78 text-align: center; 79 80 li { 81 list-style: none; 82 83 &.success { 84 i { 85 color: #46b450; 86 } 87 } 88 89 &.info { 90 i { 91 color: #00a0d2; 92 } 93 } 94 95 96 } 97 } 98 99 .redux-templates-import-progress { 100 width: 50%; 101 margin: 10px auto; 102 li { 103 display: flex; 104 justify-content: space-between; 105 } 106 } 107 108 /* ReduxTemplatesPremiumBox */ 109 .section-box.premium-box { 110 //width: 60%; 111 margin: 35px auto; 112 text-align: center; 113 114 input { 115 display: block; 116 width: 100%; 117 box-shadow: 0 0 0 transparent; 118 transition: box-shadow 0.1s linear; 119 border-radius: 2px; 120 line-height: normal; 121 display: block; 122 padding: 16px 48px 16px 16px; 123 background: #f3f4f5; 124 border: none; 125 width: 100%; 126 height: 40px; 127 font-size: 13px; 128 text-align: center; 129 130 @include placeholder-color(#606a73); 131 132 &:focus { 133 border-color: #007cba; 134 border-color: var(--wp-admin-theme-color); 135 background: #fff; 136 box-shadow: 0 0 0 1.5px #007cba; 137 box-shadow: 0 0 0 1.5px var(--wp-admin-theme-color); 138 outline: 2px solid transparent; 139 } 140 } 141 142 h3 { 143 144 font-size: 1.5em; 145 line-height: 1.1em; 146 margin-top: 0px; 147 } 148 p { 149 font-size: calc(13px + 0.2vw); 150 } 151 ul { 152 width: 50%; 153 margin: 0 auto; 154 text-align: left; 155 list-style-type: disc; 156 list-style-position: inside; 157 } 158 159 .redux-templates-upgrade-button { 160 border: none; 161 border-radius: 4px; 162 cursor: pointer; 163 opacity: 1; 164 background: #24b0a6; 165 //background: linear-gradient(90deg, #7557ff -30%, #c751ff 130%); 166 transition: opacity 0.2s ease-in-out; 167 box-shadow: none !important; 168 color: #fff; 169 text-decoration: none; 170 padding: 0.75em 1.25em; 171 display: block; 172 //margin: 0 auto; 173 margin: 30px auto 0 auto; 174 max-width: 250px; 175 text-align: center; 176 //font-size: calc(13px + 0.1vw); 177 font-size: 1em; 178 &:hover { 179 color: #fff; 180 opacity: 0.85; 181 box-shadow: none !important; 182 background: #19837c; 183 } 184 } 185 .subscription_key_button { 186 margin-top: 40px; 187 button { 188 background: #f8f8f8; 189 border: 1px solid #ddd; 190 } 191 192 } 193 194 .redux-pro-activate-button { 195 i { 196 margin-right: 10px; 197 } 198 border: none; 199 border-radius: 4px; 200 cursor: pointer; 201 opacity: 1; 202 background: #24b0a6; 203 //background: linear-gradient(90deg, #7557ff -30%, #c751ff 130%); 204 transition: opacity 0.2s ease-in-out; 205 box-shadow: none !important; 206 color: #fff; 207 text-decoration: none; 208 padding: 0.75em 1.25em; 209 display: block; 210 //margin: 0 auto; 211 margin: 30px auto 0 auto; 212 max-width: 250px; 213 text-align: center; 214 //font-size: calc(13px + 0.1vw); 215 font-size: 1em; 216 &:hover { 217 color: #fff; 218 opacity: 0.85; 219 box-shadow: none !important; 220 background: #19837c; 221 } 222 } 223 224 } 225 .redux-templates-importmodal-content { 226 flex: 1; 227 display: flex; 228 flex-direction: column; 229 } 230 231 .redux-templates-psmodal-content { 232 flex: 1; 233 display: flex; 234 flex-direction: column; 235 align-items: center; 236 justify-content: center; 237 text-align: center; 238 } 239 240 .redux-templates-modal-footer.nps-footer { 241 text-align: center; 242 justify-content: center; 243 } 244 245 } 246 .text-transition { 247 width: 100% !important; 248 text-align: center; 249 .text-transition_inner > div { 250 font-size: 1.1rem; 251 } 252 }