customizer.css (50537B)
1 #customize-controls #customize-info .accordion-section-title { 2 border-bottom: 1px solid rgba(0, 0, 0, 0.3); } 3 #customize-controls #customize-theme-controls .accordion-section > .accordion-section-title { 4 border-bottom: 1px solid rgba(0, 0, 0, 0.1); } 5 #customize-controls #customize-theme-controls .accordion-section > .accordion-section-title:after { 6 border-color: transparent !important; 7 border-color: transparent !important; } 8 9 #customize-preview.is-kirki-editor-open { 10 height: calc(100% - 301px); } 11 12 .customize-control-kirki .description { 13 font-style: normal; 14 font-weight: 300; 15 font-size: .9em; } 16 .customize-control-kirki input { 17 font-size: 16px; } 18 .customize-control-kirki input[type="text"], 19 .customize-control-kirki input[type="date"], 20 .customize-control-kirki input[type="email"], 21 .customize-control-kirki input[type="url"], 22 .customize-control-kirki input[type="tel"] { 23 border: 1px solid rgba(0, 0, 0, 0.1); 24 background-image: none; 25 background-position: 0% 0%; 26 background-repeat: repeat; 27 border-radius: 3px; 28 padding: .5em; } 29 30 .wp-full-overlay.expanded #customize-footer-actions .kirki-footer-thanks { 31 position: fixed; 32 bottom: 8px; 33 left: 150px; 34 padding: 0; 35 width: 90px; 36 height: 25px; 37 background-image: url("../images/kirki-bottom.png"); 38 background-repeat: no-repeat; 39 background-position: center center; } 40 41 .kirki-reset-section { 42 position: absolute; 43 top: 10px; 44 right: 10px; 45 background: #BDBDBD; 46 opacity: .5; 47 color: #fff; 48 font-size: .8rem; 49 border-radius: 3px; 50 padding: 0 5px; 51 -webkit-transition: all .2s ease-in-out; 52 -moz-transition: all .2s ease-in-out; 53 -ms-transition: all .2s ease-in-out; 54 -o-transition: all .2s ease-in-out; 55 transition: all .2s ease-in-out; 56 font-weight: bold; } 57 .kirki-reset-section .dashicons { 58 font-size: .8rem; 59 width: .8rem; 60 height: .8rem; 61 line-height: .8rem; 62 vertical-align: baseline; } 63 .kirki-reset-section:hover, .kirki-reset-section:active { 64 background: #F44336; 65 color: #fff; 66 font-weight: bold; 67 opacity: 1; } 68 .kirki-reset-section:focus { 69 opacity: 1; 70 -webkit-box-shadow: 0 0 0 1px #F44336, 0 0 2px 1px rgba(200, 50, 30, 0.8); 71 box-shadow: 0 0 0 1px #F44336, 0 0 2px 1px rgba(200, 50, 30, 0.8); } 72 73 #customize-theme-controls .control-panel.control-panel-kirki-expanded > ul.control-panel-content { 74 position: relative; 75 left: 0; 76 display: block !important; 77 margin-top: 0 !important; } 78 #customize-theme-controls .control-panel.control-panel-kirki-expanded > ul.control-panel-content .accordion-section-title { 79 margin-left: 0; } 80 #customize-theme-controls .control-panel.control-panel-kirki-expanded > ul.control-panel-content > li.customize-info { 81 margin-bottom: 0; 82 border-top: none; } 83 #customize-theme-controls .control-panel.control-panel-kirki-expanded > ul.control-panel-content > li.customize-info .accordion-section-title { 84 border-bottom: none !important; } 85 86 #customize-theme-controls .control-section.control-section-kirki-expanded > ul.accordion-section-content { 87 position: relative; 88 left: 0; 89 display: block; 90 margin-top: 0 !important; } 91 92 #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 { 93 position: fixed; 94 left: 300px; 95 width: 300px; 96 background: #eee; 97 display: block; 98 height: 100%; 99 max-height: 100vh; 100 overflow-y: scroll; } 101 #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 { 102 display: none; } 103 104 .customize-control-kirki-checkbox input[type="checkbox"], 105 .customize-control-kirki-multicheck input[type="checkbox"], 106 .customize-control-repeater input[type="checkbox"] { 107 position: relative; 108 margin: 0 1rem 0 0; 109 cursor: pointer; 110 margin-bottom: 5px; 111 width: 22px; 112 height: 22px; 113 border-radius: 3px; 114 -webkit-border-radius: 3px; } 115 .customize-control-kirki-checkbox input[type="checkbox"]:before, 116 .customize-control-kirki-multicheck input[type="checkbox"]:before, 117 .customize-control-repeater input[type="checkbox"]:before { 118 content: ""; 119 position: absolute; 120 left: 0; 121 z-index: 1; 122 width: 100%; 123 height: 100%; 124 border: none; } 125 .customize-control-kirki-checkbox input[type="checkbox"]:after, 126 .customize-control-kirki-multicheck input[type="checkbox"]:after, 127 .customize-control-repeater input[type="checkbox"]:after { 128 content: ""; 129 position: absolute; 130 left: 0; 131 top: 0; 132 width: 100%; 133 height: 100%; 134 background: #f2f2f2; 135 cursor: pointer; 136 border-radius: 3px; 137 -webkit-border-radius: 3px; } 138 .customize-control-kirki-checkbox input[type="checkbox"]:checked:before, 139 .customize-control-kirki-multicheck input[type="checkbox"]:checked:before, 140 .customize-control-repeater input[type="checkbox"]:checked:before { 141 content: "\f147"; 142 font-family: dashicons; 143 font-size: 25px; 144 left: 0; 145 top: 2px; } 146 .customize-control-kirki-checkbox input[type="checkbox"]:checked:after, 147 .customize-control-kirki-multicheck input[type="checkbox"]:checked:after, 148 .customize-control-repeater input[type="checkbox"]:checked:after { 149 background: #fff; } 150 151 .customize-control-kirki-code a.close { 152 display: none; } 153 .customize-control-kirki-code .CodeMirror { 154 position: fixed; 155 left: -100%; 156 top: 0; 157 height: 100vh; 158 opacity: 0.9; 159 z-index: 9998; 160 width: 100%; 161 -webkit-transition: all 250ms ease-in-out; 162 -moz-transition: all 250ms ease-in-out; 163 -ms-transition: all 250ms ease-in-out; 164 -o-transition: all 250ms ease-in-out; 165 transition: all 250ms ease-in-out; } 166 .customize-control-kirki-code .kirki-codemirror-editor.expanded + .CodeMirror { 167 left: 0; } 168 .customize-control-kirki-code .kirki-codemirror-editor.expanded + .CodeMirror + a.close { 169 display: block; 170 position: fixed; 171 right: 0; 172 top: 0; 173 opacity: 0.9; 174 z-index: 9999; 175 background: #fff; 176 background: rgba(255, 255, 255, 0.85); 177 color: #333; 178 padding: 10px; 179 cursor: pointer; } 180 181 .CodeMirror { 182 /* Set height, width, borders, and global font properties here */ 183 font-family: monospace; 184 height: 300px; 185 color: black; } 186 187 /* PADDING */ 188 .CodeMirror-lines { 189 padding: 4px 0; 190 /* Vertical padding around content */ } 191 192 .CodeMirror pre { 193 padding: 0 4px; 194 /* Horizontal padding of content */ } 195 196 .CodeMirror-gutter-filler, 197 .CodeMirror-scrollbar-filler { 198 background-color: white; 199 /* The little square between H and V scrollbars */ } 200 201 /* GUTTER */ 202 .CodeMirror-gutters { 203 border-right: 1px solid #ddd; 204 background-color: #f7f7f7; 205 white-space: nowrap; } 206 207 .CodeMirror-linenumber { 208 padding: 0 3px 0 5px; 209 min-width: 20px; 210 text-align: right; 211 color: #999; 212 white-space: nowrap; } 213 214 .CodeMirror-guttermarker { 215 color: black; } 216 217 .CodeMirror-guttermarker-subtle { 218 color: #999; } 219 220 /* CURSOR */ 221 .CodeMirror-cursor { 222 border-left: 1px solid black; 223 border-right: none; 224 width: 0; } 225 226 /* Shown when moving in bi-directional text */ 227 .CodeMirror div.CodeMirror-secondarycursor { 228 border-left: 1px solid silver; } 229 230 .cm-fat-cursor .CodeMirror-cursor { 231 width: auto; 232 border: 0; 233 background: #7e7; } 234 235 .cm-fat-cursor div.CodeMirror-cursors { 236 z-index: 1; } 237 238 .cm-animate-fat-cursor { 239 width: auto; 240 border: 0; 241 -webkit-animation: blink 1.06s steps(1) infinite; 242 -moz-animation: blink 1.06s steps(1) infinite; 243 animation: blink 1.06s steps(1) infinite; 244 background-color: #7e7; } 245 246 @-moz-keyframes blink { 247 50% { 248 background-color: transparent; } } 249 @-webkit-keyframes blink { 250 50% { 251 background-color: transparent; } } 252 @keyframes blink { 253 50% { 254 background-color: transparent; } } 255 /* Can style cursor different in overwrite (non-insert) mode */ 256 .cm-tab { 257 display: inline-block; 258 text-decoration: inherit; } 259 260 .CodeMirror-ruler { 261 border-left: 1px solid #ccc; 262 position: absolute; } 263 264 /* DEFAULT THEME */ 265 .cm-s-default .cm-header { 266 color: blue; } 267 268 .cm-s-default .cm-quote { 269 color: #090; } 270 271 .cm-negative { 272 color: #d44; } 273 274 .cm-positive { 275 color: #292; } 276 277 .cm-header, 278 .cm-strong { 279 font-weight: bold; } 280 281 .cm-em { 282 font-style: italic; } 283 284 .cm-link { 285 text-decoration: underline; } 286 287 .cm-strikethrough { 288 text-decoration: line-through; } 289 290 .cm-s-default .cm-keyword { 291 color: #708; } 292 293 .cm-s-default .cm-atom { 294 color: #219; } 295 296 .cm-s-default .cm-number { 297 color: #164; } 298 299 .cm-s-default .cm-def { 300 color: #00f; } 301 302 .cm-s-default .cm-variable-2 { 303 color: #05a; } 304 305 .cm-s-default .cm-variable-3 { 306 color: #085; } 307 308 .cm-s-default .cm-comment { 309 color: #a50; } 310 311 .cm-s-default .cm-string { 312 color: #a11; } 313 314 .cm-s-default .cm-string-2 { 315 color: #f50; } 316 317 .cm-s-default .cm-meta { 318 color: #555; } 319 320 .cm-s-default .cm-qualifier { 321 color: #555; } 322 323 .cm-s-default .cm-builtin { 324 color: #30a; } 325 326 .cm-s-default .cm-bracket { 327 color: #997; } 328 329 .cm-s-default .cm-tag { 330 color: #170; } 331 332 .cm-s-default .cm-attribute { 333 color: #00c; } 334 335 .cm-s-default .cm-hr { 336 color: #999; } 337 338 .cm-s-default .cm-link { 339 color: #00c; } 340 341 .cm-s-default .cm-error { 342 color: #f00; } 343 344 .cm-invalidchar { 345 color: #f00; } 346 347 .CodeMirror-composing { 348 border-bottom: 2px solid; } 349 350 /* Default styles for common addons */ 351 div.CodeMirror span.CodeMirror-matchingbracket { 352 color: #0f0; } 353 354 div.CodeMirror span.CodeMirror-nonmatchingbracket { 355 color: #f22; } 356 357 .CodeMirror-matchingtag { 358 background: rgba(255, 150, 0, 0.3); } 359 360 .CodeMirror-activeline-background { 361 background: #e8f2ff; } 362 363 /* STOP */ 364 /* The rest of this file contains styles related to the mechanics of 365 the editor. You probably shouldn't touch them. */ 366 .CodeMirror { 367 position: relative; 368 overflow: hidden; 369 background: white; } 370 371 .CodeMirror-scroll { 372 overflow: scroll !important; 373 /* Things will break if this is overridden */ 374 /* 30px is the magic margin used to hide the element's real scrollbars */ 375 /* See overflow: hidden in .CodeMirror */ 376 margin-bottom: -30px; 377 margin-right: -30px; 378 padding-bottom: 30px; 379 height: 100%; 380 outline: none; 381 /* Prevent dragging from highlighting the element */ 382 position: relative; } 383 384 .CodeMirror-sizer { 385 position: relative; 386 border-right: 30px solid transparent; } 387 388 /* The fake, visible scrollbars. Used to force redraw during scrolling 389 before actuall scrolling happens, thus preventing shaking and 390 flickering artifacts. */ 391 .CodeMirror-gutter-filler, 392 .CodeMirror-hscrollbar, 393 .CodeMirror-scrollbar-filler, 394 .CodeMirror-vscrollbar { 395 position: absolute; 396 z-index: 6; 397 display: none; } 398 399 .CodeMirror-vscrollbar { 400 right: 0; 401 top: 0; 402 overflow-x: hidden; 403 overflow-y: scroll; } 404 405 .CodeMirror-hscrollbar { 406 bottom: 0; 407 left: 0; 408 overflow-y: hidden; 409 overflow-x: scroll; } 410 411 .CodeMirror-scrollbar-filler { 412 right: 0; 413 bottom: 0; } 414 415 .CodeMirror-gutter-filler { 416 left: 0; 417 bottom: 0; } 418 419 .CodeMirror-gutters { 420 position: absolute; 421 left: 0; 422 top: 0; 423 z-index: 3; } 424 425 .CodeMirror-gutter { 426 white-space: normal; 427 height: 100%; 428 display: inline-block; 429 margin-bottom: -30px; 430 /* Hack to make IE7 behave */ 431 *zoom: 1; 432 *display: inline; } 433 434 .CodeMirror-gutter-wrapper { 435 position: absolute; 436 z-index: 4; 437 background: none !important; 438 border: none !important; } 439 440 .CodeMirror-gutter-background { 441 position: absolute; 442 top: 0; 443 bottom: 0; 444 z-index: 4; } 445 446 .CodeMirror-gutter-elt { 447 position: absolute; 448 cursor: default; 449 z-index: 4; } 450 451 .CodeMirror-gutter-wrapper { 452 -webkit-user-select: none; 453 -moz-user-select: none; 454 user-select: none; } 455 456 .CodeMirror-lines { 457 cursor: text; 458 min-height: 1px; 459 /* prevents collapsing before first draw */ } 460 461 .CodeMirror pre { 462 /* Reset some styles that the rest of the page might have set */ 463 -moz-border-radius: 0; 464 -webkit-border-radius: 0; 465 border-radius: 0; 466 border-width: 0; 467 background: transparent; 468 font-family: inherit; 469 font-size: inherit; 470 margin: 0; 471 white-space: pre; 472 word-wrap: normal; 473 line-height: inherit; 474 color: inherit; 475 z-index: 2; 476 position: relative; 477 overflow: visible; 478 -webkit-tap-highlight-color: transparent; } 479 480 .CodeMirror-wrap pre { 481 word-wrap: break-word; 482 white-space: pre-wrap; 483 word-break: normal; } 484 485 .CodeMirror-linebackground { 486 position: absolute; 487 left: 0; 488 right: 0; 489 top: 0; 490 bottom: 0; 491 z-index: 0; } 492 493 .CodeMirror-linewidget { 494 position: relative; 495 z-index: 2; 496 overflow: auto; } 497 498 .CodeMirror-code { 499 outline: none; } 500 501 /* Force content-box sizing for the elements where we expect it */ 502 .CodeMirror-gutter, 503 .CodeMirror-gutters, 504 .CodeMirror-linenumber, 505 .CodeMirror-scroll, 506 .CodeMirror-sizer { 507 -moz-box-sizing: content-box; 508 box-sizing: content-box; } 509 510 .CodeMirror-measure { 511 position: absolute; 512 width: 100%; 513 height: 0; 514 overflow: hidden; 515 visibility: hidden; } 516 517 .CodeMirror-cursor { 518 position: absolute; } 519 520 .CodeMirror-measure pre { 521 position: static; } 522 523 div.CodeMirror-cursors { 524 visibility: hidden; 525 position: relative; 526 z-index: 3; } 527 528 div.CodeMirror-dragcursors { 529 visibility: visible; } 530 531 .CodeMirror-focused div.CodeMirror-cursors { 532 visibility: visible; } 533 534 .CodeMirror-selected { 535 background: #d9d9d9; } 536 537 .CodeMirror-focused .CodeMirror-selected { 538 background: #d7d4f0; } 539 540 .CodeMirror-crosshair { 541 cursor: crosshair; } 542 543 .CodeMirror-line > span > span::selection, 544 .CodeMirror-line > span::selection, 545 .CodeMirror-line::selection { 546 background: #d7d4f0; } 547 548 .CodeMirror-line > span > span::-moz-selection, 549 .CodeMirror-line > span::-moz-selection, 550 .CodeMirror-line::-moz-selection { 551 background: #d7d4f0; } 552 553 .cm-searching { 554 background: #ffa; 555 background: rgba(255, 255, 0, 0.4); } 556 557 /* IE7 hack to prevent it from returning funny offsetTops on the spans */ 558 .CodeMirror span { 559 *vertical-align: text-bottom; } 560 561 /* Used to force a border model for a node */ 562 .cm-force-border { 563 padding-right: 0.1px; } 564 565 @media print { 566 /* Hide the cursor when printing */ 567 .CodeMirror div.CodeMirror-cursors { 568 visibility: hidden; } } 569 /* See issue #2901 */ 570 .cm-tab-wrap-hack:after { 571 content: ''; } 572 573 /* Help users use markselection to safely style text background */ 574 span.CodeMirror-selectedtext { 575 background: none; } 576 577 .customize-control-kirki-color .wp-picker-container { 578 width: 100%; } 579 .customize-control-kirki-color .wp-picker-container a.wp-color-result { 580 width: auto; 581 display: block; 582 border: none; 583 padding-left: 40px; } 584 .customize-control-kirki-color .wp-picker-container a.wp-color-result:after { 585 background: rgba(0, 0, 0, 0.25); 586 color: #fff; 587 border: none; 588 -webkit-box-shadow: none; 589 box-shadow: none; } 590 .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 { 591 color: #fff; } 592 593 #kirki_editor_pane { 594 background: #fff; 595 z-index: 1; 596 padding-top: 5px; 597 border-top: 1px solid #dedede; 598 position: absolute; 599 bottom: 0; 600 width: 100%; 601 -webkit-transition: bottom .2s; 602 -moz-transition: bottom .2s; 603 -ms-transition: bottom .2s; 604 -o-transition: bottom .2s; 605 transition: bottom .2s; } 606 #kirki_editor_pane.hide { 607 bottom: -301px; 608 z-index: -999; } 609 610 .mce-container.mce-panel.mce-floatpanel.mce-window.mce-in { 611 z-index: 99999999 !important; } 612 613 .customize-control-kirki-multicolor .multicolor-group-wrapper { 614 display: flex; } 615 .customize-control-kirki-multicolor .multicolor-group-wrapper .multicolor-single-color-wrapper { 616 width: 100%; } 617 .customize-control-kirki-multicolor .multicolor-group-wrapper .multicolor-single-color-wrapper label { 618 display: block; 619 text-align: center; 620 padding: 3px; } 621 .customize-control-kirki-multicolor .multicolor-group-wrapper .wp-picker-container { 622 width: 100%; } 623 .customize-control-kirki-multicolor .multicolor-group-wrapper .wp-picker-container a.wp-color-result { 624 width: 100%; 625 height: 30px; 626 padding-left: 0; 627 border-radius: 0; 628 border: none; 629 margin-right: 0; } 630 .customize-control-kirki-multicolor .multicolor-group-wrapper .wp-picker-container a.wp-color-result > span { 631 border-top-left-radius: 0 !important; 632 border-bottom-left-radius: 0 !important; 633 border-top-right-radius: 0 !important; 634 border-bottom-right-radius: 0 !important; } 635 .customize-control-kirki-multicolor .multicolor-group-wrapper .wp-picker-container a.wp-color-result:after { 636 display: none; } 637 638 .customize-control-kirki-color-palette label { 639 position: relative; 640 display: inline-block; 641 padding: 2px 0; } 642 .customize-control-kirki-color-palette .color-palette-color { 643 color: transparent; 644 display: block; 645 width: 42px; 646 height: 42px; 647 overflow: hidden; 648 border-radius: 50%; 649 -webkit-box-shadow: inset 3px 3px 13px 2px rgba(0, 0, 0, 0.22); 650 box-shadow: inset 3px 3px 13px 2px rgba(0, 0, 0, 0.22); 651 border: 1px solid rgba(0, 0, 0, 0.2); } 652 .customize-control-kirki-color-palette .colors-wrapper { 653 max-height: 300px; 654 overflow-y: auto; 655 padding: 10px; } 656 .customize-control-kirki-color-palette .colors-wrapper input { 657 display: none; } 658 .customize-control-kirki-color-palette .colors-wrapper input:checked + label .color-palette-color { 659 -webkit-box-shadow: 1px 1px 10px 1px #333333; 660 box-shadow: 1px 1px 10px 1px #333333; 661 border: 1px solid rgba(0, 0, 0, 0.3); } 662 663 .wp-customizer div.ui-datepicker { 664 z-index: 500001 !important; 665 width: 255px; 666 background: #fff; 667 border: 1px solid #dedede; } 668 .wp-customizer div.ui-datepicker .ui-datepicker-header { 669 padding: 10px; 670 background: #e5e5e5; 671 border-bottom: 1px solid #fff; } 672 .wp-customizer div.ui-datepicker .ui-datepicker-header .ui-datepicker-next, 673 .wp-customizer div.ui-datepicker .ui-datepicker-header .ui-datepicker-prev { 674 display: block; 675 position: absolute; 676 width: 1em; 677 overflow: hidden; } 678 .wp-customizer div.ui-datepicker .ui-datepicker-header .ui-datepicker-next:after, .wp-customizer div.ui-datepicker .ui-datepicker-header .ui-datepicker-next:before, 679 .wp-customizer div.ui-datepicker .ui-datepicker-header .ui-datepicker-prev:after, 680 .wp-customizer div.ui-datepicker .ui-datepicker-header .ui-datepicker-prev:before { 681 font-family: dashicons; } 682 .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, 683 .wp-customizer div.ui-datepicker .ui-datepicker-header .ui-datepicker-prev:after:hover, 684 .wp-customizer div.ui-datepicker .ui-datepicker-header .ui-datepicker-prev:before:hover { 685 cursor: pointer; } 686 .wp-customizer div.ui-datepicker .ui-datepicker-header .ui-datepicker-next .ui-icon, 687 .wp-customizer div.ui-datepicker .ui-datepicker-header .ui-datepicker-prev .ui-icon { 688 display: none; } 689 .wp-customizer div.ui-datepicker .ui-datepicker-header .ui-datepicker-prev { 690 left: 10px; } 691 .wp-customizer div.ui-datepicker .ui-datepicker-header .ui-datepicker-prev:before { 692 content: "\f341"; } 693 .wp-customizer div.ui-datepicker .ui-datepicker-header .ui-datepicker-next { 694 right: 10px; } 695 .wp-customizer div.ui-datepicker .ui-datepicker-header .ui-datepicker-next:after { 696 content: "\f345"; } 697 .wp-customizer div.ui-datepicker .ui-datepicker-header .ui-datepicker-title { 698 text-align: center; } 699 .wp-customizer div.ui-datepicker .ui-datepicker-calendar { 700 border-collapse: collapse; 701 width: 100%; } 702 .wp-customizer div.ui-datepicker .ui-datepicker-calendar thead { 703 background: #e5e5e5; 704 padding: 5px; } 705 .wp-customizer div.ui-datepicker .ui-datepicker-calendar tr td { 706 text-align: center; } 707 .wp-customizer div.ui-datepicker .ui-datepicker-calendar tr td a { 708 display: block; 709 padding: 5px; 710 color: #333; 711 text-decoration: none; } 712 .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 { 713 color: #fff; 714 background-color: #0073aa; } 715 .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 { 716 color: #999; } 717 718 .customize-control-kirki-dashicons label { 719 position: relative; 720 display: inline-block; } 721 .customize-control-kirki-dashicons .icons-wrapper { 722 max-height: 300px; 723 overflow-y: scroll; } 724 .customize-control-kirki-dashicons .icons-wrapper h4 { 725 font-weight: 300; 726 margin: 0.7em 0; } 727 .customize-control-kirki-dashicons .icons-wrapper .dashicons { 728 padding: 3px; 729 font-size: 25px; 730 width: 25px; 731 height: 25px; 732 border: 1px solid transparent; } 733 .customize-control-kirki-dashicons .icons-wrapper input { 734 display: none; } 735 .customize-control-kirki-dashicons .icons-wrapper input:checked + label .dashicons { 736 border: 1px solid #3498DB; 737 color: #000; } 738 739 .customize-control-kirki-number .ui-spinner.ui-widget-content { 740 position: relative; } 741 .customize-control-kirki-number .ui-spinner.ui-widget-content .ui-spinner-button { 742 position: absolute; 743 right: 0; 744 color: rgba(0, 0, 0, 0.3); 745 border: none; 746 padding: 0 5px; 747 width: 20px; 748 height: calc(50% + 0.5em); 749 border-radius: 0; 750 -webkit-border-radius: 0; 751 box-shadow: none; 752 -webkit-box-shadow: none; 753 background: transparent; 754 background: none; 755 margin: 0; } 756 .customize-control-kirki-number .ui-spinner.ui-widget-content .ui-spinner-button .ui-button-text { 757 display: none; } 758 .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 { 759 font-family: dashicons; 760 position: absolute; 761 left: 0; } 762 .customize-control-kirki-number .ui-spinner.ui-widget-content .ui-spinner-button.ui-spinner-up { 763 top: -50%; } 764 .customize-control-kirki-number .ui-spinner.ui-widget-content .ui-spinner-button.ui-spinner-up:before { 765 content: "\f343"; } 766 .customize-control-kirki-number .ui-spinner.ui-widget-content .ui-spinner-button.ui-spinner-down { 767 top: 50%; } 768 .customize-control-kirki-number .ui-spinner.ui-widget-content .ui-spinner-button.ui-spinner-down:before { 769 content: "\f347"; } 770 .customize-control-kirki-number .ui-spinner.ui-widget-content .ui-spinner-button:hover { 771 color: rgba(0, 0, 0, 0.7); } 772 773 .customize-control-kirki-palette input[type="radio"] { 774 display: none; } 775 .customize-control-kirki-palette input[type="radio"]:checked + label { 776 border: 3px solid rgba(0, 0, 0, 0.4); } 777 .customize-control-kirki-palette label { 778 background: none; 779 padding: 0; 780 border-top: 3px solid transparent; 781 border-bottom: 3px solid transparent; 782 margin-bottom: 5px; 783 display: flex; } 784 .customize-control-kirki-palette label span { 785 padding: 10px 0; 786 flex-grow: 1; 787 font-size: 0; 788 line-height: 10px; 789 color: transparent; 790 -webkit-transition: all 200ms ease-in-out; 791 -moz-transition: all 200ms ease-in-out; 792 -ms-transition: all 200ms ease-in-out; 793 -o-transition: all 200ms ease-in-out; 794 transition: all 200ms ease-in-out; 795 border-top: 1px solid rgba(0, 0, 0, 0.1); 796 border-bottom: 1px solid rgba(0, 0, 0, 0.1); } 797 .customize-control-kirki-palette label span:first-child { 798 border-left: 1px solid rgba(0, 0, 0, 0.1); } 799 .customize-control-kirki-palette label span:last-child { 800 border-right: 1px solid rgba(0, 0, 0, 0.1); } 801 .customize-control-kirki-palette label span:hover { 802 padding: 10px; 803 flex-grow: 3; 804 min-width: 60px; 805 font-size: 10px; 806 line-height: 10px; 807 color: #000; } 808 809 .customize-control-kirki-radio input[type=radio] { 810 width: 18px; 811 height: 18px; } 812 .customize-control-kirki-radio input[type=radio]:checked:before { 813 width: 10px; 814 height: 10px; 815 margin: 3px; } 816 .customize-control-kirki-radio label { 817 display: list-item; 818 margin-bottom: 7px; } 819 .customize-control-kirki-radio label .option-description { 820 display: block; 821 color: rgba(0, 0, 0, 0.35); 822 font-size: 0.9em; 823 padding-left: 25px; } 824 825 .customize-control-kirki-radio-buttonset .buttonset .switch-label { 826 background: rgba(0, 0, 0, 0.05); 827 color: #555; 828 border-right: 1px solid rgba(0, 0, 0, 0.2); 829 padding: 4px 7px; 830 margin: 0; 831 font-size: 12px; } 832 .customize-control-kirki-radio-buttonset .buttonset .switch-label:last-child { 833 border-right: none; } 834 .customize-control-kirki-radio-buttonset .buttonset .switch-input { 835 display: none; } 836 .customize-control-kirki-radio-buttonset .buttonset .switch-input:checked + .switch-label { 837 background-color: #3498DB; 838 color: #fff; } 839 840 .customize-control-kirki-radio-image label { 841 position: relative; 842 display: inline-block; } 843 .customize-control-kirki-radio-image input { 844 display: none; } 845 .customize-control-kirki-radio-image input img { 846 border: 1px solid transparent; } 847 .customize-control-kirki-radio-image input:checked + label img { 848 -webkit-box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.25); 849 box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.25); 850 border: 1px solid #3498DB; } 851 .customize-control-kirki-radio-image input + label .image-clickable { 852 position: absolute; 853 top: 0; 854 bottom: 0; 855 left: 0; 856 right: 0; 857 width: 100%; 858 height: 100%; } 859 860 .customize-control-repeater .repeater-fields .repeater-row { 861 border: 1px solid #999; 862 margin-top: 0.5rem; 863 background: #eee; 864 position: relative; } 865 .customize-control-repeater .repeater-fields .repeater-row.minimized { 866 border: 1px solid #dfdfdf; 867 padding: 0; } 868 .customize-control-repeater .repeater-fields .repeater-row.minimized:hover { 869 border: 1px solid #999; } 870 .customize-control-repeater .repeater-fields .repeater-row.minimized .repeater-row-content { 871 display: none; } 872 .customize-control-repeater .repeater-fields .repeater-row label { 873 margin-bottom: 12px; 874 clear: both; } 875 .customize-control-repeater .repeater-fields .repeater-row .repeater-field.repeater-field- { 876 display: none; } 877 .customize-control-repeater .repeater-fields .repeater-row .repeater-field.repeater-field-radio-image input { 878 display: none; } 879 .customize-control-repeater .repeater-fields .repeater-row .repeater-field.repeater-field-radio-image input img { 880 border: 1px solid transparent; } 881 .customize-control-repeater .repeater-fields .repeater-row .repeater-field.repeater-field-radio-image input:checked + label img { 882 -webkit-box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.25); 883 box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.25); 884 border: 1px solid #3498DB; } 885 .customize-control-repeater .repeater-fields .repeater-row .repeater-field:last-child { 886 border-bottom: none; 887 padding-bottom: 0; } 888 .customize-control-repeater button.repeater-add { 889 margin-top: 1rem; } 890 .customize-control-repeater .repeater-row-content { 891 padding: 10px 15px; } 892 .customize-control-repeater .repeater-field { 893 margin-bottom: 12px; 894 width: 100%; 895 clear: both; 896 padding-bottom: 12px; 897 border-bottom: 1px dotted #CCC; } 898 .customize-control-repeater .repeater-field .customize-control-title { 899 font-size: 13px; 900 line-height: initial; } 901 .customize-control-repeater .repeater-field .customize-control-description { 902 font-size: 13px; 903 line-height: initial; } 904 .customize-control-repeater .repeater-field.repeater-field-hidden { 905 margin: 0; 906 padding: 0; 907 border: 0; } 908 .customize-control-repeater .repeater-field-select select { 909 margin-left: 0; } 910 .customize-control-repeater .repeater-field-checkbox label { 911 line-height: 28px; } 912 .customize-control-repeater .repeater-field-checkbox input { 913 line-height: 28px; 914 margin-right: 5px; } 915 .customize-control-repeater .repeater-field-textarea textarea { 916 width: 100%; 917 resize: vertical; } 918 .customize-control-repeater .repeater-row-header { 919 background: white; 920 border: 1px solid #dfdfdf; 921 position: relative; 922 padding: 10px 15px; 923 height: auto; 924 min-height: 20px; 925 line-height: 30px; 926 overflow: hidden; 927 word-wrap: break-word; } 928 .customize-control-repeater .repeater-row-header:hover { 929 cursor: move; } 930 .customize-control-repeater .repeater-row-header .dashicons { 931 font-size: 18px; 932 position: absolute; 933 right: 12px; 934 top: 2px; 935 color: #a0a5aa; } 936 .customize-control-repeater .repeater-row-label { 937 font-size: 13px; 938 font-weight: 600; 939 line-height: 20px; 940 display: block; 941 text-transform: capitalize; 942 width: 90%; 943 overflow: hidden; 944 height: 18px; } 945 .customize-control-repeater .repeater-row-remove { 946 color: #a00; } 947 .customize-control-repeater .repeater-row-remove:hover { 948 color: #f00; } 949 .customize-control-repeater .repeater-minimize { 950 line-height: 36px; } 951 952 .kirki-image-attachment { 953 margin: 0; 954 text-align: center; 955 margin-bottom: 10px; } 956 .kirki-image-attachment img { 957 display: inline-block; } 958 959 .kirki-file-attachment { 960 margin: 0; 961 text-align: center; 962 margin-bottom: 10px; } 963 .kirki-file-attachment .file { 964 display: block; 965 padding: 10px 5px; 966 border: 1px dotted #c3c3c3; 967 background: #f9f9f9; } 968 969 .limit { 970 padding: 3px; 971 border-radius: 3px; } 972 .limit.highlight { 973 background: #D32F2F; 974 color: #fff; } 975 976 .selectize-control { 977 position: relative; } 978 .selectize-control.single .selectize-input, 979 .selectize-control.single .selectize-input input { 980 cursor: pointer; } 981 .selectize-control.single .selectize-input.input-active, .selectize-control.single .selectize-input.input-active input { 982 cursor: text; } 983 .selectize-control.single .selectize-input:after { 984 content: "\f347"; 985 display: block; 986 position: absolute; 987 top: 0; 988 right: 0; 989 margin-top: 0; 990 width: 12px; 991 height: 36px; 992 font-family: dashicons; 993 border-left: 1px solid rgba(0, 0, 0, 0.06); 994 line-height: 36px; 995 padding: 0 3px; } 996 .selectize-control.single .selectize-input.dropdown-active:after { 997 content: "\f343"; 998 border-left: 1px solid rgba(0, 0, 0, 0.1); } 999 .selectize-control.single .selectize-input.disabled { 1000 opacity: 0.5; 1001 background-color: #fafafa; } 1002 .selectize-control.single.rtl .selectize-input:after { 1003 left: 15px; 1004 right: auto; } 1005 .selectize-control.rtl .selectize-input > input { 1006 margin: 0 4px 0 -2px !important; } 1007 .selectize-control .plugin-drag_drop.multi > .selectize-input > div.ui-sortable-placeholder { 1008 visibility: visible !important; 1009 background: #f2f2f2 !important; 1010 background: rgba(0, 0, 0, 0.06) !important; 1011 border: 0 none !important; 1012 -webkit-box-shadow: inset 0 0 12px 4px #ffffff; 1013 box-shadow: inset 0 0 12px 4px #ffffff; } 1014 .selectize-control .plugin-drag_drop .ui-sortable-placeholder::after { 1015 content: '!'; 1016 visibility: hidden; } 1017 .selectize-control .plugin-drag_drop .ui-sortable-helper { 1018 -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); 1019 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); } 1020 .selectize-control .plugin-remove_button [data-value] { 1021 position: relative; 1022 padding-right: 24px !important; } 1023 .selectize-control .plugin-remove_button [data-value] .remove { 1024 z-index: 1; 1025 /* fixes ie bug (see #392) */ 1026 position: absolute; 1027 top: 0; 1028 right: 0; 1029 bottom: 0; 1030 width: 17px; 1031 text-align: center; 1032 font-weight: bold; 1033 font-size: 12px; 1034 color: inherit; 1035 text-decoration: none; 1036 vertical-align: middle; 1037 display: inline-block; 1038 padding: 2px 0 0; 1039 border-left: 1px solid #d0d0d0; 1040 -webkit-border-radius: 0 2px 2px 0; 1041 -moz-border-radius: 0 2px 2px 0; 1042 border-radius: 0 2px 2px 0; 1043 -webkit-box-sizing: border-box; 1044 -moz-box-sizing: border-box; 1045 box-sizing: border-box; } 1046 .selectize-control .plugin-remove_button .remove:hover { 1047 background: rgba(0, 0, 0, 0.05); } 1048 .selectize-control .plugin-remove_button.active .remove { 1049 border-left-color: #cacaca; } 1050 .selectize-control .plugin .disabled [data-value] .remove:hover { 1051 background: none; } 1052 .selectize-control .plugin .disabled [data-value] .remove { 1053 border-left-color: #ffffff; } 1054 .selectize-control.multi .selectize-input { 1055 min-height: 36px; } 1056 .selectize-control.multi .selectize-input.has-items { 1057 padding: 6px 8px 3px; } 1058 .selectize-control.multi .selectize-input > div { 1059 cursor: pointer; 1060 margin: 0 3px 3px 0; 1061 padding: 2px 6px; 1062 background: #f2f2f2; 1063 color: #303030; 1064 border: 0 solid #d0d0d0; } 1065 .selectize-control.multi .selectize-input > div.active { 1066 background: #e8e8e8; 1067 color: #303030; 1068 border: 0 solid #cacaca; } 1069 .selectize-control.multi .selectize-input.disabled > div, .selectize-control.multi .selectize-input.disabled > div.active { 1070 color: #7d7d7d; 1071 background: #ffffff; 1072 border: 0 solid #ffffff; } 1073 .selectize-dropdown { 1074 position: relative; 1075 top: -4px !important; 1076 z-index: 10; 1077 border: 1px solid #d0d0d0; 1078 background: #ffffff; 1079 margin: -1px 0 0; 1080 border-top: 0 none; 1081 -webkit-box-sizing: border-box; 1082 -moz-box-sizing: border-box; 1083 box-sizing: border-box; 1084 -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); 1085 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); 1086 -webkit-border-radius: 0 0 3px 3px; 1087 -moz-border-radius: 0 0 3px 3px; 1088 border-radius: 0 0 3px 3px; 1089 z-index: 999; } 1090 .selectize-dropdown-header { 1091 position: relative; 1092 padding: 5px 8px; 1093 border-bottom: 1px solid #d0d0d0; 1094 background: #f8f8f8; 1095 -webkit-border-radius: 3px 3px 0 0; 1096 -moz-border-radius: 3px 3px 0 0; 1097 border-radius: 3px 3px 0 0; } 1098 .selectize-dropdown-header-close { 1099 position: absolute; 1100 right: 8px; 1101 top: 50%; 1102 color: #303030; 1103 opacity: 0.4; 1104 margin-top: -12px; 1105 line-height: 20px; 1106 font-size: 20px !important; } 1107 .selectize-dropdown-header-close:hover { 1108 color: #000000; } 1109 .selectize-dropdown.plugin-optgroup_columns .optgroup { 1110 border-right: 1px solid #f2f2f2; 1111 border-top: 0 none; 1112 float: left; 1113 -webkit-box-sizing: border-box; 1114 -moz-box-sizing: border-box; 1115 box-sizing: border-box; } 1116 .selectize-dropdown.plugin-optgroup_columns .optgroup:last-child { 1117 border-right: 0 none; } 1118 .selectize-dropdown.plugin-optgroup_columns .optgroup:before { 1119 display: none; } 1120 .selectize-dropdown.plugin-optgroup_columns .optgroup-header { 1121 border-top: 0 none; } 1122 .selectize-dropdown, .selectize-input, .selectize-input input { 1123 color: #303030; 1124 font-family: inherit; 1125 font-size: 13px; 1126 line-height: 18px; 1127 -webkit-font-smoothing: inherit; } 1128 .selectize-control.single .selectize-input.input-active, .selectize-input { 1129 background: #ffffff; 1130 cursor: text; 1131 display: inline-block; } 1132 .selectize-input { 1133 border: 1px solid rgba(0, 0, 0, 0.1); 1134 padding: 8px; 1135 display: inline-block; 1136 width: 100%; 1137 overflow: hidden; 1138 position: relative; 1139 z-index: 1; 1140 -webkit-box-sizing: border-box; 1141 -moz-box-sizing: border-box; 1142 box-sizing: border-box; 1143 -webkit-border-radius: 3px; 1144 -moz-border-radius: 3px; 1145 border-radius: 3px; } 1146 .selectize-input.full { 1147 background-color: #ffffff; } 1148 .selectize-input.disabled, .selectize-input.disabled * { 1149 cursor: default !important; } 1150 .selectize-input.focus { 1151 -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15); 1152 box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15); } 1153 .selectize-input.dropdown-active { 1154 -webkit-border-radius: 3px 3px 0 0; 1155 -moz-border-radius: 3px 3px 0 0; 1156 border-radius: 3px 3px 0 0; } 1157 .selectize-input > * { 1158 vertical-align: baseline; 1159 display: -moz-inline-stack; 1160 display: inline-block; 1161 zoom: 1; 1162 *display: inline; } 1163 .selectize-input > input { 1164 display: inline-block !important; 1165 padding: 0 !important; 1166 min-height: 0 !important; 1167 max-height: none !important; 1168 max-width: 100% !important; 1169 margin: 0 2px 0 0 !important; 1170 text-indent: 0 !important; 1171 border: 0 none !important; 1172 background: none !important; 1173 line-height: inherit !important; 1174 -webkit-user-select: auto !important; 1175 -webkit-box-shadow: none !important; 1176 box-shadow: none !important; } 1177 .selectize-input > input::-ms-clear { 1178 display: none; } 1179 .selectize-input > input:focus { 1180 outline: none !important; } 1181 .selectize-input::after { 1182 content: ' '; 1183 display: block; 1184 clear: left; } 1185 .selectize-input.dropdown-active::before { 1186 content: ' '; 1187 display: block; 1188 position: absolute; 1189 background: #f0f0f0; 1190 height: 1px; 1191 bottom: 0; 1192 left: 0; 1193 right: 0; } 1194 .selectize-dropdown [data-selectable] { 1195 cursor: pointer; 1196 overflow: hidden; } 1197 .selectize-dropdown [data-selectable] .highlight { 1198 background: rgba(125, 168, 208, 0.2); 1199 -webkit-border-radius: 1px; 1200 -moz-border-radius: 1px; 1201 border-radius: 1px; } 1202 .selectize-dropdown .optgroup-header, 1203 .selectize-dropdown [data-selectable] { 1204 padding: 5px 8px; } 1205 .selectize-dropdown .optgroup:first-child .optgroup-header { 1206 border-top: 0 none; } 1207 .selectize-dropdown .optgroup-header { 1208 color: #303030; 1209 background: #ffffff; 1210 cursor: default; } 1211 .selectize-dropdown .active { 1212 background-color: #f5fafd; 1213 color: #495c68; } 1214 .selectize-dropdown .active.create { 1215 color: #495c68; } 1216 .selectize-dropdown .create { 1217 color: rgba(48, 48, 48, 0.5); } 1218 .selectize-dropdown-content { 1219 overflow-y: auto; 1220 overflow-x: hidden; 1221 max-height: 200px; } 1222 1223 .customize-control-kirki-slider input[type=range] { 1224 -webkit-appearance: none; 1225 -webkit-transition: background 0.3s; 1226 -moz-transition: background 0.3s; 1227 transition: background 0.3s; 1228 background-color: rgba(0, 0, 0, 0.1); 1229 height: 5px; 1230 width: calc(100% - 70px); 1231 padding: 0; } 1232 .customize-control-kirki-slider input[type=range]:focus { 1233 box-shadow: none; 1234 outline: none; } 1235 .customize-control-kirki-slider input[type=range]:hover { 1236 background-color: rgba(0, 0, 0, 0.25); } 1237 .customize-control-kirki-slider input[type=range]::-webkit-slider-thumb { 1238 -webkit-appearance: none; 1239 width: 15px; 1240 height: 15px; 1241 border-radius: 50%; 1242 -webkit-border-radius: 50%; 1243 background-color: #3498D9; } 1244 .customize-control-kirki-slider input[type=range]::-webkit-slider-thumb { 1245 -webkit-appearance: none; 1246 width: 15px; 1247 height: 15px; 1248 border: none; 1249 border-radius: 50%; 1250 background-color: #3498D9; } 1251 .customize-control-kirki-slider input[type=range]::-moz-range-thumb { 1252 width: 15px; 1253 height: 15px; 1254 border: none; 1255 border-radius: 50%; 1256 background-color: #3498D9; } 1257 .customize-control-kirki-slider input[type=range]::-ms-thumb { 1258 width: 15px; 1259 height: 15px; 1260 border-radius: 50%; 1261 border: 0; 1262 background-color: #3498D9; } 1263 .customize-control-kirki-slider input[type=range]::-moz-range-track { 1264 border: inherit; 1265 background: transparent; } 1266 .customize-control-kirki-slider input[type=range]::-ms-track { 1267 border: inherit; 1268 color: transparent; 1269 background: transparent; } 1270 .customize-control-kirki-slider input[type=range]::-ms-fill-lower, .customize-control-kirki-slider input[type=range]::-ms-fill-upper { 1271 background: transparent; } 1272 .customize-control-kirki-slider input[type=range]::-ms-tooltip { 1273 display: none; } 1274 .customize-control-kirki-slider .kirki_range_value { 1275 display: inline-block; 1276 font-size: 14px; 1277 padding: 0 5px; 1278 font-weight: 400; 1279 position: relative; 1280 top: 2px; } 1281 .customize-control-kirki-slider .kirki-slider-reset { 1282 color: rgba(0, 0, 0, 0.2); 1283 float: right; 1284 -webkit-transition: color 0.5s ease-in; 1285 -moz-transition: color 0.5s ease-in; 1286 -ms-transition: color 0.5s ease-in; 1287 -o-transition: color 0.5s ease-in; 1288 transition: color 0.5s ease-in; } 1289 .customize-control-kirki-slider .kirki-slider-reset span { 1290 font-size: 16px; 1291 line-height: 22px; } 1292 .customize-control-kirki-slider .kirki-slider-reset:hover { 1293 color: red; } 1294 1295 .customize-control-kirki-sortable ul.ui-sortable li { 1296 padding: 5px 10px; 1297 border: 1px solid #333; 1298 background: #fff; } 1299 .customize-control-kirki-sortable ul.ui-sortable li .dashicons.dashicons-menu { 1300 float: right; } 1301 .customize-control-kirki-sortable ul.ui-sortable li .dashicons.visibility { 1302 margin-right: 10px; } 1303 .customize-control-kirki-sortable ul.ui-sortable li.invisible { 1304 color: #aaa; 1305 border: 1px dashed #aaa; } 1306 .customize-control-kirki-sortable ul.ui-sortable li.invisible .dashicons.visibility { 1307 color: #aaa; } 1308 1309 .customize-control-kirki-spacing .wrapper { 1310 -webkit-box-shadow: inset 0 0 5px 2px rgba(0, 0, 0, 0.1); 1311 box-shadow: inset 0 0 5px 2px rgba(0, 0, 0, 0.1); 1312 width: 96%; 1313 padding: 3%; } 1314 .customize-control-kirki-spacing .wrapper .control { 1315 display: flex; 1316 flex-wrap: wrap; 1317 justify-content: space-between; } 1318 .customize-control-kirki-spacing .wrapper .control > div { 1319 width: 48%; } 1320 .customize-control-kirki-spacing .wrapper .control > div h5 { 1321 margin: 10px 0 7px; } 1322 .customize-control-kirki-spacing .wrapper .control > div .inner { 1323 display: flex; } 1324 .customize-control-kirki-spacing .wrapper .control > div .inner input[type="number"] { 1325 width: 50%; 1326 height: 36px; } 1327 .customize-control-kirki-spacing .wrapper .control > div .inner .selectize-control.single { 1328 width: 50%; } 1329 .customize-control-kirki-spacing .wrapper .control > div .inner .selectize-control.single > .selectize-input { 1330 height: 36px; } 1331 1332 .customize-control-kirki-switch input[type="checkbox"] { 1333 display: none; } 1334 .customize-control-kirki-switch .switch { 1335 border: none; 1336 margin-bottom: 1.5rem; 1337 outline: 0; 1338 padding: 0; 1339 position: relative; 1340 -webkit-user-select: none; 1341 -moz-user-select: none; 1342 -ms-user-select: none; 1343 user-select: none; } 1344 .customize-control-kirki-switch .switch label { 1345 background: rgba(0, 0, 0, 0.2); 1346 color: transparent; 1347 cursor: pointer; 1348 display: block; 1349 margin-bottom: 1rem; 1350 position: relative; 1351 transition: left 0.15s ease-out; 1352 height: 2rem; 1353 width: 4rem; 1354 font-family: Monaco, "Lucida Sans Typewriter", "Lucida Typewriter", "Courier New", Courier, monospace; } 1355 .customize-control-kirki-switch .switch label:after { 1356 background: #FFFFFF; 1357 content: ""; 1358 display: block; 1359 height: 1.5rem; 1360 left: 0.25rem; 1361 position: absolute; 1362 top: 0.25rem; 1363 width: 1.5rem; 1364 -webkit-transition: all 0.25s ease-in-out; 1365 -moz-transition: all 0.25s ease-in-out; 1366 -ms-transition: all 0.25s ease-in-out; 1367 -o-transition: all 0.25s ease-in-out; 1368 transition: all 0.25s ease-in-out; } 1369 .customize-control-kirki-switch .switch input { 1370 left: 10px; 1371 opacity: 0; 1372 padding: 0; 1373 position: absolute; 1374 top: 9px; } 1375 .customize-control-kirki-switch .switch input + label { 1376 margin-left: 0; 1377 margin-right: 0; } 1378 .customize-control-kirki-switch .switch input:checked + label { 1379 background: #3498DB; } 1380 .customize-control-kirki-switch .switch input:checked + label:after { 1381 left: 2.25rem; 1382 background: #ffffff; } 1383 .customize-control-kirki-switch .switch.round { 1384 border-radius: 1000px; } 1385 .customize-control-kirki-switch .switch.round label { 1386 border-radius: 2rem; } 1387 .customize-control-kirki-switch .switch.round label:after { 1388 border-radius: 2rem; } 1389 .customize-control-kirki-switch .switch-off, 1390 .customize-control-kirki-switch .switch-on { 1391 line-height: 32px; 1392 font-weight: bold; 1393 padding: 0 10px; } 1394 .customize-control-kirki-switch .switch-on { 1395 color: #fff; 1396 padding-right: 5px; } 1397 .customize-control-kirki-switch .switch-off { 1398 color: #777; 1399 padding-left: 5px; } 1400 1401 .customize-control-kirki-generic textarea { 1402 width: 100%; 1403 border: 1px solid rgba(0, 0, 0, 0.1); 1404 -webkit-box-shadow: none; 1405 box-shadow: none; } 1406 1407 .customize-control-kirki-toggle label { 1408 display: flex; 1409 flex-wrap: wrap; } 1410 .customize-control-kirki-toggle label .customize-control-title { 1411 width: calc(100% - 55px); } 1412 .customize-control-kirki-toggle label .description { 1413 order: 99; } 1414 .customize-control-kirki-toggle input[type="checkbox"] { 1415 display: none; } 1416 .customize-control-kirki-toggle .switch { 1417 border: 1px solid rgba(0, 0, 0, 0.1); 1418 display: inline-block; 1419 width: 35px; 1420 height: 12px; 1421 border-radius: 8px; 1422 background: #ccc; 1423 vertical-align: middle; 1424 position: relative; 1425 top: 4px; 1426 cursor: pointer; 1427 user-select: none; 1428 transition: background 350ms ease; } 1429 .customize-control-kirki-toggle .switch:after, .customize-control-kirki-toggle .switch:before { 1430 content: ""; 1431 display: block; 1432 width: 20px; 1433 height: 20px; 1434 border-radius: 50%; 1435 position: absolute; 1436 top: 50%; 1437 left: -3px; 1438 transition: all 350ms cubic-bezier(0, 0.95, 0.38, 0.98), background 150ms ease; } 1439 .customize-control-kirki-toggle .switch:before { 1440 background: rgba(0, 0, 0, 0.2); 1441 transform: translate3d(0, -50%, 0) scale(0); } 1442 .customize-control-kirki-toggle .switch:after { 1443 background: #999; 1444 border: 1px solid rgba(0, 0, 0, 0.1); 1445 transform: translate3d(0, -50%, 0); } 1446 .customize-control-kirki-toggle .switch:active:before { 1447 transform: translate3d(0, -50%, 0) scale(3); } 1448 .customize-control-kirki-toggle input:checked + .switch { 1449 background: rgba(52, 152, 222, 0.3); } 1450 .customize-control-kirki-toggle input:checked + .switch:before { 1451 background: rgba(52, 152, 222, 0.075); 1452 transform: translate3d(100%, -50%, 0) scale(1); } 1453 .customize-control-kirki-toggle input:checked + .switch:after { 1454 background: #3498DE; 1455 transform: translate3d(100%, -50%, 0); } 1456 .customize-control-kirki-toggle input:checked + .switch:active:before { 1457 background: rgba(52, 152, 222, 0.075); 1458 transform: translate3d(100%, -50%, 0) scale(3); } 1459 1460 .customize-control-kirki-typography .wrapper { 1461 -webkit-box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, 0.1); 1462 box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, 0.1); 1463 padding: 10px; 1464 border-radius: 3px; 1465 display: flex; 1466 flex-wrap: wrap; 1467 justify-content: space-between; } 1468 .customize-control-kirki-typography .wrapper .color, 1469 .customize-control-kirki-typography .wrapper .font-family, 1470 .customize-control-kirki-typography .wrapper .font-size, 1471 .customize-control-kirki-typography .wrapper .letter-spacing, 1472 .customize-control-kirki-typography .wrapper .line-height, 1473 .customize-control-kirki-typography .wrapper .subsets, 1474 .customize-control-kirki-typography .wrapper .text-transform, 1475 .customize-control-kirki-typography .wrapper .variant { 1476 width: 100%; 1477 float: none; 1478 clear: both; } 1479 .customize-control-kirki-typography .wrapper .color h5, 1480 .customize-control-kirki-typography .wrapper .font-family h5, 1481 .customize-control-kirki-typography .wrapper .font-size h5, 1482 .customize-control-kirki-typography .wrapper .letter-spacing h5, 1483 .customize-control-kirki-typography .wrapper .line-height h5, 1484 .customize-control-kirki-typography .wrapper .subsets h5, 1485 .customize-control-kirki-typography .wrapper .text-transform h5, 1486 .customize-control-kirki-typography .wrapper .variant h5 { 1487 margin: 0.67em 0 0; } 1488 .customize-control-kirki-typography .wrapper .font-size, 1489 .customize-control-kirki-typography .wrapper .letter-spacing, 1490 .customize-control-kirki-typography .wrapper .line-height { 1491 width: 50%; } 1492 .customize-control-kirki-typography .wrapper .text-align { 1493 width: 100%; } 1494 .customize-control-kirki-typography .wrapper .text-align .dashicons { 1495 padding: 3px; 1496 font-size: 25px; 1497 width: 25px; 1498 height: 25px; 1499 border: 1px solid transparent; } 1500 .customize-control-kirki-typography .wrapper .text-align input { 1501 display: none; } 1502 .customize-control-kirki-typography .wrapper .text-align input:checked + label .dashicons { 1503 border: 1px solid #3498DB; 1504 color: #000; } 1505 .customize-control-kirki-typography .wrapper .text-transform { 1506 padding-top: 10px; } 1507 .customize-control-kirki-typography .wrapper .color { 1508 width: auto; } 1509 1510 .hint, 1511 [data-hint] { 1512 position: relative; 1513 display: inline-block; } 1514 .hint:before, .hint:after, 1515 [data-hint]:before, 1516 [data-hint]:after { 1517 position: absolute; 1518 -webkit-transform: translate3d(0, 0, 0); 1519 -moz-transform: translate3d(0, 0, 0); 1520 transform: translate3d(0, 0, 0); 1521 visibility: hidden; 1522 opacity: 0; 1523 z-index: 998; 1524 pointer-events: none; 1525 transition: 0.3s ease; 1526 transition-delay: 250ms; } 1527 .hint:hover:before, .hint:hover:after, .hint:focus:before, .hint:focus:after, 1528 [data-hint]:hover:before, 1529 [data-hint]:hover:after, 1530 [data-hint]:focus:before, 1531 [data-hint]:focus:after { 1532 visibility: visible; 1533 opacity: 1; } 1534 .hint:hover:before, .hint:hover:after, 1535 [data-hint]:hover:before, 1536 [data-hint]:hover:after { 1537 transition-delay: 0; } 1538 .hint:before, 1539 [data-hint]:before { 1540 content: ''; 1541 position: absolute; 1542 background: transparent; 1543 border: none; 1544 z-index: 999; 1545 width: 0; 1546 height: 0; 1547 border-top: 5px solid transparent; 1548 border-bottom: 5px solid transparent; 1549 border-left: 5px solid #333; 1550 left: -5px; 1551 top: 5px; } 1552 .hint:after, 1553 [data-hint]:after { 1554 content: attr(data-hint); 1555 background: #333; 1556 color: white; 1557 padding: 5px 10px; 1558 font-size: 12px; 1559 line-height: 14px; 1560 height: auto; 1561 margin-bottom: -14px; 1562 width: 170px; 1563 max-width: 170px; 1564 display: block; 1565 white-space: normal; 1566 text-align: right; 1567 position: relative; 1568 top: -22px; 1569 left: -195px; } 1570 1571 li.customize-control { 1572 position: relative; } 1573 li.customize-control a.tooltip.hint--left { 1574 display: block; 1575 position: absolute; 1576 right: -10px; 1577 border-radius: 50%; 1578 color: #999; 1579 border: none; 1580 line-height: 8px; 1581 width: 20px; 1582 height: 20px; 1583 z-index: 10; } 1584 1585 .rtl li.customize-control a.tooltip.hint--left { 1586 right: auto; 1587 left: 0; } 1588 .rtl .hint:before, 1589 .rtl [data-hint]:before { 1590 left: 20px; 1591 border-left: none; 1592 border-right: 5px solid #333; } 1593 .rtl .hint:after, 1594 .rtl [data-hint]:after { 1595 left: 195px; } 1596 1597 /*# sourceMappingURL=customizer.css.map */