customizer.bundle.css (104008B)
1 /*WP DEVICES CHANGER WIDTH*/ 2 3 .preview-tablet .wp-full-overlay-main { 4 margin: auto 0 auto -384px; 5 width: 768px; 6 height: 1024px; 7 8 } 9 10 .preview-mobile .wp-full-overlay-main { 11 margin: auto 0 auto -206px; 12 width: 412px; 13 height: 732px; 14 } 15 16 .materialis-separator { 17 border-bottom: 1px #cecece solid; 18 padding: 6px 12px; 19 margin-left: -15px; 20 margin-right: -15px; 21 background-color: #55616d; 22 margin-top: 15px; 23 width: auto; 24 display: block; 25 border-top: 1px #cecece solid; 26 margin-bottom: 10px; 27 color: #ffffff; 28 } 29 30 #customize-theme-controls ul.section-settings-container.accordion-section-content > li.customize-control-kirki-color { 31 padding-top: 10px; 32 } 33 34 #customize-theme-controls ul.section-settings-container.accordion-section-content 35 > li.customize-control-kirki-color .customize-control-title { 36 /* margin-top: 10px; */ 37 } 38 39 40 .customize-control-kirki-color > label { 41 position: relative; 42 } 43 44 .materialis-separator .customize-control-title { 45 text-transform: uppercase; 46 margin-bottom: 0px; 47 font-size: 14px; 48 } 49 50 .materialis-separator .customize-control-notifications-container { 51 display: none; 52 } 53 54 .customizer-right-section > ul > li.customize-control-sectionseparator { 55 margin-left: -8px; 56 width: calc(100% + 16px); 57 } 58 59 [data-code="video_header_not_available"] { 60 display: none !important; 61 } 62 63 /*CSS LOADER END*/ 64 65 #customize-preview iframe { 66 width: 100%; 67 height: 100%; 68 background: white; 69 } 70 71 #ope_section_preview { 72 position: absolute; 73 width: 920px; 74 height: 400px; 75 background-color: #fff; 76 z-index: 999999; 77 border: 2px solid #c1c1c1; 78 border-radius: 4px; 79 background-size: contain; 80 background-repeat: no-repeat; 81 background-position: center; 82 } 83 84 #cp-items { 85 padding: 0px 40px; 86 max-width: 488px; 87 width: 488px; 88 } 89 90 #cp-items .customize-control-title { 91 font-size: 12px; 92 font-weight: bold; 93 line-height: 120%; 94 color: rgb(129, 129, 129); 95 text-align: left; 96 margin: 10px 0px; 97 text-transform: none; 98 } 99 100 #cp-items .image-controls span.customize-control-title { 101 margin: 0px; 102 padding: 0px; 103 } 104 105 #cp-items input[type="text"], #cp-items select { 106 background-color: rgb(255, 255, 255); 107 width: 482px; 108 height: 37px; 109 border-color: rgb(221, 221, 221); 110 border-width: 1px; 111 -moz-border-radius: 1px; 112 -webkit-border-radius: 1px; 113 border-radius: 1px; 114 border-style: solid; 115 margin: 0px 0px 4px 0px; 116 max-width: initial; 117 } 118 119 .cp-multi-image-item .thumbnail.thumbnail-image, 120 #cp-items .image-wrapper { 121 float: left; 122 width: 25%; 123 padding: 12px; 124 background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAAWdEVYdENyZWF0aW9uIFRpbWUAMDUvMjAvMTbGXQ/TAAAAIElEQVQImWP8/////3v37jEwMDAwMDEgAcb/////h3EAEbwKl/+GO+wAAAAASUVORK5CYII='); 125 text-align: center; 126 margin-right: 10px; 127 box-sizing: border-box; 128 } 129 130 #cp-items .image-wrapper img { 131 max-width: 100px; 132 max-height: 100px; 133 } 134 135 #cp-items .image-controls { 136 float: left; 137 width: calc(75% - 10px); 138 box-sizing: border-box; 139 } 140 141 #cp-items .image-controls input, #cp-items .image-controls select { 142 width: 100%; 143 /*height: 25px;*/ 144 margin-bottom: 14px; 145 font-size: 13px; 146 } 147 148 #cp-items-footer { 149 text-align: right; 150 position: absolute; 151 bottom: 0px; 152 margin-bottom: -40px; 153 width: 100%; 154 left: 0px; 155 background-color: #ffffff; 156 border-bottom-left-radius: 10px; 157 border-bottom-right-radius: 10px; 158 padding: 10px 20px; 159 box-sizing: border-box; 160 min-height: 48px; 161 border-top: 1px solid #ddd; 162 } 163 164 button#cp-item-cancel:hover { 165 background-color: rgba(220, 220, 220, 1); 166 } 167 168 button#cp-item-ok.full, button#cp-item-section-ok.full { 169 width: 100%; 170 border-radius: 0px 0px 10px 10px; 171 } 172 173 button#cp-item-ok:hover, button#cp-item-section-ok:hover { 174 background-color: #0088EE; 175 } 176 177 .list { 178 display: list-item; 179 } 180 181 .list .item { 182 clear: both; 183 line-height: 1.5em; 184 position: relative; 185 margin: 12px 0 0; 186 } 187 188 .list .item { 189 width: 100%; 190 background: hsl(0, 0%, 100%); 191 border: 1px solid #c1c1c1; 192 position: relative; 193 height: auto; 194 min-height: 20px; 195 line-height: 30px; 196 overflow: hidden; 197 word-wrap: break-word; 198 box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.17); 199 box-sizing: border-box; 200 } 201 202 #page_full_rows li.item { 203 padding: 4px 0px; 204 } 205 206 #page_full_rows li.item.focused { 207 background-color: #d3ffcd; 208 } 209 210 #page_full_rows li.item.focused input { 211 background-color: #d3ffcd; 212 border-bottom: 1px solid #18cc00; 213 } 214 215 #page_full_rows li.item.focused input:hover, #page_full_rows li.item.focused input:focus { 216 border-bottom: 1px solid rgb(0, 133, 186); 217 } 218 219 .list .item-hover { 220 display: block; 221 text-align: right; 222 margin-top: 8px; 223 float: right; 224 margin-right: 14px; 225 vertical-align: middle; 226 height: 20px; 227 } 228 229 .list .item-preview { 230 position: absolute; 231 right: 0px; 232 top: 0px; 233 display: none; 234 width: 40px; 235 height: 100%; 236 background-color: rgba(69, 54, 46, 0.3); 237 line-height: 31px; 238 text-indent: 10px; 239 text-transform: uppercase; 240 font-size: 10px; 241 font-weight: bold; 242 color: rgb(255, 255, 255); 243 text-align: left; 244 } 245 246 .list .item:hover, .list .already-in-page { 247 border-color: #cccccc; 248 position: relative; 249 color: #0073aa; 250 } 251 252 .list .item:hover .item-preview, .list .item:hover .available-item-hover-button { 253 display: block; 254 } 255 256 .list .item-preview i.icon { 257 display: block; 258 width: 31px; 259 height: 31px; 260 left: 5px; 261 position: absolute; 262 background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAALCAYAAACksgdhAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABZ0RVh0Q3JlYXRpb24gVGltZQAwMS8yOC8xNW6vUpUAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzbovLKMAAAAnUlEQVQokX2QsQ3CMBBFP1mAEbwEJXtkjWzBEuyE6NNQpbRoaJDyKPiHDsfKl06Wv+/57C9ArgLM/GsBxtQjQBl4u3EFarMfe1BMmH1B+Df7tQetrgxEVYPn8AZ9dZD0lPTQVnevpzCGTlOr48bxyPh0m1Txs8lPj8NLSuoKTPbisoi/ZCgn1WpJ015AaZMaDVfHPyX/B7bQXhVP4gMO0pYjkjGs/QAAAABJRU5ErkJggg=='); 263 background-repeat: no-repeat; 264 background-position: center; 265 top: 50%; 266 margin-top: -15px; 267 } 268 269 .list .item-remove { 270 cursor: pointer; 271 background-repeat: no-repeat; 272 width: 20px; 273 height: 20px; 274 transition: background 0.3s; 275 display: inline-block; 276 background-color: #f3674a; 277 border-radius: 100%; 278 text-align: center; 279 text-rendering: optimizeLegibility; 280 line-height: 19px; 281 font-size: 17px; 282 color: #ffffff; 283 font-family: sans-serif; 284 background-image: url(../images/trash-o.png); 285 background-size: 60%; 286 background-position: center; 287 image-rendering: pixelated; 288 box-shadow: 0 2px 1px rgba(46, 68, 83, 0.15); 289 } 290 291 .list .item-remove:hover { 292 background-color: #f93f1a; 293 } 294 295 span.item-menu-visible { 296 cursor: pointer; 297 background-repeat: no-repeat; 298 width: 20px; 299 height: 20px; 300 transition: background 0.3s; 301 display: inline-block; 302 background-color: #0aa9e8; 303 border-radius: 100%; 304 background-position: center; 305 text-align: center; 306 text-rendering: optimizeLegibility; 307 line-height: 19px; 308 font-size: 17px; 309 color: #ffffff; 310 font-family: sans-serif; 311 background-image: url(../images/toggle-menu.png); 312 box-shadow: 0 2px 1px rgba(46, 68, 83, 0.15); 313 } 314 315 span.item-menu-visible:hover { 316 background-color: #088fc4; 317 } 318 319 span.item-menu-visible.active { 320 background-image: url(../images/toggle-menu-active.png); 321 background-color: #05597a; 322 } 323 324 span.item-settings { 325 cursor: pointer; 326 background-repeat: no-repeat; 327 width: 20px; 328 height: 20px; 329 transition: background 0.3s; 330 display: inline-block; 331 background-color: #6fc408; 332 border-radius: 100%; 333 background-position: center; 334 text-align: center; 335 text-rendering: optimizeLegibility; 336 line-height: 19px; 337 font-size: 17px; 338 color: #ffffff; 339 font-family: sans-serif; 340 background-size: cover; 341 background-image: url(../images/cog-white.png); 342 box-shadow: 0 2px 1px rgba(46, 68, 83, 0.15); 343 } 344 345 span.item-settings:hover { 346 background-color: hsla(87, 92%, 35%, 1); 347 } 348 349 li.item.available-item.already-in-page, li.item.available-item.pro-only { 350 position: relative; 351 } 352 353 .checked-icon { 354 background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADUAAAA1CAYAAADh5qNwAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAAWdEVYdENyZWF0aW9uIFRpbWUAMDYvMDIvMTYnfI6lAAAC2klEQVRogd3Yz0sUYRjA8e/s7EZiKFJUCqUXPRR22NybkYJastih0LsXw8WC6NYxAjGjDl38A2L7gRB0ELqn7WoULmLaIpZtRUv4I3fV2s3pIKwMu+o7szO78+5zfOZ9n/f9zMu878wovGrUKK0YcRV7BhbHCBAoJdQIENC6IlqpoDIggFJA6UAgPyoLBHKjcoJAXtSeIJATtS8I5EMdCAK5UEIgkAclDAI5UIZAYBPqkKISvhBE64qwenmC1mM+s6UMg8AGlKqoPPEO0VR5FoBKzxEeN94xU8oUCMBtZrS9QlVcvPQ9outESyanAbPrC0ZLmQaBhSvlVlRenH+gAwG8jo9zffqukVJ5gUBgpU6VnaS7uoPvW3GefR0DNfs+qIpK0Hufq9Vtunx4JcK1d7fY+LclOp+8QSCAmr44SpWngpSWpvmol4HIPVB2YS7FRdA7SHdNu67f1OoMneFAwUEggKryVADgUdz01/awrWncnBncubgNT31D9NRc0vX5sDZHe6iPtVRCdB6WgUDgmfqdTu42VlwE6noYPnObMvUwz33DWaD3ax9pmegtGghAOejHS335aUabHnKuoiGTS22nWdyM0VBep2sbWf9E65teltProuNbDgKBlYoml/CHA8wnP2dyHpc7G/Q7Ssd4X9FBILilx7bi+EMB5hKLOa/PJhbwh/r5mVoWHdc2EBg4pxY2YlyZvEE08UWXn08u0hkKEPsTFy1lKwgMHr7R5BL+yYHMG8LU6gxtb/tY2vwhWsJ2EAhsFLmivryWzuPNBL+N8evvimi3goDAJMpEFAwEhfmeKigI7EcVHAT2oooCAvtQRQOBPaiigsB6VNFBYC3KESCwDuUYEFiDchQI8kc5DgT5oRwJAvMox4LAHMrRIDCOcjwIjKGkAIE4ShoQiKGkAsHBKOlAsD9KShDsjZIWBLlRUoMgGyU9CPSokgDBLqpkQLCDKikQwH9CLnrcJy4axQAAAABJRU5ErkJggg=='); 355 width: 53px; 356 height: 53px; 357 margin: auto; 358 background-repeat: no-repeat; 359 background-position: center; 360 z-index: 1000; 361 position: absolute; 362 top: 0px; 363 left: 0px; 364 display: none; 365 } 366 367 .already-in-page .checked-icon { 368 display: block; 369 } 370 371 .pro-icon { 372 background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADUAAAA1CAYAAADh5qNwAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAAWdEVYdENyZWF0aW9uIFRpbWUAMDYvMDIvMTYnfI6lAAACq0lEQVRogd3YLVPrQBSA4bf3XtWgg8FQU1WPAUE0/AUMmApApwYDOrjOgK9vDaYedDEYojDRJLZXnNm2KaVNNpvPM9PZ2e20u0/PfqWt+dnZnGbF8E/ZIzAcQ6DfJNQQ6DMez5uCWoAAmoCKgaD+qB8gqDdqIwjgXy7d2TY4DoQhTKdSmo1fQQAt4+eU48DNzbIeReB58PpqqoetIDA9/Y6OBBQEMJlI2W6D60KvZ6KHnSAwjbq8lNJ14elJgL4vbavZ04tEIDCNsu14PQzh/n75Xqej+82JQWAaFQRSXl3F21T797fOt6YCAfy963bvdHoC5Jfv9+HkBL6+4OMDjo/h4EDWUBjCxQV0u/D2Bi8vaXtIDYIsu9/6LhcEsqbW20HWleum3dq1QKB7TqmB+z6MRoKxbcnOdCpAx5G22QzG48JAoIOyrPiamc0Epw5c25a65+mMBzKCQHf6dTrw8CBnUBRJuR6+r7ONZwZBGtT5ubzCEB4fpW0Vdn0t06/Xk2x6XqFTbjWSoW5v4fR0WVeIvb0lTG8zUDEE+q3JZD6fZ7+17T6nFMj3YTCQst2W9fP5KZAogsPD+FpLHguQzoc3xXaUZclgAfb3JQsqE+pAVbD3d7kapQvjIEgy/SxLppjCge4msB4bQcVMvzCUTKiLKcDzc9Z+c8mQimR3v3XYYJD5cpoXCNJcaFdhaqNIH7mDQOfwtSw5r0ajtH0lAplYU+Yf5zdH4gwVs1Fkj0Km3GrkjSocBPmiSgFBfqjSQJAPqlQQmEeVDgKzqEqAwNx/6YsHvNJFmMmUsSdWU5EVVTkQZENVEgT6qMqCQA9VaRCkR1UeBOlQtQBBclRtQJAMVSsQ7EbVDgTbUbUEwe+o2oJgM6rWIPiJqj0I4qhGgGCJagwIBNUoEMB/ucNyXtcjxMkAAAAASUVORK5CYII='); 373 width: 53px; 374 height: 53px; 375 margin: auto; 376 background-repeat: no-repeat; 377 background-position: center; 378 left: 0px; 379 position: absolute; 380 z-index: 1000; 381 top: 0px; 382 display: none; 383 } 384 385 .pro-only .pro-icon { 386 display: block; 387 } 388 389 .available-item-hover-button { 390 background-color: rgb(0, 133, 186); 391 /* height: 31px; */ 392 -moz-border-radius: 3px; 393 -webkit-border-radius: 3px; 394 border-radius: 3px; 395 line-height: 31px; 396 text-align: center; 397 top: 50%; 398 position: absolute; 399 margin-top: -16px; 400 margin-left: -70px; 401 cursor: pointer; 402 left: 50%; 403 width: 140px; 404 box-shadow: 0 1px 0 #006799; 405 color: white; 406 display: none; 407 } 408 409 .already-in-page span.available-item-hover-button, 410 .already-in-page:hover span.available-item-hover-button { 411 display: none !important; 412 } 413 414 .available-item-hover { 415 display: none; 416 top: 0; 417 bottom: 0; 418 left: 0; 419 right: 0; 420 position: absolute; 421 } 422 423 .list .available-item { 424 min-height: 100px; 425 } 426 427 .list .already-in-page { 428 } 429 430 ul.disabled { 431 opacity: 0.2; 432 } 433 434 #customize-controls .more-sections h3 { 435 font-size: 52px; 436 font-weight: bold; 437 line-height: 120%; 438 color: rgb(172, 172, 172); 439 text-align: center; 440 margin-bottom: 10px; 441 } 442 443 #customize-controls .more-sections span { 444 font-size: 15px; 445 font-weight: bold; 446 line-height: 130%; 447 color: rgb(149, 149, 149); 448 text-align: left; 449 display: block; 450 text-align: center; 451 margin-bottom: 10px; 452 } 453 454 #customize-controls .more-sections span.menu-link { 455 color: #555; 456 font-size: 12px; 457 font-weight: 500; 458 text-align: left; 459 margin-top: 20px; 460 padding: 10px 6px; 461 border: 1px solid #DCDCDC; 462 background-color: #F3F3F3; 463 } 464 465 #customize-controls .more-sections a { 466 margin: auto; 467 } 468 469 .scrn_wrapper { 470 padding: 6px; 471 background-color: #EEEEEE; 472 } 473 474 .scrn_wrapper img { 475 max-width: 100%; 476 } 477 478 #customize-control-header_image .container { 479 height: auto !important; 480 } 481 482 #customize-controls .rows-list.list .item span.description { 483 position: relative; 484 bottom: 0px; 485 left: 0px; 486 display: block; 487 padding: 6px; 488 background: rgba(0, 0, 0, 0.68); 489 color: white; 490 width: 100%; 491 box-sizing: border-box; 492 font-size: 11px; 493 -webkit-box-align: 2px; 494 line-height: 140%; 495 font-weight: 300; 496 } 497 498 .image-holder { 499 width: 100%; 500 box-sizing: border-box; 501 background-size: 100%; 502 background-repeat: no-repeat; 503 min-height: 80px; 504 vertical-align: middle; 505 display: flex; 506 align-items: center; 507 } 508 509 .image-holder img { 510 display: block; 511 width: 100%; 512 } 513 514 button#cp-item-ok.full.insert-section, button#cp-item-section-ok.insert-section { 515 width: 100%; 516 border-bottom-left-radius: 10px; 517 } 518 519 ul.content-list { 520 margin: 46px 0px; 521 text-align: center; 522 letter-spacing: 30px; 523 } 524 525 li.content-type { 526 display: inline-block; 527 width: 80px; 528 height: 80px; 529 border-radius: 4px; 530 border: 2px dashed #f1f2f3; 531 background-repeat: no-repeat; 532 background-position: center; 533 background-size: 62%; 534 image-rendering: pixelated; 535 cursor: pointer; 536 position: relative; 537 } 538 539 ul.content-list .title { 540 font-size: 8px; 541 margin: 0; 542 position: absolute; 543 bottom: 4px; 544 text-align: center; 545 text-transform: uppercase; 546 font-weight: bold; 547 color: #4F4E51; 548 -webkit-transition: color 0.3s; 549 transition: color 0.3s; 550 width: 86px; 551 display: block; 552 line-height: 10px; 553 min-height: 15px; 554 letter-spacing: normal; 555 } 556 557 #cp-items-footer button#cp-item-content-ok { 558 width: 100%; 559 border-bottom-left-radius: 10px; 560 } 561 562 .section-icon { 563 width: 24px; 564 height: 24px; 565 float: right; 566 opacity: 0.4; 567 background-repeat: no-repeat; 568 border-radius: 50%; 569 transition: all .4s; 570 background-position: center; 571 } 572 573 .open-right { 574 background-image: url('../images/swap.png'); 575 } 576 577 span.setting.section-icon { 578 background-image: url('../images/cog.png'); 579 } 580 581 span.add-section-plus { 582 background-image: url('../images/plus-black.png'); 583 } 584 585 h3:hover .section-icon { 586 opacity: 0.8; 587 } 588 589 .section-icon:hover { 590 opacity: 1; 591 background-color: #d1d1d1; 592 } 593 594 .sections-list-reorder { 595 padding: 20px; 596 } 597 598 .add-section-container { 599 margin: auto; 600 padding: 20px 0px; 601 clear: both; 602 } 603 604 a.button-primary.cp-add-section { 605 font-size: 14px; 606 height: 40px; 607 line-height: 40px; 608 width: 100%; 609 text-transform: uppercase; 610 position: static; 611 margin: auto; 612 text-align: center; 613 } 614 615 span.close-panel { 616 cursor: pointer; 617 background-repeat: no-repeat; 618 width: 20px; 619 height: 20px; 620 transition: background 0.3s; 621 display: block; 622 background-color: #666666; 623 border-radius: 100%; 624 text-align: center; 625 text-rendering: optimizeLegibility; 626 line-height: 19px; 627 font-size: 17px; 628 color: #ffffff; 629 font-family: sans-serif; 630 background-image: url(../images/close.png); 631 background-size: 50%; 632 background-position: center; 633 position: relative; 634 top: 10px; 635 left: 270px; 636 margin-bottom: 20px; 637 z-index: 2; 638 } 639 640 span.close-panel:hover { 641 background-color: #4d4d4d; 642 } 643 644 .reorder-handler { 645 float: left; 646 width: 20px; 647 height: 45px; 648 background: url(../images/reorder-handler.png?x=3); 649 background-position: center; 650 background-repeat: no-repeat; 651 margin-top: -4px; 652 margin-bottom: -4px; 653 margin-right: 4px; 654 cursor: ns-resize; 655 background-color: #f0f0f0; 656 } 657 658 .full_row.item:hover .reorder-handler:hover { 659 background-color: hsl(0, 0%, 93%); 660 } 661 662 .label-wrapper { 663 float: left; 664 width: calc(100% - 120px); 665 max-width: calc(100% - 120px); 666 } 667 668 .full_row.item input.item-label { 669 border: none; 670 padding: 0px; 671 margin: 0px 0px 2px 0px; 672 padding: 3px 4px 2px 1px; 673 border: none; 674 background-color: transparent; 675 font-size: 12px; 676 display: block; 677 border-bottom: 1px solid hsla(0, 0%, 88%, 1); 678 outline: none; 679 box-sizing: border-box; 680 font-weight: normal; 681 cursor: pointer; 682 width: 100%; 683 } 684 685 .full_row.item input.item-label:hover, .full_row.item input.item-label:focus { 686 background-color: #ffffff; 687 border-bottom: 1px solid #0085ba; 688 cursor: text; 689 box-shadow: 0px 1px 0px rgb(0, 133, 186); 690 color: #0083b7; 691 } 692 693 .anchor-info { 694 font-size: 8px; 695 height: 12px; 696 line-height: 10px; 697 padding-left: 4px; 698 margin: 0px; 699 display: block; 700 letter-spacing: 0.4px; 701 float: none; 702 clear: both; 703 padding-top: 1px; 704 cursor: default; 705 color: #000000; 706 } 707 708 li.full_row.item:hover .anchor-info { 709 color: #000000; 710 } 711 712 ul#cp-items .mdi { 713 font-size: 40px; 714 } 715 716 button.button.cp-mdi-visible { 717 margin-left: 20px; 718 } 719 720 #cp-items .image-controls input[type=checkbox], #cp-items .image-wrapper input[type=checkbox] { 721 display: inline-block; 722 width: auto; 723 padding: 2px !important; 724 height: 20px; 725 vertical-align: top; 726 width: 20px; 727 margin-right: 10px; 728 } 729 730 #cp-items .image-controls label, #cp-items .image-wrapper label { 731 font-size: 11px; 732 font-weight: 500; 733 line-height: 120%; 734 color: rgb(68, 68, 68); 735 letter-spacing: 1px; 736 clear: both; 737 float: none; 738 display: block; 739 } 740 741 #cp-items .image-wrapper label { 742 margin-top: 10px; 743 margin-bottom: -10px; 744 background: white; 745 margin-right: -10px; 746 margin-left: -10px; 747 border: none; 748 padding-top: 10px; 749 line-height: 19px; 750 } 751 752 h3.accordion-section-title.no-chevron:after { 753 content: none; 754 display: none; 755 } 756 757 ul#available_footers { 758 padding: 20px; 759 background: #ffffff; 760 } 761 762 #TB_window { 763 background-color: transparent; 764 height: auto !important; 765 border-radius: 10px; 766 top: 20px !important; 767 margin-top: 0px !important; 768 } 769 770 #TB_title { 771 padding: 10px; 772 background-color: #fcfcfc; 773 border-top-left-radius: 10px; 774 border-top-right-radius: 10px; 775 overflow: hidden; 776 } 777 778 #TB_closeWindowButton { 779 right: 10px; 780 } 781 782 div#TB_ajaxContent { 783 background-color: #ffffff; 784 height: auto !important; 785 width: 100% !important; 786 max-height: 70vh !important; 787 box-sizing: border-box; 788 border-bottom-left-radius: 10px; 789 border-bottom-right-radius: 10px; 790 } 791 792 #TB_closeWindowButton:focus { 793 outline: none !important; 794 } 795 796 #TB_closeWindowButton:focus .tb-close-icon { 797 border-radius: 100% 798 } 799 800 .control-wrapper { 801 padding: 20px 20px; 802 overflow: hidden; 803 background: #fff; 804 display: block; 805 left: 0px !important; 806 height: calc(100% - 66px); 807 overflow-y: auto; 808 width: 270px; 809 } 810 811 .control-wrapper input { 812 width: 100%; 813 } 814 815 .customize-control-radio-html label { 816 position: relative; 817 } 818 819 .customize-control-radio-html input { 820 display: none; 821 } 822 823 .customize-control-radio-html input + label .image-clickable { 824 height: 100px; 825 border: 1px solid transparent; 826 } 827 828 .customize-control-radio-html input + label { 829 position: relative; 830 display: block; 831 width: 40%; 832 float: left; 833 padding: 10px; 834 } 835 836 .customize-control-radio-html input:checked + label .image-clickable { 837 -webkit-box-shadow: 0 0 5px 2px rgba(0, 0, 0, .25); 838 box-shadow: 0 0 5px 2px rgba(0, 0, 0, .25); 839 border: 1px solid #3498DB; 840 } 841 842 .cp-color-boxes .color-container, 843 .cp-color-boxes input[data-customize-setting-link] { 844 float: left; 845 display: inline-block; 846 width: 60px; 847 height: 40px; 848 margin: 0px 4px; 849 border-radius: 4px; 850 position: relative; 851 font-size: 10px; 852 } 853 854 .cp-color-boxes input[data-customize-setting-link] { 855 visibility: hidden; 856 } 857 858 .cp-color-boxes input.big[data-customize-setting-link] { 859 width: 100px; 860 height: 80px; 861 appearance: none !important; 862 } 863 864 .cp-color-boxes input[data-customize-setting-link]:checked + .check-icon { 865 position: absolute !important; 866 width: 20px !important; 867 height: 20px !important; 868 right: -10px !important; 869 top: -8px !important; 870 color: #ffffff; 871 background-color: #38d638; 872 background-image: url('../images/check.png'); 873 content: " "; 874 background-position: center; 875 background-repeat: no-repeat; 876 border-radius: 50%; 877 } 878 879 .cp-color-boxes input.big[data-customize-setting-link]:checked + .check-icon { 880 width: 30px !important; 881 height: 30px !important; 882 right: -14px !important; 883 top: -14px !important; 884 background-size: 20px; 885 886 } 887 888 .cp-color-boxes label { 889 float: left; 890 padding: 8px; 891 height: auto; 892 margin: auto; 893 } 894 895 .cp-color-boxes label .css-class-container { 896 display: inline-block; 897 border: 1px solid #c3c3c3; 898 box-sizing: border-box; 899 box-shadow: 2px 1px 5px -1px rgba(46, 68, 83, 0.44); 900 position: relative; 901 } 902 903 .cp-color-boxes label .css-class-container input { 904 background: transparent; 905 border: none; 906 outline: none; 907 box-shadow: none; 908 } 909 910 .cp-color-boxes label:first-of-type { 911 /* margin-left:24px; */ 912 } 913 914 .customize-control-kirki-color > label { 915 display: block; 916 width: 100%; 917 } 918 919 .customize-control-kirki-color .customize-control-title { 920 display: inline-block; 921 } 922 923 .customize-control-kirki-color .sp-replacer { 924 float: right; 925 margin-right: 0px; 926 position: absolute; 927 right: 0px; 928 bottom: 0; 929 margin-top: -5px; 930 margin-bottom: 0; 931 } 932 933 934 #page_full_rows li.item.full_row + .empty { 935 display: none; 936 } 937 938 #page_full_rows li.empty { 939 padding: 40px 20px 20px 20px; 940 text-align: center; 941 font-size: 18px; 942 text-transform: uppercase; 943 color: rgb(187, 187, 187); 944 } 945 946 .cp-multi-image-item { 947 clear: both; 948 margin-bottom: 10px; 949 display: block; 950 width: 100%; 951 padding: 4px; 952 border: 1px solid #eeeeee; 953 box-shadow: 0 2px 1px rgba(46, 68, 83, 0.15); 954 position: relative; 955 } 956 957 .cp-multi-image-item .thumbnail.thumbnail-image { 958 width: 100%; 959 padding-right: 10px; 960 min-height: 100px; 961 box-sizing: border-box; 962 margin: 0px; 963 display: block; 964 float: none; 965 vertical-align: middle; 966 } 967 968 .cp-multi-image-item .thumbnail.thumbnail-image img { 969 margin: auto; 970 display: inline-block; 971 } 972 973 .cp-multi-image-item .actions { 974 width: auto; 975 box-sizing: border-box; 976 position: absolute; 977 background-color: rgb(255, 255, 255); 978 padding: 4px 8px; 979 bottom: 20px; 980 border: 1px solid hsla(0, 0%, 73%, 1); 981 border-right: none; 982 border-bottom: none; 983 right: 14px; 984 } 985 986 .cp-multi-image-item .actions span.open-right { 987 /* background-color:#ffffff; */ 988 opacity: 1; 989 } 990 991 .cp-multi-image-item .actions span { 992 float: none; 993 display: inline-block; 994 clear: both; 995 } 996 997 .cp-multi-image-item .actions .button { 998 display: block !important; 999 float: none !important; 1000 margin: 4px !important; 1001 clear: both !important; 1002 width: auto !important; 1003 } 1004 1005 #customize-theme-controls .cp-label-control { 1006 margin-top: 10px; 1007 padding-top: 20px; 1008 margin-bottom: 3px; 1009 border-top: 2px solid hsla(0, 0%, 75%, 1); 1010 text-align: center; 1011 } 1012 1013 .cp-label-control .customize-control-title { 1014 font-size: 16px; 1015 text-transform: uppercase; 1016 } 1017 1018 .fic-icon-preview i.mdi { 1019 font-size: 50px; 1020 padding: 10px; 1021 background-color: white; 1022 border: 1px solid #ddd; 1023 -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.07); 1024 box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.07); 1025 width: 80px; 1026 height: 80px; 1027 text-align: center; 1028 line-height: 80px; 1029 display: inline-block; 1030 } 1031 1032 .fic-icon-preview { 1033 float: left; 1034 } 1035 1036 .fic-controls { 1037 float: left; 1038 vertical-align: middle; 1039 height: 80px; 1040 margin-left: 10px; 1041 padding: 10px 0px; 1042 } 1043 1044 #customize-controls .customize-control-kirki input, #customize-controls textarea { 1045 font-size: 13px; 1046 } 1047 1048 #customize-controls .customize-control-kirki input[type="checkbox"] { 1049 margin-right: 8px; 1050 } 1051 1052 #customize-controls .customize-control-kirki-radio-buttonset .buttonset .switch-label { 1053 font-size: 14px; 1054 padding: 4px 10px; 1055 } 1056 1057 #customize-controls .customize-control-kirki-radio-buttonset .buttonset { 1058 height: 26px; 1059 } 1060 1061 #customize-controls .customize-control-kirki-radio-buttonset .buttonset label { 1062 display: block; 1063 float: left; 1064 } 1065 1066 #customize-controls .customize-control-kirki-spacing .wrapper { 1067 padding: 0px 10px 10px 10px; 1068 box-shadow: none; 1069 border: 1px solid #cecece; 1070 box-sizing: border-box; 1071 width: 100%; 1072 margin-right: 0px; 1073 } 1074 1075 .customize-control.customize-control-kirki-select .selectize-control > .selectize-input > .item { 1076 letter-spacing: -0.2px; 1077 } 1078 1079 .customize-control-ope-info-pro p, .customize-control-ope-info p { 1080 background: hsla(60, 100%, 87%, 1); 1081 border: 1px solid #cecece; 1082 font-weight: normal; 1083 box-sizing: border-box; 1084 font-size: 0.9em; 1085 border-radius: 4px; 1086 padding: 0.5em 1em; 1087 } 1088 1089 .customize-control-ope-info span { 1090 padding: 2px 10px; 1091 background: hsla(60, 100%, 87%, 1); 1092 font-weight: normal; 1093 box-sizing: border-box; 1094 } 1095 1096 .customize-control-ope-info-pro .upgrade-to-pro, 1097 .customize-control-ope-info .upgrade-to-pro { 1098 margin-top: 1em; 1099 margin-left: 0; 1100 } 1101 1102 .customize-control-ope-info-pro p { 1103 border: 1px solid #c3c3c3; 1104 font-size: 1em; 1105 background-color: rgb(185, 219, 247); 1106 } 1107 1108 a.pro-features-button { 1109 color: inherit; 1110 } 1111 1112 li#accordion-section-materialis-pro { 1113 margin-top: -16px; 1114 border-top: none !important; 1115 } 1116 1117 .ope-pro-header.accordion-section-title:hover, 1118 .ope-pro-header.accordion-section-title { 1119 border-top: none !important; 1120 border-left: none !important; 1121 } 1122 1123 .ope-pro-header.accordion-section-title:after { 1124 display: none !important; 1125 } 1126 1127 .ope-pro-header.accordion-section-title .button { 1128 background-color: #ff6700; 1129 border-color: #d65600; 1130 color: #ffffff; 1131 } 1132 1133 .button.button-orange { 1134 background-color: #ff6700; 1135 border-color: #d65600; 1136 color: #ffffff; 1137 -webkit-box-shadow: none; 1138 box-shadow: none; 1139 } 1140 1141 .button.button-orange:focus { 1142 outline: none; 1143 } 1144 1145 a.button.button-orange:focus, 1146 a.button.button-orange:hover { 1147 background-color: #ff7b24; 1148 color: #ffffff; 1149 border-color: hsla(24, 100%, 46%, 1); 1150 } 1151 1152 .ope-pro-header.accordion-section-title .button:focus { 1153 outline: none; 1154 } 1155 1156 ul#sub-accordion-section-header_layout.open { 1157 min-height: calc(100vh - 45px) !important; 1158 } 1159 1160 /*CUSTOMIZER ICONS*/ 1161 1162 li#accordion-section-header_layout { 1163 margin-bottom: 1rem; 1164 } 1165 1166 #customize-controls li#accordion-section-header_layout, 1167 #customize-controls li#accordion-section-header_layout > h3 { 1168 background-color: #55616d; 1169 border-left: 0; 1170 color: #ffffff; 1171 background-image: linear-gradient(90deg, #215CE5 0%, #654EA3 100%); 1172 /*background: linear-gradient(90deg, #654EA3 0%, hsl(249, 98%, 72%) 100%);*/ 1173 } 1174 1175 #customize-controls li#accordion-section-header_layout:hover, 1176 #customize-controls li#accordion-section-header_layout > h3:hover { 1177 background-color: #657381; 1178 border-left-color: #41bff1; 1179 } 1180 1181 #customize-controls li#accordion-section-header_layout > h3:after { 1182 color: #ffffff; 1183 } 1184 1185 li#accordion-section-header_layout h3:before { 1186 width: 20px; 1187 height: 20px; 1188 font-size: 20px; 1189 font-family: dashicons; 1190 text-decoration: inherit; 1191 font-weight: 400; 1192 font-style: normal; 1193 vertical-align: top; 1194 text-align: center; 1195 content: "\f100"; 1196 vertical-align: middle; 1197 margin-right: 6px; 1198 display: inline-block; 1199 line-height: 18px; 1200 } 1201 1202 /*WEB GRADIENTS*/ 1203 .customize-control .webgradient { 1204 height: 200px; 1205 margin-bottom: 10px; 1206 } 1207 1208 .customize-control .webgradient + .label { 1209 width: 100%; 1210 bottom: 0px; 1211 padding: 4px; 1212 background-color: #444444; 1213 color: #ffffff; 1214 marign-top: 0px; 1215 margin-bottom: 10px; 1216 box-sizing: border-box; 1217 text-align: center; 1218 } 1219 1220 li.attachment.webgradients-image { 1221 width: 20%; 1222 overflow: hidden; 1223 } 1224 1225 .attachment-preview .webgradient { 1226 height: 100%; 1227 } 1228 1229 .customize-control-sidebar-button-group label button { 1230 width: 100%; 1231 min-height: 30px; 1232 } 1233 1234 /*RIGHT SIDEBAR*/ 1235 1236 #customize-theme-controls ul.section-settings-container.accordion-section-content { 1237 background: #ececec; 1238 margin-top: 30px; 1239 padding-left: 20px; 1240 padding-right: 20px; 1241 box-sizing: border-box; 1242 padding-top: 0px; 1243 } 1244 1245 .customizer-right-section > ul { 1246 height: calc(100% - 53px); 1247 } 1248 1249 .customizer-right-section { 1250 position: fixed; 1251 left: 300px; 1252 top: 0px; 1253 width: 300px; 1254 background: #eeeeee; 1255 height: 100%; 1256 display: block; 1257 width: 310px; 1258 transition: width 0.2s; 1259 height: 0px; 1260 opacity: 0; 1261 visibility: hidden; 1262 } 1263 1264 .customizer-right-section.active { 1265 width: 310px; 1266 height: 100%; 1267 opacity: 1; 1268 visibility: visible; 1269 border-right: 1px solid #bdbdbd; 1270 } 1271 1272 .customizer-right-section > ul { 1273 display: block; 1274 left: 0px !important; 1275 height: calc(100% - 66px); 1276 overflow-y: auto; 1277 width: 270px; 1278 padding-top: 0px; 1279 } 1280 1281 .customizer-right-section > ul .customize-section-description-container { 1282 display: none; 1283 } 1284 1285 .customizer-right-section.active.floating { 1286 height: auto; 1287 transform: translateY(-50%); 1288 border-bottom: 1px solid #bdbdbd; 1289 } 1290 1291 .default-input { 1292 position: relative; 1293 border-radius: 50%; 1294 height: 50px; 1295 width: 50px; 1296 /* box-shadow: inset 0 0 1px #888; */ 1297 border: 1px solid #ccc; 1298 /* background: #ffffff; /1* Old browsers *1/ */ 1299 /* background: -moz-linear-gradient(top, #ffffff 0%, #f1f1f1 3%, #e1e1e1 96%, #f6f6f6 100%); /1* FF3.6-15 *1/ */ 1300 /* background: -webkit-linear-gradient(top, #ffffff 0%,#f1f1f1 3%,#e1e1e1 96%,#f6f6f6 100%); /1* Chrome10-25,Safari5.1-6 *1/ */ 1301 /* background: linear-gradient(to bottom, #ffffff 0%,#f1f1f1 3%,#e1e1e1 96%,#f6f6f6 100%); /1* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ *1/ */ 1302 /* filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0 ); /1* IE6-9 *1/ */ 1303 margin: 2em auto; 1304 cursor: pointer; 1305 outline: none; 1306 } 1307 1308 .default-input:focus { 1309 /* box-shadow: inset 0 0 1px #04f; */ 1310 border: 1px solid #0af; 1311 cursor: pointer; 1312 } 1313 1314 .angle-input-pivot { 1315 position: absolute; 1316 left: 0; 1317 right: 0; 1318 top: 50%; 1319 margin-top: -1px; 1320 height: 2px; 1321 /* background-color: #aaa; */ 1322 } 1323 1324 .default-input .angle-input-pivot::before { 1325 content: ''; 1326 position: absolute; 1327 right: 5px; 1328 top: 50%; 1329 width: 10px; 1330 margin-top: -6px; 1331 height: 10px; 1332 border-radius: 50%; 1333 background-color: #fff; 1334 /* box-shadow: 0 0 1px #888; */ 1335 border: 1px solid #ccc; 1336 } 1337 1338 .default-input:focus .angle-input-pivot::before { 1339 /* box-shadow: 0 0 1px #04f; */ 1340 border: 1px solid #0af; 1341 } 1342 1343 select#media-attachment-date-filters { 1344 width: 100%; 1345 max-width: 100%; 1346 } 1347 1348 .section-list-item { 1349 width: 100%; 1350 background: hsl(0, 0%, 100%); 1351 border: 1px solid #c1c1c1; 1352 position: relative; 1353 height: auto; 1354 min-height: 20px; 1355 line-height: 30px; 1356 overflow: hidden; 1357 word-wrap: break-word; 1358 box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.17); 1359 box-sizing: border-box; 1360 } 1361 1362 .section-list-item .handle.reorder-handler { 1363 height: 35px; 1364 } 1365 1366 .customize-control-sectionsetting.sortable { 1367 max-height: 400px; 1368 overflow: auto; 1369 } 1370 1371 a.add-item.button-primary { 1372 display: block; 1373 float: none; 1374 margin: 10px auto; 1375 width: 100%; 1376 text-align: center; 1377 position: static; 1378 } 1379 1380 .data-edit-popup select { 1381 font-size: 14px; 1382 height: 40px; 1383 outline: none; 1384 vertical-align: middle; 1385 background-color: #fff; 1386 border: 1px solid #f1f1f1; 1387 border-radius: 3px; 1388 box-shadow: none; 1389 padding: 0 12px; 1390 -webkit-appearance: none; 1391 -moz-appearance: none; 1392 appearance: none; 1393 background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAAASUlEQVQ4jWNgGAWDD/AyMDDcZmBgsMQiZwmV4yVkSDoDA8NnBgYGOzTNHxgYGPKJdQmyISRrhoF8BgaGj1BMsmYYyIHiUUBLAAAPcAw7q3NAWQAAAABJRU5ErkJggg=='); 1394 background-repeat: no-repeat; 1395 background-position: right 5px center; 1396 padding-right: 20px; 1397 } 1398 1399 /* fix safari disapearing bug */ 1400 1401 #customize-theme-controls .customize-pane-child.accordion-section-content { 1402 padding-top: 0px; 1403 padding-bottom: 0px; 1404 } 1405 1406 #customize-theme-controls .customize-pane-child.accordion-section-content.open { 1407 padding-top: 12px; 1408 padding-bottom: 12px; 1409 } 1410 1411 #customize-controls .description { 1412 color: #555d66; 1413 font-weight: 400; 1414 background-color: #ffffbd; 1415 padding: 5px; 1416 } 1417 1418 #customize-controls .description.customize-section-description { 1419 background: transparent; 1420 } 1421 1422 /*4.8 color picker style*/ 1423 1424 .wp-color-picker { 1425 width: 80px 1426 } 1427 1428 .wp-picker-container .hidden { 1429 display: none 1430 } 1431 1432 .wp-color-result { 1433 background-color: #f7f7f7; 1434 border: 1px solid #ccc; 1435 -webkit-border-radius: 3px; 1436 border-radius: 3px; 1437 cursor: pointer; 1438 height: 22px; 1439 margin: 0 6px 6px 0; 1440 position: relative; 1441 -webkit-user-select: none; 1442 -moz-user-select: none; 1443 -ms-user-select: none; 1444 user-select: none; 1445 vertical-align: bottom; 1446 display: inline-block; 1447 padding-left: 30px; 1448 -webkit-box-shadow: 0 1px 0 #ccc; 1449 box-shadow: 0 1px 0 #ccc; 1450 top: 0 1451 } 1452 1453 .wp-color-result:after { 1454 background: #f7f7f7; 1455 -webkit-border-radius: 0 2px 2px 0; 1456 border-radius: 0 2px 2px 0; 1457 border-left: 1px solid #ccc; 1458 color: #555; 1459 content: attr(title); 1460 display: block; 1461 font-size: 11px; 1462 line-height: 22px; 1463 padding: 0 6px; 1464 position: relative; 1465 right: 0; 1466 text-align: center; 1467 top: 0 1468 } 1469 1470 .wp-color-result:focus, .wp-color-result:hover { 1471 background: #fafafa; 1472 border-color: #999; 1473 color: #23282d 1474 } 1475 1476 .wp-color-result:focus:after, .wp-color-result:hover:after { 1477 color: #23282d; 1478 border-color: #a0a5aa; 1479 border-left: 1px solid #999 1480 } 1481 1482 .wp-color-result.wp-picker-open:after { 1483 content: attr(data-current) 1484 } 1485 1486 .wp-picker-container, .wp-picker-container:active { 1487 display: inline-block; 1488 outline: 0; 1489 } 1490 1491 .wp-color-result:focus { 1492 border-color: #5b9dd9; 1493 -webkit-box-shadow: 0 0 3px rgba(0, 115, 170, .8); 1494 box-shadow: 0 0 3px rgba(0, 115, 170, .8) 1495 } 1496 1497 .wp-picker-open + .wp-picker-input-wrap { 1498 display: inline-block; 1499 vertical-align: top 1500 } 1501 1502 .wp-picker-container .button { 1503 margin-left: 6px 1504 } 1505 1506 .wp-picker-container .iris-square-slider .ui-slider-handle:focus { 1507 background-color: #555 1508 } 1509 1510 .wp-picker-container .iris-picker { 1511 -webkit-border-radius: 0; 1512 border-radius: 0; 1513 border-color: #ddd; 1514 margin-top: 6px; 1515 margin-bottom: 14px; 1516 } 1517 1518 .wp-picker-container input[type=text].wp-color-picker { 1519 width: 65px; 1520 font-size: 12px; 1521 font-family: monospace; 1522 line-height: 16px; 1523 margin: 0 1524 } 1525 1526 .wp-color-picker::-webkit-input-placeholder { 1527 color: #72777c 1528 } 1529 1530 .wp-color-picker::-moz-placeholder { 1531 color: #72777c; 1532 opacity: 1 1533 } 1534 1535 .wp-color-picker:-ms-input-placeholder { 1536 color: #72777c 1537 } 1538 1539 .wp-picker-container input[type=text].iris-error { 1540 background-color: #ffebe8; 1541 border-color: #c00; 1542 color: #000 1543 } 1544 1545 .wp-color-result.wp-picker-open:after { 1546 content: attr(title); 1547 } 1548 1549 .customize-control-kirki-checkbox input[type="checkbox"]:before, 1550 .customize-control-kirki-multicheck input[type="checkbox"]:before, 1551 .customize-control-repeater input[type="checkbox"]:before { 1552 display: none; 1553 } 1554 1555 .customize-control-kirki-checkbox input[type="checkbox"]:checked:before, 1556 .customize-control-kirki-multicheck input[type="checkbox"]:checked:before, 1557 .customize-control-repeater input[type="checkbox"]:checked:before { 1558 display: block; 1559 } 1560 1561 li.category-title.closeable { 1562 position: relative; 1563 } 1564 1565 li.category-title.closeable:after { 1566 content: "\f347"; 1567 1568 font: normal 18px/1 dashicons; 1569 speak: none; 1570 display: block; 1571 -webkit-font-smoothing: antialiased; 1572 -moz-osx-font-smoothing: grayscale; 1573 text-decoration: none !important; 1574 position: absolute; 1575 right: 8px; 1576 top: 50%; 1577 margin-top: -9px; 1578 } 1579 1580 li.category-title.closeable[data-item-open]:after { 1581 content: "\f343"; 1582 } 1583 1584 li.category-title + li.available-item { 1585 margin-top: 40px; 1586 } 1587 1588 span.customize-control-title:first-letter { 1589 text-transform: uppercase; 1590 } 1591 1592 #customize-controls .customize-control-kirki .wp-picker-active input { 1593 display: inline-block !important; 1594 } 1595 1596 .data-edit-popup .customize-control-checkbox input { 1597 margin-left: 0px; 1598 } 1599 1600 li.category-title.closeable { 1601 user-select: none; 1602 cursor: pointer; 1603 } 1604 1605 .pro-popup-preview-image { 1606 box-shadow: 0px 10px 30px 0 rgba(49, 52, 57, 0.3), 0 10px 30px rgba(0, 0, 0, 0.08); 1607 width: 75%; 1608 display: block; 1609 margin: 0px auto 40px auto; 1610 border-radius: 10px; 1611 } 1612 1613 .pro-popup-preview-container { 1614 text-align: center; 1615 padding: 30px 0px; 1616 } 1617 1618 .pro-popup-preview-container h3 { 1619 margin-bottom: 0; 1620 } 1621 1622 .pro-popup-preview-container p { 1623 margin-top: 0; 1624 margin-bottom: 0; 1625 } 1626 1627 .pro-popup-preview-container a.button.button-orange { 1628 padding: 4px 20px; 1629 height: auto; 1630 text-transform: uppercase; 1631 } 1632 1633 #customize-control-woocommerce_thumbnail_cropping .woocommerce-cropping-control { 1634 margin-right: 0px; 1635 } 1636 1637 #customize-control-woocommerce_thumbnail_cropping .woocommerce-cropping-control li { 1638 margin-bottom: 16px; 1639 } 1640 1641 #customize-control-woocommerce_thumbnail_cropping .woocommerce-cropping-control li .description { 1642 margin-top: 6px; 1643 display: block; 1644 } 1645 1646 .customize-control-kirki-checkbox input[type=checkbox]:checked:before, .customize-control-kirki-multicheck input[type=checkbox]:checked:before, .customize-control-repeater input[type=checkbox]:checked:before { 1647 line-height: 1; 1648 } 1649 #customize-controls #customize-info .accordion-section-title { 1650 border-bottom: 1px solid rgba(0, 0, 0, 0.3); } 1651 #customize-controls #customize-theme-controls .accordion-section > .accordion-section-title { 1652 border-bottom: 1px solid rgba(0, 0, 0, 0.1); } 1653 #customize-controls #customize-theme-controls .accordion-section > .accordion-section-title:after { 1654 border-color: transparent !important; 1655 border-color: transparent !important; } 1656 1657 #customize-preview.is-kirki-editor-open { 1658 height: calc(100% - 301px); } 1659 1660 .customize-control-kirki .description { 1661 font-style: normal; 1662 font-weight: 300; 1663 font-size: .9em; } 1664 .customize-control-kirki input { 1665 font-size: 16px; } 1666 .customize-control-kirki input[type="text"], 1667 .customize-control-kirki input[type="date"], 1668 .customize-control-kirki input[type="email"], 1669 .customize-control-kirki input[type="url"], 1670 .customize-control-kirki input[type="tel"] { 1671 border: 1px solid rgba(0, 0, 0, 0.1); 1672 background-image: none; 1673 background-position: 0% 0%; 1674 background-repeat: repeat; 1675 border-radius: 3px; 1676 padding: .5em; } 1677 1678 .wp-full-overlay.expanded #customize-footer-actions .kirki-footer-thanks { 1679 position: fixed; 1680 bottom: 8px; 1681 left: 150px; 1682 padding: 0; 1683 width: 90px; 1684 height: 25px; 1685 background-image: url("../images/kirki-bottom.png"); 1686 background-repeat: no-repeat; 1687 background-position: center center; } 1688 1689 .kirki-reset-section { 1690 position: absolute; 1691 top: 10px; 1692 right: 10px; 1693 background: #BDBDBD; 1694 opacity: .5; 1695 color: #fff; 1696 font-size: .8rem; 1697 border-radius: 3px; 1698 padding: 0 5px; 1699 -webkit-transition: all .2s ease-in-out; 1700 -moz-transition: all .2s ease-in-out; 1701 -ms-transition: all .2s ease-in-out; 1702 -o-transition: all .2s ease-in-out; 1703 transition: all .2s ease-in-out; 1704 font-weight: bold; } 1705 .kirki-reset-section .dashicons { 1706 font-size: .8rem; 1707 width: .8rem; 1708 height: .8rem; 1709 line-height: .8rem; 1710 vertical-align: baseline; } 1711 .kirki-reset-section:hover, .kirki-reset-section:active { 1712 background: #F44336; 1713 color: #fff; 1714 font-weight: bold; 1715 opacity: 1; } 1716 .kirki-reset-section:focus { 1717 opacity: 1; 1718 -webkit-box-shadow: 0 0 0 1px #F44336, 0 0 2px 1px rgba(200, 50, 30, 0.8); 1719 box-shadow: 0 0 0 1px #F44336, 0 0 2px 1px rgba(200, 50, 30, 0.8); } 1720 1721 #customize-theme-controls .control-panel.control-panel-kirki-expanded > ul.control-panel-content { 1722 position: relative; 1723 left: 0; 1724 display: block !important; 1725 margin-top: 0 !important; } 1726 #customize-theme-controls .control-panel.control-panel-kirki-expanded > ul.control-panel-content .accordion-section-title { 1727 margin-left: 0; } 1728 #customize-theme-controls .control-panel.control-panel-kirki-expanded > ul.control-panel-content > li.customize-info { 1729 margin-bottom: 0; 1730 border-top: none; } 1731 #customize-theme-controls .control-panel.control-panel-kirki-expanded > ul.control-panel-content > li.customize-info .accordion-section-title { 1732 border-bottom: none !important; } 1733 1734 #customize-theme-controls .control-section.control-section-kirki-expanded > ul.accordion-section-content { 1735 position: relative; 1736 left: 0; 1737 display: block; 1738 margin-top: 0 !important; } 1739 1740 #customize-theme-controls .control-section.control-section-kirki-hover:hover:not(.open) > ul.accordion-section-content, #customize-theme-controls .control-section.control-section-kirki-hover:focus:not(.open) > ul.accordion-section-content, #customize-theme-controls .control-section.control-section-kirki-hover:active:not(.open) > ul.accordion-section-content { 1741 position: fixed; 1742 left: 300px; 1743 width: 300px; 1744 background: #eee; 1745 display: block; 1746 height: 100%; 1747 max-height: 100vh; 1748 overflow-y: scroll; } 1749 #customize-theme-controls .control-section.control-section-kirki-hover:hover:not(.open) .customize-section-title, #customize-theme-controls .control-section.control-section-kirki-hover:focus:not(.open) .customize-section-title, #customize-theme-controls .control-section.control-section-kirki-hover:active:not(.open) .customize-section-title { 1750 display: none; } 1751 1752 .customize-control-kirki-checkbox input[type="checkbox"], 1753 .customize-control-kirki-multicheck input[type="checkbox"], 1754 .customize-control-repeater input[type="checkbox"] { 1755 position: relative; 1756 margin: 0 1rem 0 0; 1757 cursor: pointer; 1758 margin-bottom: 5px; 1759 width: 22px; 1760 height: 22px; 1761 border-radius: 3px; 1762 -webkit-border-radius: 3px; } 1763 .customize-control-kirki-checkbox input[type="checkbox"]:before, 1764 .customize-control-kirki-multicheck input[type="checkbox"]:before, 1765 .customize-control-repeater input[type="checkbox"]:before { 1766 content: ""; 1767 position: absolute; 1768 left: 0; 1769 z-index: 1; 1770 width: 100%; 1771 height: 100%; 1772 border: none; } 1773 .customize-control-kirki-checkbox input[type="checkbox"]:after, 1774 .customize-control-kirki-multicheck input[type="checkbox"]:after, 1775 .customize-control-repeater input[type="checkbox"]:after { 1776 content: ""; 1777 position: absolute; 1778 left: 0; 1779 top: 0; 1780 width: 100%; 1781 height: 100%; 1782 background: #f2f2f2; 1783 cursor: pointer; 1784 border-radius: 3px; 1785 -webkit-border-radius: 3px; } 1786 .customize-control-kirki-checkbox input[type="checkbox"]:checked:before, 1787 .customize-control-kirki-multicheck input[type="checkbox"]:checked:before, 1788 .customize-control-repeater input[type="checkbox"]:checked:before { 1789 content: "\f147"; 1790 font-family: dashicons; 1791 font-size: 25px; 1792 left: 0; 1793 top: 2px; } 1794 .customize-control-kirki-checkbox input[type="checkbox"]:checked:after, 1795 .customize-control-kirki-multicheck input[type="checkbox"]:checked:after, 1796 .customize-control-repeater input[type="checkbox"]:checked:after { 1797 background: #fff; } 1798 1799 .customize-control-kirki-code a.close { 1800 display: none; } 1801 .customize-control-kirki-code .CodeMirror { 1802 position: fixed; 1803 left: -100%; 1804 top: 0; 1805 height: 100vh; 1806 opacity: 0.9; 1807 z-index: 9998; 1808 width: 100%; 1809 -webkit-transition: all 250ms ease-in-out; 1810 -moz-transition: all 250ms ease-in-out; 1811 -ms-transition: all 250ms ease-in-out; 1812 -o-transition: all 250ms ease-in-out; 1813 transition: all 250ms ease-in-out; } 1814 .customize-control-kirki-code .kirki-codemirror-editor.expanded + .CodeMirror { 1815 left: 0; } 1816 .customize-control-kirki-code .kirki-codemirror-editor.expanded + .CodeMirror + a.close { 1817 display: block; 1818 position: fixed; 1819 right: 0; 1820 top: 0; 1821 opacity: 0.9; 1822 z-index: 9999; 1823 background: #fff; 1824 background: rgba(255, 255, 255, 0.85); 1825 color: #333; 1826 padding: 10px; 1827 cursor: pointer; } 1828 1829 .CodeMirror { 1830 /* Set height, width, borders, and global font properties here */ 1831 font-family: monospace; 1832 height: 300px; 1833 color: black; } 1834 1835 /* PADDING */ 1836 .CodeMirror-lines { 1837 padding: 4px 0; 1838 /* Vertical padding around content */ } 1839 1840 .CodeMirror pre { 1841 padding: 0 4px; 1842 /* Horizontal padding of content */ } 1843 1844 .CodeMirror-gutter-filler, 1845 .CodeMirror-scrollbar-filler { 1846 background-color: white; 1847 /* The little square between H and V scrollbars */ } 1848 1849 /* GUTTER */ 1850 .CodeMirror-gutters { 1851 border-right: 1px solid #ddd; 1852 background-color: #f7f7f7; 1853 white-space: nowrap; } 1854 1855 .CodeMirror-linenumber { 1856 padding: 0 3px 0 5px; 1857 min-width: 20px; 1858 text-align: right; 1859 color: #999; 1860 white-space: nowrap; } 1861 1862 .CodeMirror-guttermarker { 1863 color: black; } 1864 1865 .CodeMirror-guttermarker-subtle { 1866 color: #999; } 1867 1868 /* CURSOR */ 1869 .CodeMirror-cursor { 1870 border-left: 1px solid black; 1871 border-right: none; 1872 width: 0; } 1873 1874 /* Shown when moving in bi-directional text */ 1875 .CodeMirror div.CodeMirror-secondarycursor { 1876 border-left: 1px solid silver; } 1877 1878 .cm-fat-cursor .CodeMirror-cursor { 1879 width: auto; 1880 border: 0; 1881 background: #7e7; } 1882 1883 .cm-fat-cursor div.CodeMirror-cursors { 1884 z-index: 1; } 1885 1886 .cm-animate-fat-cursor { 1887 width: auto; 1888 border: 0; 1889 -webkit-animation: blink 1.06s steps(1) infinite; 1890 -moz-animation: blink 1.06s steps(1) infinite; 1891 animation: blink 1.06s steps(1) infinite; 1892 background-color: #7e7; } 1893 1894 @-moz-keyframes blink { 1895 50% { 1896 background-color: transparent; } } 1897 @-webkit-keyframes blink { 1898 50% { 1899 background-color: transparent; } } 1900 @keyframes blink { 1901 50% { 1902 background-color: transparent; } } 1903 /* Can style cursor different in overwrite (non-insert) mode */ 1904 .cm-tab { 1905 display: inline-block; 1906 text-decoration: inherit; } 1907 1908 .CodeMirror-ruler { 1909 border-left: 1px solid #ccc; 1910 position: absolute; } 1911 1912 /* DEFAULT THEME */ 1913 .cm-s-default .cm-header { 1914 color: blue; } 1915 1916 .cm-s-default .cm-quote { 1917 color: #090; } 1918 1919 .cm-negative { 1920 color: #d44; } 1921 1922 .cm-positive { 1923 color: #292; } 1924 1925 .cm-header, 1926 .cm-strong { 1927 font-weight: bold; } 1928 1929 .cm-em { 1930 font-style: italic; } 1931 1932 .cm-link { 1933 text-decoration: underline; } 1934 1935 .cm-strikethrough { 1936 text-decoration: line-through; } 1937 1938 .cm-s-default .cm-keyword { 1939 color: #708; } 1940 1941 .cm-s-default .cm-atom { 1942 color: #219; } 1943 1944 .cm-s-default .cm-number { 1945 color: #164; } 1946 1947 .cm-s-default .cm-def { 1948 color: #00f; } 1949 1950 .cm-s-default .cm-variable-2 { 1951 color: #05a; } 1952 1953 .cm-s-default .cm-variable-3 { 1954 color: #085; } 1955 1956 .cm-s-default .cm-comment { 1957 color: #a50; } 1958 1959 .cm-s-default .cm-string { 1960 color: #a11; } 1961 1962 .cm-s-default .cm-string-2 { 1963 color: #f50; } 1964 1965 .cm-s-default .cm-meta { 1966 color: #555; } 1967 1968 .cm-s-default .cm-qualifier { 1969 color: #555; } 1970 1971 .cm-s-default .cm-builtin { 1972 color: #30a; } 1973 1974 .cm-s-default .cm-bracket { 1975 color: #997; } 1976 1977 .cm-s-default .cm-tag { 1978 color: #170; } 1979 1980 .cm-s-default .cm-attribute { 1981 color: #00c; } 1982 1983 .cm-s-default .cm-hr { 1984 color: #999; } 1985 1986 .cm-s-default .cm-link { 1987 color: #00c; } 1988 1989 .cm-s-default .cm-error { 1990 color: #f00; } 1991 1992 .cm-invalidchar { 1993 color: #f00; } 1994 1995 .CodeMirror-composing { 1996 border-bottom: 2px solid; } 1997 1998 /* Default styles for common addons */ 1999 div.CodeMirror span.CodeMirror-matchingbracket { 2000 color: #0f0; } 2001 2002 div.CodeMirror span.CodeMirror-nonmatchingbracket { 2003 color: #f22; } 2004 2005 .CodeMirror-matchingtag { 2006 background: rgba(255, 150, 0, 0.3); } 2007 2008 .CodeMirror-activeline-background { 2009 background: #e8f2ff; } 2010 2011 /* STOP */ 2012 /* The rest of this file contains styles related to the mechanics of 2013 the editor. You probably shouldn't touch them. */ 2014 .CodeMirror { 2015 position: relative; 2016 overflow: hidden; 2017 background: white; } 2018 2019 .CodeMirror-scroll { 2020 overflow: scroll !important; 2021 /* Things will break if this is overridden */ 2022 /* 30px is the magic margin used to hide the element's real scrollbars */ 2023 /* See overflow: hidden in .CodeMirror */ 2024 margin-bottom: -30px; 2025 margin-right: -30px; 2026 padding-bottom: 30px; 2027 height: 100%; 2028 outline: none; 2029 /* Prevent dragging from highlighting the element */ 2030 position: relative; } 2031 2032 .CodeMirror-sizer { 2033 position: relative; 2034 border-right: 30px solid transparent; } 2035 2036 /* The fake, visible scrollbars. Used to force redraw during scrolling 2037 before actuall scrolling happens, thus preventing shaking and 2038 flickering artifacts. */ 2039 .CodeMirror-gutter-filler, 2040 .CodeMirror-hscrollbar, 2041 .CodeMirror-scrollbar-filler, 2042 .CodeMirror-vscrollbar { 2043 position: absolute; 2044 z-index: 6; 2045 display: none; } 2046 2047 .CodeMirror-vscrollbar { 2048 right: 0; 2049 top: 0; 2050 overflow-x: hidden; 2051 overflow-y: scroll; } 2052 2053 .CodeMirror-hscrollbar { 2054 bottom: 0; 2055 left: 0; 2056 overflow-y: hidden; 2057 overflow-x: scroll; } 2058 2059 .CodeMirror-scrollbar-filler { 2060 right: 0; 2061 bottom: 0; } 2062 2063 .CodeMirror-gutter-filler { 2064 left: 0; 2065 bottom: 0; } 2066 2067 .CodeMirror-gutters { 2068 position: absolute; 2069 left: 0; 2070 top: 0; 2071 z-index: 3; } 2072 2073 .CodeMirror-gutter { 2074 white-space: normal; 2075 height: 100%; 2076 display: inline-block; 2077 margin-bottom: -30px; 2078 /* Hack to make IE7 behave */ 2079 *zoom: 1; 2080 *display: inline; } 2081 2082 .CodeMirror-gutter-wrapper { 2083 position: absolute; 2084 z-index: 4; 2085 background: none !important; 2086 border: none !important; } 2087 2088 .CodeMirror-gutter-background { 2089 position: absolute; 2090 top: 0; 2091 bottom: 0; 2092 z-index: 4; } 2093 2094 .CodeMirror-gutter-elt { 2095 position: absolute; 2096 cursor: default; 2097 z-index: 4; } 2098 2099 .CodeMirror-gutter-wrapper { 2100 -webkit-user-select: none; 2101 -moz-user-select: none; 2102 user-select: none; } 2103 2104 .CodeMirror-lines { 2105 cursor: text; 2106 min-height: 1px; 2107 /* prevents collapsing before first draw */ } 2108 2109 .CodeMirror pre { 2110 /* Reset some styles that the rest of the page might have set */ 2111 -moz-border-radius: 0; 2112 -webkit-border-radius: 0; 2113 border-radius: 0; 2114 border-width: 0; 2115 background: transparent; 2116 font-family: inherit; 2117 font-size: inherit; 2118 margin: 0; 2119 white-space: pre; 2120 word-wrap: normal; 2121 line-height: inherit; 2122 color: inherit; 2123 z-index: 2; 2124 position: relative; 2125 overflow: visible; 2126 -webkit-tap-highlight-color: transparent; } 2127 2128 .CodeMirror-wrap pre { 2129 word-wrap: break-word; 2130 white-space: pre-wrap; 2131 word-break: normal; } 2132 2133 .CodeMirror-linebackground { 2134 position: absolute; 2135 left: 0; 2136 right: 0; 2137 top: 0; 2138 bottom: 0; 2139 z-index: 0; } 2140 2141 .CodeMirror-linewidget { 2142 position: relative; 2143 z-index: 2; 2144 overflow: auto; } 2145 2146 .CodeMirror-code { 2147 outline: none; } 2148 2149 /* Force content-box sizing for the elements where we expect it */ 2150 .CodeMirror-gutter, 2151 .CodeMirror-gutters, 2152 .CodeMirror-linenumber, 2153 .CodeMirror-scroll, 2154 .CodeMirror-sizer { 2155 -moz-box-sizing: content-box; 2156 box-sizing: content-box; } 2157 2158 .CodeMirror-measure { 2159 position: absolute; 2160 width: 100%; 2161 height: 0; 2162 overflow: hidden; 2163 visibility: hidden; } 2164 2165 .CodeMirror-cursor { 2166 position: absolute; } 2167 2168 .CodeMirror-measure pre { 2169 position: static; } 2170 2171 div.CodeMirror-cursors { 2172 visibility: hidden; 2173 position: relative; 2174 z-index: 3; } 2175 2176 div.CodeMirror-dragcursors { 2177 visibility: visible; } 2178 2179 .CodeMirror-focused div.CodeMirror-cursors { 2180 visibility: visible; } 2181 2182 .CodeMirror-selected { 2183 background: #d9d9d9; } 2184 2185 .CodeMirror-focused .CodeMirror-selected { 2186 background: #d7d4f0; } 2187 2188 .CodeMirror-crosshair { 2189 cursor: crosshair; } 2190 2191 .CodeMirror-line > span > span::selection, 2192 .CodeMirror-line > span::selection, 2193 .CodeMirror-line::selection { 2194 background: #d7d4f0; } 2195 2196 .CodeMirror-line > span > span::-moz-selection, 2197 .CodeMirror-line > span::-moz-selection, 2198 .CodeMirror-line::-moz-selection { 2199 background: #d7d4f0; } 2200 2201 .cm-searching { 2202 background: #ffa; 2203 background: rgba(255, 255, 0, 0.4); } 2204 2205 /* IE7 hack to prevent it from returning funny offsetTops on the spans */ 2206 .CodeMirror span { 2207 *vertical-align: text-bottom; } 2208 2209 /* Used to force a border model for a node */ 2210 .cm-force-border { 2211 padding-right: 0.1px; } 2212 2213 @media print { 2214 /* Hide the cursor when printing */ 2215 .CodeMirror div.CodeMirror-cursors { 2216 visibility: hidden; } } 2217 /* See issue #2901 */ 2218 .cm-tab-wrap-hack:after { 2219 content: ''; } 2220 2221 /* Help users use markselection to safely style text background */ 2222 span.CodeMirror-selectedtext { 2223 background: none; } 2224 2225 .customize-control-kirki-color .wp-picker-container { 2226 width: 100%; } 2227 .customize-control-kirki-color .wp-picker-container a.wp-color-result { 2228 width: auto; 2229 display: block; 2230 border: none; 2231 padding-left: 40px; } 2232 .customize-control-kirki-color .wp-picker-container a.wp-color-result:after { 2233 background: rgba(0, 0, 0, 0.25); 2234 color: #fff; 2235 border: none; 2236 -webkit-box-shadow: none; 2237 box-shadow: none; } 2238 .customize-control-kirki-color .wp-picker-container a.wp-color-result:focus:after, .customize-control-kirki-color .wp-picker-container a.wp-color-result:hover:after { 2239 color: #fff; } 2240 2241 #kirki_editor_pane { 2242 background: #fff; 2243 z-index: 1; 2244 padding-top: 5px; 2245 border-top: 1px solid #dedede; 2246 position: absolute; 2247 bottom: 0; 2248 width: 100%; 2249 -webkit-transition: bottom .2s; 2250 -moz-transition: bottom .2s; 2251 -ms-transition: bottom .2s; 2252 -o-transition: bottom .2s; 2253 transition: bottom .2s; } 2254 #kirki_editor_pane.hide { 2255 bottom: -301px; 2256 z-index: -999; } 2257 2258 .mce-container.mce-panel.mce-floatpanel.mce-window.mce-in { 2259 z-index: 99999999 !important; } 2260 2261 .customize-control-kirki-multicolor .multicolor-group-wrapper { 2262 display: flex; } 2263 .customize-control-kirki-multicolor .multicolor-group-wrapper .multicolor-single-color-wrapper { 2264 width: 100%; } 2265 .customize-control-kirki-multicolor .multicolor-group-wrapper .multicolor-single-color-wrapper label { 2266 display: block; 2267 text-align: center; 2268 padding: 3px; } 2269 .customize-control-kirki-multicolor .multicolor-group-wrapper .wp-picker-container { 2270 width: 100%; } 2271 .customize-control-kirki-multicolor .multicolor-group-wrapper .wp-picker-container a.wp-color-result { 2272 width: 100%; 2273 height: 30px; 2274 padding-left: 0; 2275 border-radius: 0; 2276 border: none; 2277 margin-right: 0; } 2278 .customize-control-kirki-multicolor .multicolor-group-wrapper .wp-picker-container a.wp-color-result > span { 2279 border-top-left-radius: 0 !important; 2280 border-bottom-left-radius: 0 !important; 2281 border-top-right-radius: 0 !important; 2282 border-bottom-right-radius: 0 !important; } 2283 .customize-control-kirki-multicolor .multicolor-group-wrapper .wp-picker-container a.wp-color-result:after { 2284 display: none; } 2285 2286 .customize-control-kirki-color-palette label { 2287 position: relative; 2288 display: inline-block; 2289 padding: 2px 0; } 2290 .customize-control-kirki-color-palette .color-palette-color { 2291 color: transparent; 2292 display: block; 2293 width: 42px; 2294 height: 42px; 2295 overflow: hidden; 2296 border-radius: 50%; 2297 -webkit-box-shadow: inset 3px 3px 13px 2px rgba(0, 0, 0, 0.22); 2298 box-shadow: inset 3px 3px 13px 2px rgba(0, 0, 0, 0.22); 2299 border: 1px solid rgba(0, 0, 0, 0.2); } 2300 .customize-control-kirki-color-palette .colors-wrapper { 2301 max-height: 300px; 2302 overflow-y: auto; 2303 padding: 10px; } 2304 .customize-control-kirki-color-palette .colors-wrapper input { 2305 display: none; } 2306 .customize-control-kirki-color-palette .colors-wrapper input:checked + label .color-palette-color { 2307 -webkit-box-shadow: 1px 1px 10px 1px #333333; 2308 box-shadow: 1px 1px 10px 1px #333333; 2309 border: 1px solid rgba(0, 0, 0, 0.3); } 2310 2311 .wp-customizer div.ui-datepicker { 2312 z-index: 500001 !important; 2313 width: 255px; 2314 background: #fff; 2315 border: 1px solid #dedede; } 2316 .wp-customizer div.ui-datepicker .ui-datepicker-header { 2317 padding: 10px; 2318 background: #e5e5e5; 2319 border-bottom: 1px solid #fff; } 2320 .wp-customizer div.ui-datepicker .ui-datepicker-header .ui-datepicker-next, 2321 .wp-customizer div.ui-datepicker .ui-datepicker-header .ui-datepicker-prev { 2322 display: block; 2323 position: absolute; 2324 width: 1em; 2325 overflow: hidden; } 2326 .wp-customizer div.ui-datepicker .ui-datepicker-header .ui-datepicker-next:after, .wp-customizer div.ui-datepicker .ui-datepicker-header .ui-datepicker-next:before, 2327 .wp-customizer div.ui-datepicker .ui-datepicker-header .ui-datepicker-prev:after, 2328 .wp-customizer div.ui-datepicker .ui-datepicker-header .ui-datepicker-prev:before { 2329 font-family: dashicons; } 2330 .wp-customizer div.ui-datepicker .ui-datepicker-header .ui-datepicker-next:after:hover, .wp-customizer div.ui-datepicker .ui-datepicker-header .ui-datepicker-next:before:hover, 2331 .wp-customizer div.ui-datepicker .ui-datepicker-header .ui-datepicker-prev:after:hover, 2332 .wp-customizer div.ui-datepicker .ui-datepicker-header .ui-datepicker-prev:before:hover { 2333 cursor: pointer; } 2334 .wp-customizer div.ui-datepicker .ui-datepicker-header .ui-datepicker-next .ui-icon, 2335 .wp-customizer div.ui-datepicker .ui-datepicker-header .ui-datepicker-prev .ui-icon { 2336 display: none; } 2337 .wp-customizer div.ui-datepicker .ui-datepicker-header .ui-datepicker-prev { 2338 left: 10px; } 2339 .wp-customizer div.ui-datepicker .ui-datepicker-header .ui-datepicker-prev:before { 2340 content: "\f341"; } 2341 .wp-customizer div.ui-datepicker .ui-datepicker-header .ui-datepicker-next { 2342 right: 10px; } 2343 .wp-customizer div.ui-datepicker .ui-datepicker-header .ui-datepicker-next:after { 2344 content: "\f345"; } 2345 .wp-customizer div.ui-datepicker .ui-datepicker-header .ui-datepicker-title { 2346 text-align: center; } 2347 .wp-customizer div.ui-datepicker .ui-datepicker-calendar { 2348 border-collapse: collapse; 2349 width: 100%; } 2350 .wp-customizer div.ui-datepicker .ui-datepicker-calendar thead { 2351 background: #e5e5e5; 2352 padding: 5px; } 2353 .wp-customizer div.ui-datepicker .ui-datepicker-calendar tr td { 2354 text-align: center; } 2355 .wp-customizer div.ui-datepicker .ui-datepicker-calendar tr td a { 2356 display: block; 2357 padding: 5px; 2358 color: #333; 2359 text-decoration: none; } 2360 .wp-customizer div.ui-datepicker .ui-datepicker-calendar tr td a.ui-state-active, .wp-customizer div.ui-datepicker .ui-datepicker-calendar tr td a:hover { 2361 color: #fff; 2362 background-color: #0073aa; } 2363 .wp-customizer div.ui-datepicker .ui-datepicker-calendar tr td.ui-state-disabled a, .wp-customizer div.ui-datepicker .ui-datepicker-calendar tr td.ui-state-disabled .ui-state-default a { 2364 color: #999; } 2365 2366 .customize-control-kirki-dashicons label { 2367 position: relative; 2368 display: inline-block; } 2369 .customize-control-kirki-dashicons .icons-wrapper { 2370 max-height: 300px; 2371 overflow-y: scroll; } 2372 .customize-control-kirki-dashicons .icons-wrapper h4 { 2373 font-weight: 300; 2374 margin: 0.7em 0; } 2375 .customize-control-kirki-dashicons .icons-wrapper .dashicons { 2376 padding: 3px; 2377 font-size: 25px; 2378 width: 25px; 2379 height: 25px; 2380 border: 1px solid transparent; } 2381 .customize-control-kirki-dashicons .icons-wrapper input { 2382 display: none; } 2383 .customize-control-kirki-dashicons .icons-wrapper input:checked + label .dashicons { 2384 border: 1px solid #3498DB; 2385 color: #000; } 2386 2387 .customize-control-kirki-number .ui-spinner.ui-widget-content { 2388 position: relative; } 2389 .customize-control-kirki-number .ui-spinner.ui-widget-content .ui-spinner-button { 2390 position: absolute; 2391 right: 0; 2392 color: rgba(0, 0, 0, 0.3); 2393 border: none; 2394 padding: 0 5px; 2395 width: 20px; 2396 height: calc(50% + 0.5em); 2397 border-radius: 0; 2398 -webkit-border-radius: 0; 2399 box-shadow: none; 2400 -webkit-box-shadow: none; 2401 background: transparent; 2402 background: none; 2403 margin: 0; } 2404 .customize-control-kirki-number .ui-spinner.ui-widget-content .ui-spinner-button .ui-button-text { 2405 display: none; } 2406 .customize-control-kirki-number .ui-spinner.ui-widget-content .ui-spinner-button.ui-spinner-down:before, .customize-control-kirki-number .ui-spinner.ui-widget-content .ui-spinner-button.ui-spinner-up:before { 2407 font-family: dashicons; 2408 position: absolute; 2409 left: 0; } 2410 .customize-control-kirki-number .ui-spinner.ui-widget-content .ui-spinner-button.ui-spinner-up { 2411 top: -50%; } 2412 .customize-control-kirki-number .ui-spinner.ui-widget-content .ui-spinner-button.ui-spinner-up:before { 2413 content: "\f343"; } 2414 .customize-control-kirki-number .ui-spinner.ui-widget-content .ui-spinner-button.ui-spinner-down { 2415 top: 50%; } 2416 .customize-control-kirki-number .ui-spinner.ui-widget-content .ui-spinner-button.ui-spinner-down:before { 2417 content: "\f347"; } 2418 .customize-control-kirki-number .ui-spinner.ui-widget-content .ui-spinner-button:hover { 2419 color: rgba(0, 0, 0, 0.7); } 2420 2421 .customize-control-kirki-palette input[type="radio"] { 2422 display: none; } 2423 .customize-control-kirki-palette input[type="radio"]:checked + label { 2424 border: 3px solid rgba(0, 0, 0, 0.4); } 2425 .customize-control-kirki-palette label { 2426 background: none; 2427 padding: 0; 2428 border-top: 3px solid transparent; 2429 border-bottom: 3px solid transparent; 2430 margin-bottom: 5px; 2431 display: flex; } 2432 .customize-control-kirki-palette label span { 2433 padding: 10px 0; 2434 flex-grow: 1; 2435 font-size: 0; 2436 line-height: 10px; 2437 color: transparent; 2438 -webkit-transition: all 200ms ease-in-out; 2439 -moz-transition: all 200ms ease-in-out; 2440 -ms-transition: all 200ms ease-in-out; 2441 -o-transition: all 200ms ease-in-out; 2442 transition: all 200ms ease-in-out; 2443 border-top: 1px solid rgba(0, 0, 0, 0.1); 2444 border-bottom: 1px solid rgba(0, 0, 0, 0.1); } 2445 .customize-control-kirki-palette label span:first-child { 2446 border-left: 1px solid rgba(0, 0, 0, 0.1); } 2447 .customize-control-kirki-palette label span:last-child { 2448 border-right: 1px solid rgba(0, 0, 0, 0.1); } 2449 .customize-control-kirki-palette label span:hover { 2450 padding: 10px; 2451 flex-grow: 3; 2452 min-width: 60px; 2453 font-size: 10px; 2454 line-height: 10px; 2455 color: #000; } 2456 2457 .customize-control-kirki-radio input[type=radio] { 2458 width: 18px; 2459 height: 18px; } 2460 .customize-control-kirki-radio input[type=radio]:checked:before { 2461 width: 10px; 2462 height: 10px; 2463 margin: 3px; } 2464 .customize-control-kirki-radio label { 2465 display: list-item; 2466 margin-bottom: 7px; } 2467 .customize-control-kirki-radio label .option-description { 2468 display: block; 2469 color: rgba(0, 0, 0, 0.35); 2470 font-size: 0.9em; 2471 padding-left: 25px; } 2472 2473 .customize-control-kirki-radio-buttonset .buttonset .switch-label { 2474 background: rgba(0, 0, 0, 0.05); 2475 color: #555; 2476 border-right: 1px solid rgba(0, 0, 0, 0.2); 2477 padding: 4px 7px; 2478 margin: 0; 2479 font-size: 12px; } 2480 .customize-control-kirki-radio-buttonset .buttonset .switch-label:last-child { 2481 border-right: none; } 2482 .customize-control-kirki-radio-buttonset .buttonset .switch-input { 2483 display: none; } 2484 .customize-control-kirki-radio-buttonset .buttonset .switch-input:checked + .switch-label { 2485 background-color: #3498DB; 2486 color: #fff; } 2487 2488 .customize-control-kirki-radio-image label { 2489 position: relative; 2490 display: inline-block; } 2491 .customize-control-kirki-radio-image input { 2492 display: none; } 2493 .customize-control-kirki-radio-image input img { 2494 border: 1px solid transparent; } 2495 .customize-control-kirki-radio-image input:checked + label img { 2496 -webkit-box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.25); 2497 box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.25); 2498 border: 1px solid #3498DB; } 2499 .customize-control-kirki-radio-image input + label .image-clickable { 2500 position: absolute; 2501 top: 0; 2502 bottom: 0; 2503 left: 0; 2504 right: 0; 2505 width: 100%; 2506 height: 100%; } 2507 2508 .customize-control-repeater .repeater-fields .repeater-row { 2509 border: 1px solid #999; 2510 margin-top: 0.5rem; 2511 background: #eee; 2512 position: relative; } 2513 .customize-control-repeater .repeater-fields .repeater-row.minimized { 2514 border: 1px solid #dfdfdf; 2515 padding: 0; } 2516 .customize-control-repeater .repeater-fields .repeater-row.minimized:hover { 2517 border: 1px solid #999; } 2518 .customize-control-repeater .repeater-fields .repeater-row.minimized .repeater-row-content { 2519 display: none; } 2520 .customize-control-repeater .repeater-fields .repeater-row label { 2521 margin-bottom: 12px; 2522 clear: both; } 2523 .customize-control-repeater .repeater-fields .repeater-row .repeater-field.repeater-field- { 2524 display: none; } 2525 .customize-control-repeater .repeater-fields .repeater-row .repeater-field.repeater-field-radio-image input { 2526 display: none; } 2527 .customize-control-repeater .repeater-fields .repeater-row .repeater-field.repeater-field-radio-image input img { 2528 border: 1px solid transparent; } 2529 .customize-control-repeater .repeater-fields .repeater-row .repeater-field.repeater-field-radio-image input:checked + label img { 2530 -webkit-box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.25); 2531 box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.25); 2532 border: 1px solid #3498DB; } 2533 .customize-control-repeater .repeater-fields .repeater-row .repeater-field:last-child { 2534 border-bottom: none; 2535 padding-bottom: 0; } 2536 .customize-control-repeater button.repeater-add { 2537 margin-top: 1rem; } 2538 .customize-control-repeater .repeater-row-content { 2539 padding: 10px 15px; } 2540 .customize-control-repeater .repeater-field { 2541 margin-bottom: 12px; 2542 width: 100%; 2543 clear: both; 2544 padding-bottom: 12px; 2545 border-bottom: 1px dotted #CCC; } 2546 .customize-control-repeater .repeater-field .customize-control-title { 2547 font-size: 13px; 2548 line-height: initial; } 2549 .customize-control-repeater .repeater-field .customize-control-description { 2550 font-size: 13px; 2551 line-height: initial; } 2552 .customize-control-repeater .repeater-field.repeater-field-hidden { 2553 margin: 0; 2554 padding: 0; 2555 border: 0; } 2556 .customize-control-repeater .repeater-field-select select { 2557 margin-left: 0; } 2558 .customize-control-repeater .repeater-field-checkbox label { 2559 line-height: 28px; } 2560 .customize-control-repeater .repeater-field-checkbox input { 2561 line-height: 28px; 2562 margin-right: 5px; } 2563 .customize-control-repeater .repeater-field-textarea textarea { 2564 width: 100%; 2565 resize: vertical; } 2566 .customize-control-repeater .repeater-row-header { 2567 background: white; 2568 border: 1px solid #dfdfdf; 2569 position: relative; 2570 padding: 10px 15px; 2571 height: auto; 2572 min-height: 20px; 2573 line-height: 30px; 2574 overflow: hidden; 2575 word-wrap: break-word; } 2576 .customize-control-repeater .repeater-row-header:hover { 2577 cursor: move; } 2578 .customize-control-repeater .repeater-row-header .dashicons { 2579 font-size: 18px; 2580 position: absolute; 2581 right: 12px; 2582 top: 2px; 2583 color: #a0a5aa; } 2584 .customize-control-repeater .repeater-row-label { 2585 font-size: 13px; 2586 font-weight: 600; 2587 line-height: 20px; 2588 display: block; 2589 text-transform: capitalize; 2590 width: 90%; 2591 overflow: hidden; 2592 height: 18px; } 2593 .customize-control-repeater .repeater-row-remove { 2594 color: #a00; } 2595 .customize-control-repeater .repeater-row-remove:hover { 2596 color: #f00; } 2597 .customize-control-repeater .repeater-minimize { 2598 line-height: 36px; } 2599 2600 .kirki-image-attachment { 2601 margin: 0; 2602 text-align: center; 2603 margin-bottom: 10px; } 2604 .kirki-image-attachment img { 2605 display: inline-block; } 2606 2607 .kirki-file-attachment { 2608 margin: 0; 2609 text-align: center; 2610 margin-bottom: 10px; } 2611 .kirki-file-attachment .file { 2612 display: block; 2613 padding: 10px 5px; 2614 border: 1px dotted #c3c3c3; 2615 background: #f9f9f9; } 2616 2617 .limit { 2618 padding: 3px; 2619 border-radius: 3px; } 2620 .limit.highlight { 2621 background: #D32F2F; 2622 color: #fff; } 2623 2624 .selectize-control { 2625 position: relative; } 2626 .selectize-control.single .selectize-input, 2627 .selectize-control.single .selectize-input input { 2628 cursor: pointer; } 2629 .selectize-control.single .selectize-input.input-active, .selectize-control.single .selectize-input.input-active input { 2630 cursor: text; } 2631 .selectize-control.single .selectize-input:after { 2632 content: "\f347"; 2633 display: block; 2634 position: absolute; 2635 top: 0; 2636 right: 0; 2637 margin-top: 0; 2638 width: 12px; 2639 height: 36px; 2640 font-family: dashicons; 2641 border-left: 1px solid rgba(0, 0, 0, 0.06); 2642 line-height: 36px; 2643 padding: 0 3px; } 2644 .selectize-control.single .selectize-input.dropdown-active:after { 2645 content: "\f343"; 2646 border-left: 1px solid rgba(0, 0, 0, 0.1); } 2647 .selectize-control.single .selectize-input.disabled { 2648 opacity: 0.5; 2649 background-color: #fafafa; } 2650 .selectize-control.single.rtl .selectize-input:after { 2651 left: 15px; 2652 right: auto; } 2653 .selectize-control.rtl .selectize-input > input { 2654 margin: 0 4px 0 -2px !important; } 2655 .selectize-control .plugin-drag_drop.multi > .selectize-input > div.ui-sortable-placeholder { 2656 visibility: visible !important; 2657 background: #f2f2f2 !important; 2658 background: rgba(0, 0, 0, 0.06) !important; 2659 border: 0 none !important; 2660 -webkit-box-shadow: inset 0 0 12px 4px #ffffff; 2661 box-shadow: inset 0 0 12px 4px #ffffff; } 2662 .selectize-control .plugin-drag_drop .ui-sortable-placeholder::after { 2663 content: '!'; 2664 visibility: hidden; } 2665 .selectize-control .plugin-drag_drop .ui-sortable-helper { 2666 -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); 2667 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); } 2668 .selectize-control .plugin-remove_button [data-value] { 2669 position: relative; 2670 padding-right: 24px !important; } 2671 .selectize-control .plugin-remove_button [data-value] .remove { 2672 z-index: 1; 2673 /* fixes ie bug (see #392) */ 2674 position: absolute; 2675 top: 0; 2676 right: 0; 2677 bottom: 0; 2678 width: 17px; 2679 text-align: center; 2680 font-weight: bold; 2681 font-size: 12px; 2682 color: inherit; 2683 text-decoration: none; 2684 vertical-align: middle; 2685 display: inline-block; 2686 padding: 2px 0 0; 2687 border-left: 1px solid #d0d0d0; 2688 -webkit-border-radius: 0 2px 2px 0; 2689 -moz-border-radius: 0 2px 2px 0; 2690 border-radius: 0 2px 2px 0; 2691 -webkit-box-sizing: border-box; 2692 -moz-box-sizing: border-box; 2693 box-sizing: border-box; } 2694 .selectize-control .plugin-remove_button .remove:hover { 2695 background: rgba(0, 0, 0, 0.05); } 2696 .selectize-control .plugin-remove_button.active .remove { 2697 border-left-color: #cacaca; } 2698 .selectize-control .plugin .disabled [data-value] .remove:hover { 2699 background: none; } 2700 .selectize-control .plugin .disabled [data-value] .remove { 2701 border-left-color: #ffffff; } 2702 .selectize-control.multi .selectize-input { 2703 min-height: 36px; } 2704 .selectize-control.multi .selectize-input.has-items { 2705 padding: 6px 8px 3px; } 2706 .selectize-control.multi .selectize-input > div { 2707 cursor: pointer; 2708 margin: 0 3px 3px 0; 2709 padding: 2px 6px; 2710 background: #f2f2f2; 2711 color: #303030; 2712 border: 0 solid #d0d0d0; } 2713 .selectize-control.multi .selectize-input > div.active { 2714 background: #e8e8e8; 2715 color: #303030; 2716 border: 0 solid #cacaca; } 2717 .selectize-control.multi .selectize-input.disabled > div, .selectize-control.multi .selectize-input.disabled > div.active { 2718 color: #7d7d7d; 2719 background: #ffffff; 2720 border: 0 solid #ffffff; } 2721 .selectize-dropdown { 2722 position: relative; 2723 top: -4px !important; 2724 z-index: 10; 2725 border: 1px solid #d0d0d0; 2726 background: #ffffff; 2727 margin: -1px 0 0; 2728 border-top: 0 none; 2729 -webkit-box-sizing: border-box; 2730 -moz-box-sizing: border-box; 2731 box-sizing: border-box; 2732 -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); 2733 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); 2734 -webkit-border-radius: 0 0 3px 3px; 2735 -moz-border-radius: 0 0 3px 3px; 2736 border-radius: 0 0 3px 3px; 2737 z-index: 999; } 2738 .selectize-dropdown-header { 2739 position: relative; 2740 padding: 5px 8px; 2741 border-bottom: 1px solid #d0d0d0; 2742 background: #f8f8f8; 2743 -webkit-border-radius: 3px 3px 0 0; 2744 -moz-border-radius: 3px 3px 0 0; 2745 border-radius: 3px 3px 0 0; } 2746 .selectize-dropdown-header-close { 2747 position: absolute; 2748 right: 8px; 2749 top: 50%; 2750 color: #303030; 2751 opacity: 0.4; 2752 margin-top: -12px; 2753 line-height: 20px; 2754 font-size: 20px !important; } 2755 .selectize-dropdown-header-close:hover { 2756 color: #000000; } 2757 .selectize-dropdown.plugin-optgroup_columns .optgroup { 2758 border-right: 1px solid #f2f2f2; 2759 border-top: 0 none; 2760 float: left; 2761 -webkit-box-sizing: border-box; 2762 -moz-box-sizing: border-box; 2763 box-sizing: border-box; } 2764 .selectize-dropdown.plugin-optgroup_columns .optgroup:last-child { 2765 border-right: 0 none; } 2766 .selectize-dropdown.plugin-optgroup_columns .optgroup:before { 2767 display: none; } 2768 .selectize-dropdown.plugin-optgroup_columns .optgroup-header { 2769 border-top: 0 none; } 2770 .selectize-dropdown, .selectize-input, .selectize-input input { 2771 color: #303030; 2772 font-family: inherit; 2773 font-size: 13px; 2774 line-height: 18px; 2775 -webkit-font-smoothing: inherit; } 2776 .selectize-control.single .selectize-input.input-active, .selectize-input { 2777 background: #ffffff; 2778 cursor: text; 2779 display: inline-block; } 2780 .selectize-input { 2781 border: 1px solid rgba(0, 0, 0, 0.1); 2782 padding: 8px; 2783 display: inline-block; 2784 width: 100%; 2785 overflow: hidden; 2786 position: relative; 2787 z-index: 1; 2788 -webkit-box-sizing: border-box; 2789 -moz-box-sizing: border-box; 2790 box-sizing: border-box; 2791 -webkit-border-radius: 3px; 2792 -moz-border-radius: 3px; 2793 border-radius: 3px; } 2794 .selectize-input.full { 2795 background-color: #ffffff; } 2796 .selectize-input.disabled, .selectize-input.disabled * { 2797 cursor: default !important; } 2798 .selectize-input.focus { 2799 -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15); 2800 box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15); } 2801 .selectize-input.dropdown-active { 2802 -webkit-border-radius: 3px 3px 0 0; 2803 -moz-border-radius: 3px 3px 0 0; 2804 border-radius: 3px 3px 0 0; } 2805 .selectize-input > * { 2806 vertical-align: baseline; 2807 display: -moz-inline-stack; 2808 display: inline-block; 2809 zoom: 1; 2810 *display: inline; } 2811 .selectize-input > input { 2812 display: inline-block !important; 2813 padding: 0 !important; 2814 min-height: 0 !important; 2815 max-height: none !important; 2816 max-width: 100% !important; 2817 margin: 0 2px 0 0 !important; 2818 text-indent: 0 !important; 2819 border: 0 none !important; 2820 background: none !important; 2821 line-height: inherit !important; 2822 -webkit-user-select: auto !important; 2823 -webkit-box-shadow: none !important; 2824 box-shadow: none !important; } 2825 .selectize-input > input::-ms-clear { 2826 display: none; } 2827 .selectize-input > input:focus { 2828 outline: none !important; } 2829 .selectize-input::after { 2830 content: ' '; 2831 display: block; 2832 clear: left; } 2833 .selectize-input.dropdown-active::before { 2834 content: ' '; 2835 display: block; 2836 position: absolute; 2837 background: #f0f0f0; 2838 height: 1px; 2839 bottom: 0; 2840 left: 0; 2841 right: 0; } 2842 .selectize-dropdown [data-selectable] { 2843 cursor: pointer; 2844 overflow: hidden; } 2845 .selectize-dropdown [data-selectable] .highlight { 2846 background: rgba(125, 168, 208, 0.2); 2847 -webkit-border-radius: 1px; 2848 -moz-border-radius: 1px; 2849 border-radius: 1px; } 2850 .selectize-dropdown .optgroup-header, 2851 .selectize-dropdown [data-selectable] { 2852 padding: 5px 8px; } 2853 .selectize-dropdown .optgroup:first-child .optgroup-header { 2854 border-top: 0 none; } 2855 .selectize-dropdown .optgroup-header { 2856 color: #303030; 2857 background: #ffffff; 2858 cursor: default; } 2859 .selectize-dropdown .active { 2860 background-color: #f5fafd; 2861 color: #495c68; } 2862 .selectize-dropdown .active.create { 2863 color: #495c68; } 2864 .selectize-dropdown .create { 2865 color: rgba(48, 48, 48, 0.5); } 2866 .selectize-dropdown-content { 2867 overflow-y: auto; 2868 overflow-x: hidden; 2869 max-height: 200px; } 2870 2871 .customize-control-kirki-slider input[type=range] { 2872 -webkit-appearance: none; 2873 -webkit-transition: background 0.3s; 2874 -moz-transition: background 0.3s; 2875 transition: background 0.3s; 2876 background-color: rgba(0, 0, 0, 0.1); 2877 height: 5px; 2878 width: calc(100% - 70px); 2879 padding: 0; } 2880 .customize-control-kirki-slider input[type=range]:focus { 2881 box-shadow: none; 2882 outline: none; } 2883 .customize-control-kirki-slider input[type=range]:hover { 2884 background-color: rgba(0, 0, 0, 0.25); } 2885 .customize-control-kirki-slider input[type=range]::-webkit-slider-thumb { 2886 -webkit-appearance: none; 2887 width: 15px; 2888 height: 15px; 2889 border-radius: 50%; 2890 -webkit-border-radius: 50%; 2891 background-color: #3498D9; } 2892 .customize-control-kirki-slider input[type=range]::-webkit-slider-thumb { 2893 -webkit-appearance: none; 2894 width: 15px; 2895 height: 15px; 2896 border: none; 2897 border-radius: 50%; 2898 background-color: #3498D9; } 2899 .customize-control-kirki-slider input[type=range]::-moz-range-thumb { 2900 width: 15px; 2901 height: 15px; 2902 border: none; 2903 border-radius: 50%; 2904 background-color: #3498D9; } 2905 .customize-control-kirki-slider input[type=range]::-ms-thumb { 2906 width: 15px; 2907 height: 15px; 2908 border-radius: 50%; 2909 border: 0; 2910 background-color: #3498D9; } 2911 .customize-control-kirki-slider input[type=range]::-moz-range-track { 2912 border: inherit; 2913 background: transparent; } 2914 .customize-control-kirki-slider input[type=range]::-ms-track { 2915 border: inherit; 2916 color: transparent; 2917 background: transparent; } 2918 .customize-control-kirki-slider input[type=range]::-ms-fill-lower, .customize-control-kirki-slider input[type=range]::-ms-fill-upper { 2919 background: transparent; } 2920 .customize-control-kirki-slider input[type=range]::-ms-tooltip { 2921 display: none; } 2922 .customize-control-kirki-slider .kirki_range_value { 2923 display: inline-block; 2924 font-size: 14px; 2925 padding: 0 5px; 2926 font-weight: 400; 2927 position: relative; 2928 top: 2px; } 2929 .customize-control-kirki-slider .kirki-slider-reset { 2930 color: rgba(0, 0, 0, 0.2); 2931 float: right; 2932 -webkit-transition: color 0.5s ease-in; 2933 -moz-transition: color 0.5s ease-in; 2934 -ms-transition: color 0.5s ease-in; 2935 -o-transition: color 0.5s ease-in; 2936 transition: color 0.5s ease-in; } 2937 .customize-control-kirki-slider .kirki-slider-reset span { 2938 font-size: 16px; 2939 line-height: 22px; } 2940 .customize-control-kirki-slider .kirki-slider-reset:hover { 2941 color: red; } 2942 2943 .customize-control-kirki-sortable ul.ui-sortable li { 2944 padding: 5px 10px; 2945 border: 1px solid #333; 2946 background: #fff; } 2947 .customize-control-kirki-sortable ul.ui-sortable li .dashicons.dashicons-menu { 2948 float: right; } 2949 .customize-control-kirki-sortable ul.ui-sortable li .dashicons.visibility { 2950 margin-right: 10px; } 2951 .customize-control-kirki-sortable ul.ui-sortable li.invisible { 2952 color: #aaa; 2953 border: 1px dashed #aaa; } 2954 .customize-control-kirki-sortable ul.ui-sortable li.invisible .dashicons.visibility { 2955 color: #aaa; } 2956 2957 .customize-control-kirki-spacing .wrapper { 2958 -webkit-box-shadow: inset 0 0 5px 2px rgba(0, 0, 0, 0.1); 2959 box-shadow: inset 0 0 5px 2px rgba(0, 0, 0, 0.1); 2960 width: 96%; 2961 padding: 3%; } 2962 .customize-control-kirki-spacing .wrapper .control { 2963 display: flex; 2964 flex-wrap: wrap; 2965 justify-content: space-between; } 2966 .customize-control-kirki-spacing .wrapper .control > div { 2967 width: 48%; } 2968 .customize-control-kirki-spacing .wrapper .control > div h5 { 2969 margin: 10px 0 7px; } 2970 .customize-control-kirki-spacing .wrapper .control > div .inner { 2971 display: flex; } 2972 .customize-control-kirki-spacing .wrapper .control > div .inner input[type="number"] { 2973 width: 50%; 2974 height: 36px; } 2975 .customize-control-kirki-spacing .wrapper .control > div .inner .selectize-control.single { 2976 width: 50%; } 2977 .customize-control-kirki-spacing .wrapper .control > div .inner .selectize-control.single > .selectize-input { 2978 height: 36px; } 2979 2980 .customize-control-kirki-switch input[type="checkbox"] { 2981 display: none; } 2982 .customize-control-kirki-switch .switch { 2983 border: none; 2984 margin-bottom: 1.5rem; 2985 outline: 0; 2986 padding: 0; 2987 position: relative; 2988 -webkit-user-select: none; 2989 -moz-user-select: none; 2990 -ms-user-select: none; 2991 user-select: none; } 2992 .customize-control-kirki-switch .switch label { 2993 background: rgba(0, 0, 0, 0.2); 2994 color: transparent; 2995 cursor: pointer; 2996 display: block; 2997 margin-bottom: 1rem; 2998 position: relative; 2999 transition: left 0.15s ease-out; 3000 height: 2rem; 3001 width: 4rem; 3002 font-family: Monaco, "Lucida Sans Typewriter", "Lucida Typewriter", "Courier New", Courier, monospace; } 3003 .customize-control-kirki-switch .switch label:after { 3004 background: #FFFFFF; 3005 content: ""; 3006 display: block; 3007 height: 1.5rem; 3008 left: 0.25rem; 3009 position: absolute; 3010 top: 0.25rem; 3011 width: 1.5rem; 3012 -webkit-transition: all 0.25s ease-in-out; 3013 -moz-transition: all 0.25s ease-in-out; 3014 -ms-transition: all 0.25s ease-in-out; 3015 -o-transition: all 0.25s ease-in-out; 3016 transition: all 0.25s ease-in-out; } 3017 .customize-control-kirki-switch .switch input { 3018 left: 10px; 3019 opacity: 0; 3020 padding: 0; 3021 position: absolute; 3022 top: 9px; } 3023 .customize-control-kirki-switch .switch input + label { 3024 margin-left: 0; 3025 margin-right: 0; } 3026 .customize-control-kirki-switch .switch input:checked + label { 3027 background: #3498DB; } 3028 .customize-control-kirki-switch .switch input:checked + label:after { 3029 left: 2.25rem; 3030 background: #ffffff; } 3031 .customize-control-kirki-switch .switch.round { 3032 border-radius: 1000px; } 3033 .customize-control-kirki-switch .switch.round label { 3034 border-radius: 2rem; } 3035 .customize-control-kirki-switch .switch.round label:after { 3036 border-radius: 2rem; } 3037 .customize-control-kirki-switch .switch-off, 3038 .customize-control-kirki-switch .switch-on { 3039 line-height: 32px; 3040 font-weight: bold; 3041 padding: 0 10px; } 3042 .customize-control-kirki-switch .switch-on { 3043 color: #fff; 3044 padding-right: 5px; } 3045 .customize-control-kirki-switch .switch-off { 3046 color: #777; 3047 padding-left: 5px; } 3048 3049 .customize-control-kirki-generic textarea { 3050 width: 100%; 3051 border: 1px solid rgba(0, 0, 0, 0.1); 3052 -webkit-box-shadow: none; 3053 box-shadow: none; } 3054 3055 .customize-control-kirki-toggle label { 3056 display: flex; 3057 flex-wrap: wrap; } 3058 .customize-control-kirki-toggle label .customize-control-title { 3059 width: calc(100% - 55px); } 3060 .customize-control-kirki-toggle label .description { 3061 order: 99; } 3062 .customize-control-kirki-toggle input[type="checkbox"] { 3063 display: none; } 3064 .customize-control-kirki-toggle .switch { 3065 border: 1px solid rgba(0, 0, 0, 0.1); 3066 display: inline-block; 3067 width: 35px; 3068 height: 12px; 3069 border-radius: 8px; 3070 background: #ccc; 3071 vertical-align: middle; 3072 position: relative; 3073 top: 4px; 3074 cursor: pointer; 3075 user-select: none; 3076 transition: background 350ms ease; } 3077 .customize-control-kirki-toggle .switch:after, .customize-control-kirki-toggle .switch:before { 3078 content: ""; 3079 display: block; 3080 width: 20px; 3081 height: 20px; 3082 border-radius: 50%; 3083 position: absolute; 3084 top: 50%; 3085 left: -3px; 3086 transition: all 350ms cubic-bezier(0, 0.95, 0.38, 0.98), background 150ms ease; } 3087 .customize-control-kirki-toggle .switch:before { 3088 background: rgba(0, 0, 0, 0.2); 3089 transform: translate3d(0, -50%, 0) scale(0); } 3090 .customize-control-kirki-toggle .switch:after { 3091 background: #999; 3092 border: 1px solid rgba(0, 0, 0, 0.1); 3093 transform: translate3d(0, -50%, 0); } 3094 .customize-control-kirki-toggle .switch:active:before { 3095 transform: translate3d(0, -50%, 0) scale(3); } 3096 .customize-control-kirki-toggle input:checked + .switch { 3097 background: rgba(52, 152, 222, 0.3); } 3098 .customize-control-kirki-toggle input:checked + .switch:before { 3099 background: rgba(52, 152, 222, 0.075); 3100 transform: translate3d(100%, -50%, 0) scale(1); } 3101 .customize-control-kirki-toggle input:checked + .switch:after { 3102 background: #3498DE; 3103 transform: translate3d(100%, -50%, 0); } 3104 .customize-control-kirki-toggle input:checked + .switch:active:before { 3105 background: rgba(52, 152, 222, 0.075); 3106 transform: translate3d(100%, -50%, 0) scale(3); } 3107 3108 .customize-control-kirki-typography .wrapper { 3109 -webkit-box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, 0.1); 3110 box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, 0.1); 3111 padding: 10px; 3112 border-radius: 3px; 3113 display: flex; 3114 flex-wrap: wrap; 3115 justify-content: space-between; } 3116 .customize-control-kirki-typography .wrapper .color, 3117 .customize-control-kirki-typography .wrapper .font-family, 3118 .customize-control-kirki-typography .wrapper .font-size, 3119 .customize-control-kirki-typography .wrapper .letter-spacing, 3120 .customize-control-kirki-typography .wrapper .line-height, 3121 .customize-control-kirki-typography .wrapper .subsets, 3122 .customize-control-kirki-typography .wrapper .text-transform, 3123 .customize-control-kirki-typography .wrapper .variant { 3124 width: 100%; 3125 float: none; 3126 clear: both; } 3127 .customize-control-kirki-typography .wrapper .color h5, 3128 .customize-control-kirki-typography .wrapper .font-family h5, 3129 .customize-control-kirki-typography .wrapper .font-size h5, 3130 .customize-control-kirki-typography .wrapper .letter-spacing h5, 3131 .customize-control-kirki-typography .wrapper .line-height h5, 3132 .customize-control-kirki-typography .wrapper .subsets h5, 3133 .customize-control-kirki-typography .wrapper .text-transform h5, 3134 .customize-control-kirki-typography .wrapper .variant h5 { 3135 margin: 0.67em 0 0; } 3136 .customize-control-kirki-typography .wrapper .font-size, 3137 .customize-control-kirki-typography .wrapper .letter-spacing, 3138 .customize-control-kirki-typography .wrapper .line-height { 3139 width: 50%; } 3140 .customize-control-kirki-typography .wrapper .text-align { 3141 width: 100%; } 3142 .customize-control-kirki-typography .wrapper .text-align .dashicons { 3143 padding: 3px; 3144 font-size: 25px; 3145 width: 25px; 3146 height: 25px; 3147 border: 1px solid transparent; } 3148 .customize-control-kirki-typography .wrapper .text-align input { 3149 display: none; } 3150 .customize-control-kirki-typography .wrapper .text-align input:checked + label .dashicons { 3151 border: 1px solid #3498DB; 3152 color: #000; } 3153 .customize-control-kirki-typography .wrapper .text-transform { 3154 padding-top: 10px; } 3155 .customize-control-kirki-typography .wrapper .color { 3156 width: auto; } 3157 3158 .hint, 3159 [data-hint] { 3160 position: relative; 3161 display: inline-block; } 3162 .hint:before, .hint:after, 3163 [data-hint]:before, 3164 [data-hint]:after { 3165 position: absolute; 3166 -webkit-transform: translate3d(0, 0, 0); 3167 -moz-transform: translate3d(0, 0, 0); 3168 transform: translate3d(0, 0, 0); 3169 visibility: hidden; 3170 opacity: 0; 3171 z-index: 998; 3172 pointer-events: none; 3173 transition: 0.3s ease; 3174 transition-delay: 250ms; } 3175 .hint:hover:before, .hint:hover:after, .hint:focus:before, .hint:focus:after, 3176 [data-hint]:hover:before, 3177 [data-hint]:hover:after, 3178 [data-hint]:focus:before, 3179 [data-hint]:focus:after { 3180 visibility: visible; 3181 opacity: 1; } 3182 .hint:hover:before, .hint:hover:after, 3183 [data-hint]:hover:before, 3184 [data-hint]:hover:after { 3185 transition-delay: 0; } 3186 .hint:before, 3187 [data-hint]:before { 3188 content: ''; 3189 position: absolute; 3190 background: transparent; 3191 border: none; 3192 z-index: 999; 3193 width: 0; 3194 height: 0; 3195 border-top: 5px solid transparent; 3196 border-bottom: 5px solid transparent; 3197 border-left: 5px solid #333; 3198 left: -5px; 3199 top: 5px; } 3200 .hint:after, 3201 [data-hint]:after { 3202 content: attr(data-hint); 3203 background: #333; 3204 color: white; 3205 padding: 5px 10px; 3206 font-size: 12px; 3207 line-height: 14px; 3208 height: auto; 3209 margin-bottom: -14px; 3210 width: 170px; 3211 max-width: 170px; 3212 display: block; 3213 white-space: normal; 3214 text-align: right; 3215 position: relative; 3216 top: -22px; 3217 left: -195px; } 3218 3219 li.customize-control { 3220 position: relative; } 3221 li.customize-control a.tooltip.hint--left { 3222 display: block; 3223 position: absolute; 3224 right: -10px; 3225 border-radius: 50%; 3226 color: #999; 3227 border: none; 3228 line-height: 8px; 3229 width: 20px; 3230 height: 20px; 3231 z-index: 10; } 3232 3233 .rtl li.customize-control a.tooltip.hint--left { 3234 right: auto; 3235 left: 0; } 3236 .rtl .hint:before, 3237 .rtl [data-hint]:before { 3238 left: 20px; 3239 border-left: none; 3240 border-right: 5px solid #333; } 3241 .rtl .hint:after, 3242 .rtl [data-hint]:after { 3243 left: 195px; } 3244 3245 /*# sourceMappingURL=customizer.css.map */ 3246 3247 /*** 3248 Spectrum Colorpicker v1.8.0 3249 https://github.com/bgrins/spectrum 3250 Author: Brian Grinstead 3251 License: MIT 3252 ***/ 3253 3254 .sp-container { 3255 position:absolute; 3256 top:0; 3257 left:0; 3258 display:inline-block; 3259 *display: inline; 3260 *zoom: 1; 3261 /* https://github.com/bgrins/spectrum/issues/40 */ 3262 z-index: 9999994; 3263 overflow: hidden; 3264 } 3265 .sp-container.sp-flat { 3266 position: relative; 3267 } 3268 3269 /* Fix for * { box-sizing: border-box; } */ 3270 .sp-container, 3271 .sp-container * { 3272 -webkit-box-sizing: content-box; 3273 -moz-box-sizing: content-box; 3274 box-sizing: content-box; 3275 } 3276 3277 /* http://ansciath.tumblr.com/post/7347495869/css-aspect-ratio */ 3278 .sp-top { 3279 position:relative; 3280 width: 100%; 3281 display:inline-block; 3282 } 3283 .sp-top-inner { 3284 position:absolute; 3285 top:0; 3286 left:0; 3287 bottom:0; 3288 right:0; 3289 } 3290 .sp-color { 3291 position: absolute; 3292 top:0; 3293 left:0; 3294 bottom:0; 3295 right:20%; 3296 } 3297 .sp-hue { 3298 position: absolute; 3299 top:0; 3300 right:0; 3301 bottom:0; 3302 left:84%; 3303 height: 100%; 3304 } 3305 3306 .sp-clear-enabled .sp-hue { 3307 top:33px; 3308 height: 77.5%; 3309 } 3310 3311 .sp-fill { 3312 padding-top: 80%; 3313 } 3314 .sp-sat, .sp-val { 3315 position: absolute; 3316 top:0; 3317 left:0; 3318 right:0; 3319 bottom:0; 3320 } 3321 3322 .sp-alpha-enabled .sp-top { 3323 margin-bottom: 18px; 3324 } 3325 .sp-alpha-enabled .sp-alpha { 3326 display: block; 3327 } 3328 .sp-alpha-handle { 3329 position:absolute; 3330 top:-4px; 3331 bottom: -4px; 3332 width: 6px; 3333 left: 50%; 3334 cursor: pointer; 3335 border: 1px solid black; 3336 background: white; 3337 opacity: .8; 3338 } 3339 .sp-alpha { 3340 display: none; 3341 position: absolute; 3342 bottom: -14px; 3343 right: 0; 3344 left: 0; 3345 height: 8px; 3346 } 3347 .sp-alpha-inner { 3348 border: solid 1px #333; 3349 } 3350 3351 .sp-clear { 3352 display: none; 3353 } 3354 3355 .sp-clear.sp-clear-display { 3356 background-position: center; 3357 } 3358 3359 .sp-clear-enabled .sp-clear { 3360 display: block; 3361 position:absolute; 3362 top:0px; 3363 right:0; 3364 bottom:0; 3365 left:84%; 3366 height: 28px; 3367 } 3368 3369 /* Don't allow text selection */ 3370 .sp-container, .sp-replacer, .sp-preview, .sp-dragger, .sp-slider, .sp-alpha, .sp-clear, .sp-alpha-handle, .sp-container.sp-dragging .sp-input, .sp-container button { 3371 -webkit-user-select:none; 3372 -moz-user-select: -moz-none; 3373 -o-user-select:none; 3374 user-select: none; 3375 } 3376 3377 .sp-container.sp-input-disabled .sp-input-container { 3378 display: none; 3379 } 3380 .sp-container.sp-buttons-disabled .sp-button-container { 3381 display: none; 3382 } 3383 .sp-container.sp-palette-buttons-disabled .sp-palette-button-container { 3384 display: none; 3385 } 3386 .sp-palette-only .sp-picker-container { 3387 display: none; 3388 } 3389 .sp-palette-disabled .sp-palette-container { 3390 display: none; 3391 } 3392 3393 .sp-initial-disabled .sp-initial { 3394 display: none; 3395 } 3396 3397 3398 /* Gradients for hue, saturation and value instead of images. Not pretty... but it works */ 3399 .sp-sat { 3400 background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#FFF), to(rgba(204, 154, 129, 0))); 3401 background-image: -webkit-linear-gradient(left, #FFF, rgba(204, 154, 129, 0)); 3402 background-image: -moz-linear-gradient(left, #fff, rgba(204, 154, 129, 0)); 3403 background-image: -o-linear-gradient(left, #fff, rgba(204, 154, 129, 0)); 3404 background-image: -ms-linear-gradient(left, #fff, rgba(204, 154, 129, 0)); 3405 background-image: linear-gradient(to right, #fff, rgba(204, 154, 129, 0)); 3406 -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr=#FFFFFFFF, endColorstr=#00CC9A81)"; 3407 filter : progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr='#FFFFFFFF', endColorstr='#00CC9A81'); 3408 } 3409 .sp-val { 3410 background-image: -webkit-gradient(linear, 0 100%, 0 0, from(#000000), to(rgba(204, 154, 129, 0))); 3411 background-image: -webkit-linear-gradient(bottom, #000000, rgba(204, 154, 129, 0)); 3412 background-image: -moz-linear-gradient(bottom, #000, rgba(204, 154, 129, 0)); 3413 background-image: -o-linear-gradient(bottom, #000, rgba(204, 154, 129, 0)); 3414 background-image: -ms-linear-gradient(bottom, #000, rgba(204, 154, 129, 0)); 3415 background-image: linear-gradient(to top, #000, rgba(204, 154, 129, 0)); 3416 -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00CC9A81, endColorstr=#FF000000)"; 3417 filter : progid:DXImageTransform.Microsoft.gradient(startColorstr='#00CC9A81', endColorstr='#FF000000'); 3418 } 3419 3420 .sp-hue { 3421 background: -moz-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); 3422 background: -ms-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); 3423 background: -o-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); 3424 background: -webkit-gradient(linear, left top, left bottom, from(#ff0000), color-stop(0.17, #ffff00), color-stop(0.33, #00ff00), color-stop(0.5, #00ffff), color-stop(0.67, #0000ff), color-stop(0.83, #ff00ff), to(#ff0000)); 3425 background: -webkit-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); 3426 background: linear-gradient(to bottom, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); 3427 } 3428 3429 /* IE filters do not support multiple color stops. 3430 Generate 6 divs, line them up, and do two color gradients for each. 3431 Yes, really. 3432 */ 3433 .sp-1 { 3434 height:17%; 3435 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#ffff00'); 3436 } 3437 .sp-2 { 3438 height:16%; 3439 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff00', endColorstr='#00ff00'); 3440 } 3441 .sp-3 { 3442 height:17%; 3443 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ff00', endColorstr='#00ffff'); 3444 } 3445 .sp-4 { 3446 height:17%; 3447 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffff', endColorstr='#0000ff'); 3448 } 3449 .sp-5 { 3450 height:16%; 3451 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0000ff', endColorstr='#ff00ff'); 3452 } 3453 .sp-6 { 3454 height:17%; 3455 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff00ff', endColorstr='#ff0000'); 3456 } 3457 3458 .sp-hidden { 3459 display: none !important; 3460 } 3461 3462 /* Clearfix hack */ 3463 .sp-cf:before, .sp-cf:after { content: ""; display: table; } 3464 .sp-cf:after { clear: both; } 3465 .sp-cf { *zoom: 1; } 3466 3467 /* Mobile devices, make hue slider bigger so it is easier to slide */ 3468 @media (max-device-width: 480px) { 3469 .sp-color { right: 40%; } 3470 .sp-hue { left: 63%; } 3471 .sp-fill { padding-top: 60%; } 3472 } 3473 .sp-dragger { 3474 border-radius: 5px; 3475 height: 5px; 3476 width: 5px; 3477 border: 1px solid #fff; 3478 background: #000; 3479 cursor: pointer; 3480 position:absolute; 3481 top:0; 3482 left: 0; 3483 } 3484 .sp-slider { 3485 position: absolute; 3486 top:0; 3487 cursor:pointer; 3488 height: 3px; 3489 left: -1px; 3490 right: -1px; 3491 border: 1px solid #000; 3492 background: white; 3493 opacity: .8; 3494 } 3495 3496 /* 3497 Theme authors: 3498 Here are the basic themeable display options (colors, fonts, global widths). 3499 See http://bgrins.github.io/spectrum/themes/ for instructions. 3500 */ 3501 3502 .sp-container { 3503 border-radius: 0; 3504 background-color: #ECECEC; 3505 border: solid 1px #f0c49B; 3506 padding: 0; 3507 } 3508 .sp-container, .sp-container button, .sp-container input, .sp-color, .sp-hue, .sp-clear { 3509 font: normal 12px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; 3510 -webkit-box-sizing: border-box; 3511 -moz-box-sizing: border-box; 3512 -ms-box-sizing: border-box; 3513 box-sizing: border-box; 3514 } 3515 .sp-top { 3516 margin-bottom: 3px; 3517 } 3518 .sp-color, .sp-hue, .sp-clear { 3519 border: solid 1px #666; 3520 } 3521 3522 /* Input */ 3523 .sp-input-container { 3524 float:right; 3525 width: 100px; 3526 margin-bottom: 4px; 3527 } 3528 .sp-initial-disabled .sp-input-container { 3529 width: 100%; 3530 } 3531 .sp-input { 3532 font-size: 12px !important; 3533 border: 1px inset; 3534 padding: 4px 5px; 3535 margin: 0; 3536 width: 100%; 3537 background:transparent; 3538 border-radius: 3px; 3539 color: #222; 3540 } 3541 .sp-input:focus { 3542 border: 1px solid orange; 3543 } 3544 .sp-input.sp-validation-error { 3545 border: 1px solid red; 3546 background: #fdd; 3547 } 3548 .sp-picker-container , .sp-palette-container { 3549 float:left; 3550 position: relative; 3551 padding: 10px; 3552 padding-bottom: 300px; 3553 margin-bottom: -290px; 3554 } 3555 .sp-picker-container { 3556 width: 172px; 3557 border-left: solid 1px #fff; 3558 } 3559 3560 /* Palettes */ 3561 .sp-palette-container { 3562 border-right: solid 1px #ccc; 3563 } 3564 3565 .sp-palette-only .sp-palette-container { 3566 border: 0; 3567 } 3568 3569 .sp-palette .sp-thumb-el { 3570 display: block; 3571 position:relative; 3572 float:left; 3573 width: 24px; 3574 height: 15px; 3575 margin: 3px; 3576 cursor: pointer; 3577 border:solid 2px transparent; 3578 } 3579 .sp-palette .sp-thumb-el:hover, .sp-palette .sp-thumb-el.sp-thumb-active { 3580 border-color: orange; 3581 } 3582 .sp-thumb-el { 3583 position:relative; 3584 } 3585 3586 /* Initial */ 3587 .sp-initial { 3588 float: left; 3589 border: solid 1px #333; 3590 } 3591 .sp-initial span { 3592 width: 30px; 3593 height: 25px; 3594 border:none; 3595 display:block; 3596 float:left; 3597 margin:0; 3598 } 3599 3600 .sp-initial .sp-clear-display { 3601 background-position: center; 3602 } 3603 3604 /* Buttons */ 3605 .sp-palette-button-container, 3606 .sp-button-container { 3607 float: right; 3608 } 3609 3610 /* Replacer (the little preview div that shows up instead of the <input>) */ 3611 .sp-replacer { 3612 margin:0; 3613 overflow:hidden; 3614 cursor:pointer; 3615 padding: 4px; 3616 display:inline-block; 3617 *zoom: 1; 3618 *display: inline; 3619 border: solid 1px #91765d; 3620 background: #eee; 3621 color: #333; 3622 vertical-align: middle; 3623 } 3624 .sp-replacer:hover, .sp-replacer.sp-active { 3625 border-color: #F0C49B; 3626 color: #111; 3627 } 3628 .sp-replacer.sp-disabled { 3629 cursor:default; 3630 border-color: silver; 3631 color: silver; 3632 } 3633 .sp-dd { 3634 padding: 2px 0; 3635 height: 16px; 3636 line-height: 16px; 3637 float:left; 3638 font-size:10px; 3639 } 3640 .sp-preview { 3641 position:relative; 3642 width:25px; 3643 height: 20px; 3644 border: solid 1px #222; 3645 margin-right: 5px; 3646 float:left; 3647 z-index: 0; 3648 } 3649 3650 .sp-palette { 3651 *width: 220px; 3652 max-width: 220px; 3653 } 3654 .sp-palette .sp-thumb-el { 3655 width:16px; 3656 height: 16px; 3657 margin:2px 1px; 3658 border: solid 1px #d0d0d0; 3659 } 3660 3661 .sp-container { 3662 padding-bottom:0; 3663 } 3664 3665 3666 /* Buttons: http://hellohappy.org/css3-buttons/ */ 3667 .sp-container button { 3668 background-color: #eeeeee; 3669 background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc); 3670 background-image: -moz-linear-gradient(top, #eeeeee, #cccccc); 3671 background-image: -ms-linear-gradient(top, #eeeeee, #cccccc); 3672 background-image: -o-linear-gradient(top, #eeeeee, #cccccc); 3673 background-image: linear-gradient(to bottom, #eeeeee, #cccccc); 3674 border: 1px solid #ccc; 3675 border-bottom: 1px solid #bbb; 3676 border-radius: 3px; 3677 color: #333; 3678 font-size: 14px; 3679 line-height: 1; 3680 padding: 5px 4px; 3681 text-align: center; 3682 text-shadow: 0 1px 0 #eee; 3683 vertical-align: middle; 3684 } 3685 .sp-container button:hover { 3686 background-color: #dddddd; 3687 background-image: -webkit-linear-gradient(top, #dddddd, #bbbbbb); 3688 background-image: -moz-linear-gradient(top, #dddddd, #bbbbbb); 3689 background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb); 3690 background-image: -o-linear-gradient(top, #dddddd, #bbbbbb); 3691 background-image: linear-gradient(to bottom, #dddddd, #bbbbbb); 3692 border: 1px solid #bbb; 3693 border-bottom: 1px solid #999; 3694 cursor: pointer; 3695 text-shadow: 0 1px 0 #ddd; 3696 } 3697 .sp-container button:active { 3698 border: 1px solid #aaa; 3699 border-bottom: 1px solid #888; 3700 -webkit-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; 3701 -moz-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; 3702 -ms-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; 3703 -o-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; 3704 box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; 3705 } 3706 .sp-cancel { 3707 font-size: 11px; 3708 color: #d93f3f !important; 3709 margin:0; 3710 padding:2px; 3711 margin-right: 5px; 3712 vertical-align: middle; 3713 text-decoration:none; 3714 3715 } 3716 .sp-cancel:hover { 3717 color: #d93f3f !important; 3718 text-decoration: underline; 3719 } 3720 3721 3722 .sp-palette span:hover, .sp-palette span.sp-thumb-active { 3723 border-color: #000; 3724 } 3725 3726 .sp-preview, .sp-alpha, .sp-thumb-el { 3727 position:relative; 3728 background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==); 3729 } 3730 .sp-preview-inner, .sp-alpha-inner, .sp-thumb-inner { 3731 display:block; 3732 position:absolute; 3733 top:0;left:0;bottom:0;right:0; 3734 } 3735 3736 .sp-palette .sp-thumb-inner { 3737 background-position: 50% 50%; 3738 background-repeat: no-repeat; 3739 } 3740 3741 .sp-palette .sp-thumb-light.sp-thumb-active .sp-thumb-inner { 3742 background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIVJREFUeNpiYBhsgJFMffxAXABlN5JruT4Q3wfi/0DsT64h8UD8HmpIPCWG/KemIfOJCUB+Aoacx6EGBZyHBqI+WsDCwuQ9mhxeg2A210Ntfo8klk9sOMijaURm7yc1UP2RNCMbKE9ODK1HM6iegYLkfx8pligC9lCD7KmRof0ZhjQACDAAceovrtpVBRkAAAAASUVORK5CYII=); 3743 } 3744 3745 .sp-palette .sp-thumb-dark.sp-thumb-active .sp-thumb-inner { 3746 background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAMdJREFUOE+tkgsNwzAMRMugEAahEAahEAZhEAqlEAZhEAohEAYh81X2dIm8fKpEspLGvudPOsUYpxE2BIJCroJmEW9qJ+MKaBFhEMNabSy9oIcIPwrB+afvAUFoK4H0tMaQ3XtlrggDhOVVMuT4E5MMG0FBbCEYzjYT7OxLEvIHQLY2zWwQ3D+9luyOQTfKDiFD3iUIfPk8VqrKjgAiSfGFPecrg6HN6m/iBcwiDAo7WiBeawa+Kwh7tZoSCGLMqwlSAzVDhoK+6vH4G0P5wdkAAAAASUVORK5CYII=); 3747 } 3748 3749 .sp-clear-display { 3750 background-repeat:no-repeat; 3751 background-position: center; 3752 background-image: url(data:image/gif;base64,R0lGODlhFAAUAPcAAAAAAJmZmZ2dnZ6enqKioqOjo6SkpKWlpaampqenp6ioqKmpqaqqqqurq/Hx8fLy8vT09PX19ff39/j4+Pn5+fr6+vv7+wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAP8ALAAAAAAUABQAAAihAP9FoPCvoMGDBy08+EdhQAIJCCMybCDAAYUEARBAlFiQQoMABQhKUJBxY0SPICEYHBnggEmDKAuoPMjS5cGYMxHW3IiT478JJA8M/CjTZ0GgLRekNGpwAsYABHIypcAgQMsITDtWJYBR6NSqMico9cqR6tKfY7GeBCuVwlipDNmefAtTrkSzB1RaIAoXodsABiZAEFB06gIBWC1mLVgBa0AAOw==); 3753 }