style.css (13820B)
1 .redux-templates-collections-modal-body { 2 display: flex; 3 flex: 1; 4 overflow-y: auto; } 5 6 .redux-templates-builder-modal { 7 position: fixed; 8 top: 0; 9 left: 0; 10 width: 100%; 11 height: 100%; 12 z-index: 9999; 13 display: flex; 14 align-items: center; 15 justify-content: center; 16 pointer-events: none; } 17 .redux-templates-builder-modal.hidden { 18 display: none; } 19 .redux-templates-builder-modal .wp-full-overlay-sidebar .wp-core-ui .button-group.button-hero .button, 20 .redux-templates-builder-modal .wp-full-overlay-sidebar .wp-core-ui .button.button-hero { 21 text-align: center !important; } 22 .redux-templates-builder-modal * { 23 box-sizing: border-box; 24 pointer-events: all; } 25 .redux-templates-builder-modal .redux-templates-pagelist-modal-overlay { 26 position: absolute; 27 width: 100%; 28 height: 100%; 29 background: #f00; 30 left: 0; 31 top: 0; 32 z-index: -1; 33 background: rgba(3, 8, 15, 0.75); } 34 .redux-templates-builder-modal .components-base-control__field { 35 display: flex; } 36 .redux-templates-builder-modal textarea { 37 width: 100%; 38 height: 80px; } 39 40 .redux-templates-builder-modal-header { 41 display: flex; 42 box-shadow: inset 0 -1px #e2e4e7; 43 background: #fff; } 44 .redux-templates-builder-modal-header .template-search-box { 45 position: relative; 46 width: 270px; } 47 .redux-templates-builder-modal-header .template-search-box i { 48 font-size: 16px; 49 color: rgba(255, 255, 255, 0.9); 50 position: absolute; 51 top: 50%; 52 left: 40px; 53 transform: translateY(-50%); } 54 .redux-templates-builder-modal-header .template-search-box i.challenge-dot { 55 right: 20px; 56 left: auto; } 57 .redux-templates-builder-modal-header .template-search-box input { 58 display: block; 59 width: 100%; 60 height: 60px; 61 color: #b4b9be; 62 color: rgba(240, 245, 250, 0.7); 63 background: #32373c; 64 border: none; 65 font-size: 15px; 66 padding: 0 20px 0 75px; 67 margin: 0; 68 font-weight: 300; 69 border-radius: 0 !important; 70 border-bottom: 1px solid #3e434a; } 71 .redux-templates-builder-modal-header .template-search-box input::-webkit-input-placeholder { 72 /* WebKit browsers */ 73 color: rgba(240, 245, 250, 0.7); 74 font-style: italic; 75 opacity: 1; } 76 .redux-templates-builder-modal-header .template-search-box input:-moz-placeholder { 77 /* Mozilla Firefox 4 to 18 */ 78 color: rgba(240, 245, 250, 0.7); 79 font-style: italic; 80 opacity: 1; } 81 .redux-templates-builder-modal-header .template-search-box input::-moz-placeholder { 82 /* Mozilla Firefox 19+ */ 83 color: rgba(240, 245, 250, 0.7); 84 font-style: italic; 85 opacity: 1; } 86 .redux-templates-builder-modal-header .template-search-box input:-ms-input-placeholder { 87 /* Internet Explorer 10+ */ 88 color: rgba(240, 245, 250, 0.7); 89 font-style: italic; 90 opacity: 1; } 91 .redux-templates-builder-modal-header .template-search-box input:focus { 92 box-shadow: none; 93 outline: 0; } 94 95 .redux-templates-pagelist-modal-inner { 96 position: relative; 97 display: flex; 98 flex-direction: column; 99 overflow: hidden; 100 background: #f1f1f1; 101 width: 85.9375%; 102 height: 89.537037%; 103 max-width: 1650px; 104 max-height: 967px; 105 box-shadow: 0 0 45px 10px rgba(3, 8, 15, 0.2); 106 animation: components-modal__appear-animation 0.1s ease-out; 107 animation-fill-mode: forwards; } 108 .redux-templates-pagelist-modal-inner .redux-templates-collection-modal-content-area { 109 flex-grow: 1; 110 max-height: 100%; 111 overflow-y: auto; 112 position: relative; } 113 114 .redux-templates-template-list-header { 115 text-align: center; 116 position: relative; 117 flex-grow: 1; 118 padding-right: 50px; } 119 .redux-templates-template-list-header button:not(.redux-templates-builder-close-modal) { 120 display: inline-block; 121 line-height: 30px; 122 padding: 15px 20px; 123 border: none; 124 cursor: pointer; 125 font-size: 13px; 126 margin: 0 1px 0 0; 127 color: #191e23; 128 background: transparent; } 129 .redux-templates-template-list-header button:not(.redux-templates-builder-close-modal).active { 130 box-shadow: inset 0 -2px #007cba; 131 font-weight: 600; } 132 .redux-templates-template-list-header button:not(.redux-templates-builder-close-modal):focus { 133 outline: none; } 134 .redux-templates-template-list-header .redux-templates-builder-close-modal { 135 position: absolute; 136 top: 0; 137 right: 0; 138 width: 60px; 139 height: 60px; 140 margin: 0; 141 padding: 0; 142 border: 1px solid transparent; 143 background: none; 144 font-size: 20px; 145 color: #9b9b9b; 146 cursor: pointer; 147 outline: none; 148 transition: color 0.1s ease-in-out, background 0.1s ease-in-out; } 149 .redux-templates-template-list-header .redux-templates-builder-close-modal:hover, .redux-templates-template-list-header .redux-templates-builder-close-modal:active { 150 color: #00a0d2; } 151 .redux-templates-template-list-header .redux-templates-builder-close-modal:focus { 152 color: #00a0d2; 153 border-color: #5b9dd9; 154 box-shadow: 0 0 3px rgba(0, 115, 170, 0.8); 155 /* Only visible in Windows High Contrast mode */ 156 outline: 2px solid transparent; } 157 158 .redux-templates-template-list-sub-header { 159 display: flex; 160 justify-content: space-between; 161 align-items: center; 162 padding: 23px 25px 0; } 163 .redux-templates-template-list-sub-header h4 { 164 font-size: 21px; 165 color: #0e2244; 166 font-weight: 500; 167 margin: 0; } 168 .redux-templates-template-list-sub-header h4 i.challenge-dot { 169 margin-left: 10px; } 170 .redux-templates-template-list-sub-header .redux-templates-template-filters { 171 display: flex; 172 justify-content: space-between; 173 align-items: center; } 174 .redux-templates-template-list-sub-header .redux-templates-template-filter-button-group { 175 background: #f8fafb; 176 display: inline-flex; 177 border: 1px solid #d8d8d8; 178 border-radius: 4px; 179 margin-left: 10px; } 180 .redux-templates-template-list-sub-header .redux-templates-template-filter-button-group button { 181 display: inline-flex; 182 line-height: 28px; 183 padding: 5px 18px; 184 align-items: center; 185 background: none; 186 border: none; 187 color: #587e97; 188 position: relative; 189 z-index: 1; 190 cursor: pointer; } 191 .redux-templates-template-list-sub-header .redux-templates-template-filter-button-group button:focus { 192 outline: none; } 193 .redux-templates-template-list-sub-header .redux-templates-template-filter-button-group button:last-child { 194 color: #f5a623; } 195 .redux-templates-template-list-sub-header .redux-templates-template-filter-button-group button.active { 196 background: #3dbfe8; 197 color: #fff; } 198 .redux-templates-template-list-sub-header .redux-templates-template-filter-button-group button.disabled { 199 opacity: 0.5; } 200 .redux-templates-template-list-sub-header .redux-templates-template-filter-button-group button img { 201 display: inline-block; 202 width: auto; 203 height: 14px; 204 margin-right: 4px; } 205 .redux-templates-template-list-sub-header .redux-templates-template-filter-button-group button:not(:last-child)::after { 206 content: ""; 207 height: 13px; 208 background-color: #c4cbcf; 209 width: 1px; 210 right: 0px; 211 top: 50%; 212 position: absolute; 213 transform: translateY(-50%); } 214 .redux-templates-template-list-sub-header .redux-templates-template-filter-button-group button.active::after { 215 display: none; } 216 .redux-templates-template-list-sub-header .redux-templates-template-filter-button-group button::before { 217 content: ""; 218 position: absolute; 219 background: #3dbfe8; 220 height: calc(100% + 4px); 221 width: calc(100% + 4px); 222 left: -2px; 223 top: -2px; 224 z-index: -1; 225 border-radius: 4px; 226 box-shadow: 0 0 4px rgba(33, 32, 249, 0.3); 227 opacity: 0; } 228 .redux-templates-template-list-sub-header .redux-templates-template-filter-button-group button.active::before { 229 opacity: 1; } 230 231 .redux-templates-modal-loader { 232 display: inline-block; 233 position: absolute; 234 width: 80px; 235 height: 80px; 236 line-height: 80px; 237 text-align: center; 238 left: 50%; 239 margin-left: -50px; 240 top: 50%; 241 margin-top: -50px; 242 font-size: 24px; 243 color: #1e7ed8; } 244 245 .redux-templates-modal-loader img { 246 height: 80px; 247 width: 80px; } 248 249 /*block style*/ 250 .redux-templates-builder-template-found-empty { 251 text-align: center; 252 border-color: transparent !important; } 253 .redux-templates-builder-template-found-empty .redux-templates-builder-empty-title { 254 display: block; 255 width: 100%; } 256 257 .redux-templates-pro-badge { 258 position: absolute; 259 background: #f00; 260 padding: 4px 5px; 261 border-radius: 3px; 262 color: #fff; 263 font-size: 10px; 264 right: 20px; 265 top: 20px; 266 text-transform: uppercase; 267 line-height: 1; } 268 269 .redux-templates-missing-badge { 270 position: absolute; 271 background: #f2a848; 272 border-radius: 3px; 273 color: #fff; 274 font-size: 10px; 275 right: 20px; 276 top: 20px; 277 text-transform: uppercase; 278 line-height: 1; } 279 .redux-templates-missing-badge i { 280 margin: 5px; } 281 282 .redux-templates-default-template-image { 283 /* background-image: url('/img/redux-templates-medium.jpg'); 284 background-size: cover; */ 285 background: #888; 286 transition: 300ms; } 287 .redux-templates-default-template-image img { 288 width: 100%; 289 display: block; } 290 291 .redux-templates-item-wrapper { 292 position: relative; } 293 .redux-templates-item-wrapper .redux-templates-button-overlay { 294 position: absolute; 295 width: 100%; 296 opacity: 0; 297 background: rgba(0, 0, 0, 0.5); 298 height: 100%; 299 top: 0; 300 left: 0; 301 display: flex; 302 flex-direction: column; 303 align-items: center; 304 justify-content: center; 305 transition: 300ms; } 306 .redux-templates-item-wrapper .redux-templates-button-overlay .redux-templates-tmpl-title { 307 margin: 0 0 15px; 308 color: #fff; 309 font-size: 19px; 310 font-weight: 400; } 311 .redux-templates-item-wrapper.focused .redux-templates-button-overlay, .redux-templates-item-wrapper:hover .redux-templates-button-overlay { 312 opacity: 1; } 313 .redux-templates-item-wrapper.focused .redux-templates-default-template-image, .redux-templates-item-wrapper:hover .redux-templates-default-template-image { 314 filter: blur(3px); } 315 .redux-templates-item-wrapper.missing_requirements .warn_notice { 316 opacity: 1; } 317 .redux-templates-item-wrapper.missing_requirements .redux-templates-button-download { 318 background-color: #fdbb05; 319 background-image: none; 320 border-color: #ffc107; } 321 322 /*multiple box*/ 323 #collections-sections-list div.redux-templates-multiple-template-box { 324 margin-bottom: 25px; 325 position: relative; } 326 #collections-sections-list div.redux-templates-multiple-template-box .multiple-template-view { 327 border: 1px solid #e2e4e7; 328 background: #fff; 329 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05), 0 10px 0 -5px #fff, 0 10px 1px -4px rgba(0, 0, 0, 0.08), 0 20px 0 -10px #fff, 0 20px 1px -9px rgba(0, 0, 0, 0.08); 330 cursor: pointer; 331 min-height: 100px; } 332 #collections-sections-list div.redux-templates-multiple-template-box .redux-templates-tmpl-info { 333 padding: 10px 12px; 334 opacity: 0; 335 position: absolute; 336 bottom: 0; 337 width: 100%; 338 -webkit-transition: opacity 0.3s ease-in-out; 339 transition: opacity 0.3s ease-in-out; 340 background-color: rgba(61, 192, 232, 0.9); 341 border-top: 1px solid #f2f4f7; } 342 #collections-sections-list div.redux-templates-multiple-template-box .redux-templates-tmpl-info h5 { 343 margin: 0; 344 font-size: 14px; 345 color: #23282d; 346 line-height: 19px; } 347 #collections-sections-list div.redux-templates-multiple-template-box .redux-templates-tmpl-info h5 span { 348 font-size: 13px; 349 color: #cdcfd1; 350 line-height: 18px; } 351 #collections-sections-list div.redux-templates-multiple-template-box::before, #collections-sections-list div.redux-templates-multiple-template-box::after { 352 content: ""; 353 width: 100%; 354 height: 100%; 355 position: absolute; 356 top: 0; 357 left: 0; 358 border-radius: 3px; 359 pointer-events: none; 360 opacity: 0; 361 -webkit-transition: opacity 0.5s ease-in-out; 362 transition: opacity 0.5s ease-in-out; 363 box-sizing: border-box; } 364 #collections-sections-list div.redux-templates-multiple-template-box::before { 365 border: 3px solid #3dbfe8; 366 z-index: 2; } 367 #collections-sections-list div.redux-templates-multiple-template-box::after { 368 border: 3px solid #ececec; 369 z-index: 1; } 370 #collections-sections-list div.redux-templates-multiple-template-box:hover::before, #collections-sections-list div.redux-templates-multiple-template-box:hover::after, 371 #collections-sections-list div.redux-templates-multiple-template-box:hover .redux-templates-tmpl-info { 372 opacity: 1; } 373 374 .redux-templates-template-option-header { 375 padding: 20px 20px 0; } 376 .redux-templates-template-option-header .redux-templates-template-back { 377 cursor: pointer; } 378 .redux-templates-template-option-header .redux-templates-template-back .dashicons { 379 vertical-align: text-bottom; } 380 381 #wpwrap .edit-post-visual-editor .import-collection-btn-container { 382 text-align: center; 383 margin-top: 20px; } 384 385 #wpwrap .edit-post-visual-editor .import-collection-btn-container #importCollectionBtn { 386 color: #fff; 387 font-size: 13px; } 388 389 .redux-templates-template-back { 390 cursor: pointer; } 391 .redux-templates-template-back .dashicons { 392 vertical-align: text-bottom; } 393 394 .spinner-wrapper { 395 position: absolute; 396 left: 0; 397 top: 0; 398 right: 0; 399 bottom: 0; 400 display: flex; 401 justify-content: center; 402 align-items: center; 403 background: rgba(0, 0, 0, 0.5); } 404 405 /*# sourceMappingURL=style.css.map */