style-rtl.css (144689B)
1 @charset "UTF-8"; 2 /** 3 * Colors 4 */ 5 /** 6 * Breakpoints & Media Queries 7 */ 8 /** 9 * SCSS Variables. 10 * 11 * Please use variables from this sheet to ensure consistency across the UI. 12 * Don't add to this sheet unless you're pretty sure the value will be reused in many places. 13 * For example, don't add rules to this sheet that affect block visuals. It's purely for UI. 14 */ 15 /** 16 * Colors 17 */ 18 /** 19 * Fonts & basic variables. 20 */ 21 /** 22 * Grid System. 23 * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/ 24 */ 25 /** 26 * Dimensions. 27 */ 28 /** 29 * Shadows. 30 */ 31 /** 32 * Editor widths. 33 */ 34 /** 35 * Block & Editor UI. 36 */ 37 /** 38 * Block paddings. 39 */ 40 /** 41 * React Native specific. 42 * These variables do not appear to be used anywhere else. 43 */ 44 /** 45 * Breakpoint mixins 46 */ 47 /** 48 * Long content fade mixin 49 * 50 * Creates a fading overlay to signify that the content is longer 51 * than the space allows. 52 */ 53 /** 54 * Focus styles. 55 */ 56 /** 57 * Applies editor left position to the selector passed as argument 58 */ 59 /** 60 * Styles that are reused verbatim in a few places 61 */ 62 /** 63 * Allows users to opt-out of animations via OS-level preferences. 64 */ 65 /** 66 * Reset default styles for JavaScript UI based pages. 67 * This is a WP-admin agnostic reset 68 */ 69 /** 70 * Reset the WP Admin page styles for Gutenberg-like pages. 71 */ 72 :root { 73 --wp-admin-theme-color: #007cba; 74 --wp-admin-theme-color-darker-10: #006ba1; 75 --wp-admin-theme-color-darker-20: #005a87; 76 --wp-admin-border-width-focus: 2px; 77 } 78 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 79 :root { 80 --wp-admin-border-width-focus: 1.5px; 81 } 82 } 83 84 .components-animate__appear { 85 animation: components-animate__appear-animation 0.1s cubic-bezier(0, 0, 0.2, 1) 0s; 86 animation-fill-mode: forwards; 87 } 88 @media (prefers-reduced-motion: reduce) { 89 .components-animate__appear { 90 animation-duration: 1ms; 91 animation-delay: 0s; 92 } 93 } 94 .components-animate__appear.is-from-top, .components-animate__appear.is-from-top.is-from-left { 95 transform-origin: top right; 96 } 97 .components-animate__appear.is-from-top.is-from-right { 98 transform-origin: top left; 99 } 100 .components-animate__appear.is-from-bottom, .components-animate__appear.is-from-bottom.is-from-left { 101 transform-origin: bottom right; 102 } 103 .components-animate__appear.is-from-bottom.is-from-right { 104 transform-origin: bottom left; 105 } 106 107 @keyframes components-animate__appear-animation { 108 from { 109 transform: translateY(-2em) scaleY(0) scaleX(0); 110 } 111 to { 112 transform: translateY(0%) scaleY(1) scaleX(1); 113 } 114 } 115 .components-animate__slide-in { 116 animation: components-animate__slide-in-animation 0.1s cubic-bezier(0, 0, 0.2, 1); 117 animation-fill-mode: forwards; 118 } 119 @media (prefers-reduced-motion: reduce) { 120 .components-animate__slide-in { 121 animation-duration: 1ms; 122 animation-delay: 0s; 123 } 124 } 125 .components-animate__slide-in.is-from-left { 126 transform: translateX(-100%); 127 } 128 .components-animate__slide-in.is-from-right { 129 transform: translateX(100%); 130 } 131 132 @keyframes components-animate__slide-in-animation { 133 100% { 134 transform: translateX(0%); 135 } 136 } 137 .components-animate__loading { 138 animation: components-animate__loading 1.6s ease-in-out infinite; 139 } 140 141 @keyframes components-animate__loading { 142 0% { 143 opacity: 0.5; 144 } 145 50% { 146 opacity: 1; 147 } 148 100% { 149 opacity: 0.5; 150 } 151 } 152 .components-autocomplete__popover .components-popover__content > div { 153 padding: 16px; 154 min-width: 220px; 155 } 156 157 .components-autocomplete__result.components-button { 158 display: flex; 159 height: auto; 160 min-height: 36px; 161 text-align: right; 162 width: 100%; 163 } 164 .components-autocomplete__result.components-button.is-selected { 165 box-shadow: 0 0 0 2px var(--wp-admin-theme-color); 166 } 167 168 .components-button-group { 169 display: inline-block; 170 } 171 .components-button-group .components-button { 172 border-radius: 0; 173 display: inline-flex; 174 color: #1e1e1e; 175 box-shadow: inset 0 0 0 1px #1e1e1e; 176 } 177 .components-button-group .components-button + .components-button { 178 margin-right: -1px; 179 } 180 .components-button-group .components-button:first-child { 181 border-radius: 0 2px 2px 0; 182 } 183 .components-button-group .components-button:last-child { 184 border-radius: 2px 0 0 2px; 185 } 186 .components-button-group .components-button:focus, .components-button-group .components-button.is-primary { 187 position: relative; 188 z-index: 1; 189 } 190 .components-button-group .components-button.is-primary { 191 box-shadow: inset 0 0 0 1px #1e1e1e; 192 } 193 194 .components-button { 195 display: inline-flex; 196 text-decoration: none; 197 font-weight: normal; 198 font-size: 13px; 199 margin: 0; 200 border: 0; 201 cursor: pointer; 202 -webkit-appearance: none; 203 background: none; 204 transition: box-shadow 0.1s linear; 205 height: 36px; 206 align-items: center; 207 box-sizing: border-box; 208 padding: 6px 12px; 209 border-radius: 2px; 210 color: #1e1e1e; 211 /** 212 * Primary button style. 213 */ 214 /** 215 * Secondary and tertiary buttons. 216 */ 217 /** 218 * Secondary button style. 219 */ 220 /** 221 * Tertiary buttons. 222 */ 223 /** 224 * Destructive buttons. 225 */ 226 /** 227 * Link buttons. 228 */ 229 } 230 @media (prefers-reduced-motion: reduce) { 231 .components-button { 232 transition-duration: 0s; 233 transition-delay: 0s; 234 } 235 } 236 .components-button[aria-expanded=true], .components-button:hover { 237 color: var(--wp-admin-theme-color); 238 } 239 .components-button[aria-disabled=true]:hover { 240 color: initial; 241 } 242 .components-button:focus:not(:disabled) { 243 box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); 244 outline: 3px solid transparent; 245 } 246 .components-button.is-primary { 247 white-space: nowrap; 248 background: var(--wp-admin-theme-color); 249 color: #fff; 250 text-decoration: none; 251 text-shadow: none; 252 outline: 1px solid transparent; 253 } 254 .components-button.is-primary:hover:not(:disabled) { 255 background: var(--wp-admin-theme-color-darker-10); 256 color: #fff; 257 } 258 .components-button.is-primary:active:not(:disabled) { 259 background: var(--wp-admin-theme-color-darker-20); 260 border-color: var(--wp-admin-theme-color-darker-20); 261 color: #fff; 262 } 263 .components-button.is-primary:focus:not(:disabled) { 264 box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); 265 } 266 .components-button.is-primary:disabled, .components-button.is-primary:disabled:active:enabled, .components-button.is-primary[aria-disabled=true], .components-button.is-primary[aria-disabled=true]:enabled, .components-button.is-primary[aria-disabled=true]:active:enabled { 267 color: rgba(255, 255, 255, 0.4); 268 background: var(--wp-admin-theme-color); 269 border-color: var(--wp-admin-theme-color); 270 opacity: 1; 271 outline: none; 272 } 273 .components-button.is-primary:disabled:focus:enabled, .components-button.is-primary:disabled:active:enabled:focus:enabled, .components-button.is-primary[aria-disabled=true]:focus:enabled, .components-button.is-primary[aria-disabled=true]:enabled:focus:enabled, .components-button.is-primary[aria-disabled=true]:active:enabled:focus:enabled { 274 box-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--wp-admin-theme-color); 275 } 276 .components-button.is-primary.is-busy, .components-button.is-primary.is-busy:disabled, .components-button.is-primary.is-busy[aria-disabled=true] { 277 color: #fff; 278 background-size: 100px 100%; 279 /* stylelint-disable */ 280 background-image: linear-gradient(45deg, var(--wp-admin-theme-color) 33%, var(--wp-admin-theme-color-darker-20) 33%, var(--wp-admin-theme-color-darker-20) 70%, var(--wp-admin-theme-color) 70%); 281 /* stylelint-enable */ 282 border-color: var(--wp-admin-theme-color); 283 } 284 .components-button.is-secondary, .components-button.is-tertiary { 285 outline: 1px solid transparent; 286 } 287 .components-button.is-secondary:active:not(:disabled), .components-button.is-tertiary:active:not(:disabled) { 288 background: #ddd; 289 color: var(--wp-admin-theme-color-darker-10); 290 box-shadow: none; 291 } 292 .components-button.is-secondary:hover:not(:disabled), .components-button.is-tertiary:hover:not(:disabled) { 293 color: var(--wp-admin-theme-color-darker-10); 294 box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color-darker-10); 295 } 296 .components-button.is-secondary:disabled, .components-button.is-secondary[aria-disabled=true], .components-button.is-secondary[aria-disabled=true]:hover, .components-button.is-tertiary:disabled, .components-button.is-tertiary[aria-disabled=true], .components-button.is-tertiary[aria-disabled=true]:hover { 297 color: #828282; 298 background: #eaeaea; 299 transform: none; 300 opacity: 1; 301 box-shadow: none; 302 outline: none; 303 } 304 .components-button.is-secondary { 305 box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color); 306 outline: 1px solid transparent; 307 white-space: nowrap; 308 color: var(--wp-admin-theme-color); 309 background: transparent; 310 } 311 .components-button.is-tertiary { 312 white-space: nowrap; 313 color: var(--wp-admin-theme-color); 314 background: transparent; 315 padding: 6px; 316 } 317 .components-button.is-tertiary .dashicon { 318 display: inline-block; 319 flex: 0 0 auto; 320 } 321 .components-button.is-destructive { 322 color: #cc1818; 323 box-shadow: inset 0 0 0 1px #cc1818; 324 } 325 .components-button.is-destructive:hover:not(:disabled) { 326 color: #710d0d; 327 box-shadow: inset 0 0 0 1px #710d0d; 328 } 329 .components-button.is-destructive:focus:not(:disabled) { 330 color: var(--wp-admin-theme-color); 331 } 332 .components-button.is-destructive:active:not(:disabled) { 333 background: #ccc; 334 } 335 .components-button.is-destructive.is-primary { 336 color: #fff; 337 background: #cc1818; 338 box-shadow: inset 0 0 0 1px #cc1818; 339 } 340 .components-button.is-destructive.is-primary:hover:not(:disabled) { 341 color: #fff; 342 background: #710d0d; 343 box-shadow: inset 0 0 0 1px #710d0d; 344 } 345 .components-button.is-link { 346 margin: 0; 347 padding: 0; 348 box-shadow: none; 349 border: 0; 350 border-radius: 0; 351 background: none; 352 outline: none; 353 text-align: right; 354 color: var(--wp-admin-theme-color); 355 text-decoration: underline; 356 transition-property: border, background, color; 357 transition-duration: 0.05s; 358 transition-timing-function: ease-in-out; 359 height: auto; 360 } 361 @media (prefers-reduced-motion: reduce) { 362 .components-button.is-link { 363 transition-duration: 0s; 364 transition-delay: 0s; 365 } 366 } 367 .components-button.is-link:focus { 368 border-radius: 2px; 369 } 370 .components-button.is-link.is-destructive { 371 color: #cc1818; 372 } 373 .components-button.is-link.is-destructive:active:not(:disabled), .components-button.is-link.is-destructive:hover:not(:disabled) { 374 color: #710d0d; 375 background: none; 376 } 377 .components-button.is-link.is-destructive:focus:not(:disabled) { 378 color: var(--wp-admin-theme-color); 379 } 380 .components-button:not([aria-disabled=true]):active { 381 color: inherit; 382 } 383 .components-button:disabled, .components-button[aria-disabled=true] { 384 cursor: default; 385 opacity: 0.3; 386 } 387 .components-button.is-busy, .components-button.is-secondary.is-busy, .components-button.is-secondary.is-busy:disabled, .components-button.is-secondary.is-busy[aria-disabled=true] { 388 animation: components-button__busy-animation 2500ms infinite linear; 389 opacity: 1; 390 background-size: 100px 100%; 391 /* stylelint-disable */ 392 background-image: linear-gradient(45deg, #fafafa 33%, #e0e0e0 33%, #e0e0e0 70%, #fafafa 70%); 393 /* stylelint-enable */ 394 } 395 .components-button.is-small { 396 height: 24px; 397 line-height: 22px; 398 padding: 0 8px; 399 font-size: 11px; 400 } 401 .components-button.is-small.has-icon:not(.has-text) { 402 padding: 0 8px; 403 width: 24px; 404 } 405 .components-button.has-icon { 406 padding: 6px; 407 min-width: 36px; 408 justify-content: center; 409 } 410 .components-button.has-icon .dashicon { 411 display: inline-block; 412 flex: 0 0 auto; 413 margin-right: 2px; 414 margin-left: 2px; 415 } 416 .components-button.has-icon.has-text { 417 justify-content: left; 418 } 419 .components-button.has-icon.has-text svg { 420 margin-left: 8px; 421 } 422 .components-button.has-icon.has-text .dashicon { 423 margin-left: 10px; 424 } 425 .components-button.is-pressed { 426 color: #fff; 427 background: #1e1e1e; 428 } 429 .components-button.is-pressed:focus:not(:disabled) { 430 box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); 431 outline: 2px solid transparent; 432 } 433 .components-button.is-pressed:hover:not(:disabled) { 434 color: #fff; 435 background: #1e1e1e; 436 } 437 .components-button svg { 438 fill: currentColor; 439 outline: none; 440 } 441 .components-button .components-visually-hidden { 442 height: auto; 443 } 444 445 @keyframes components-button__busy-animation { 446 0% { 447 background-position: 200px 0; 448 } 449 } 450 .components-checkbox-control__input[type=checkbox] { 451 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; 452 padding: 6px 8px; 453 box-shadow: 0 0 0 transparent; 454 transition: box-shadow 0.1s linear; 455 border-radius: 2px; 456 border: 1px solid #757575; 457 /* Fonts smaller than 16px causes mobile safari to zoom. */ 458 font-size: 16px; 459 /* Override core line-height. To be reviewed. */ 460 line-height: normal; 461 border: 1px solid #1e1e1e; 462 margin-left: 12px; 463 transition: none; 464 border-radius: 2px; 465 background: #fff; 466 color: #1e1e1e; 467 clear: none; 468 cursor: pointer; 469 display: inline-block; 470 line-height: 0; 471 margin: 0 0 0 4px; 472 outline: 0; 473 padding: 0 !important; 474 text-align: center; 475 vertical-align: top; 476 width: 24px; 477 height: 24px; 478 -webkit-appearance: none; 479 appearance: none; 480 transition: 0.1s border-color ease-in-out; 481 } 482 @media (prefers-reduced-motion: reduce) { 483 .components-checkbox-control__input[type=checkbox] { 484 transition-duration: 0s; 485 transition-delay: 0s; 486 } 487 } 488 @media (min-width: 600px) { 489 .components-checkbox-control__input[type=checkbox] { 490 font-size: 13px; 491 /* Override core line-height. To be reviewed. */ 492 line-height: normal; 493 } 494 } 495 .components-checkbox-control__input[type=checkbox]:focus { 496 border-color: var(--wp-admin-theme-color); 497 box-shadow: 0 0 0 1px var(--wp-admin-theme-color); 498 outline: 2px solid transparent; 499 } 500 .components-checkbox-control__input[type=checkbox]::-webkit-input-placeholder { 501 color: rgba(30, 30, 30, 0.62); 502 } 503 .components-checkbox-control__input[type=checkbox]::-moz-placeholder { 504 opacity: 1; 505 color: rgba(30, 30, 30, 0.62); 506 } 507 .components-checkbox-control__input[type=checkbox]:-ms-input-placeholder { 508 color: rgba(30, 30, 30, 0.62); 509 } 510 .components-checkbox-control__input[type=checkbox]:focus { 511 box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-admin-theme-color); 512 outline: 2px solid transparent; 513 } 514 .components-checkbox-control__input[type=checkbox]:checked { 515 background: var(--wp-admin-theme-color); 516 border-color: var(--wp-admin-theme-color); 517 } 518 .components-checkbox-control__input[type=checkbox]:checked::-ms-check { 519 opacity: 0; 520 } 521 .components-checkbox-control__input[type=checkbox]:checked::before, .components-checkbox-control__input[type=checkbox][aria-checked=mixed]::before { 522 margin: -3px -5px; 523 color: #fff; 524 } 525 @media (min-width: 782px) { 526 .components-checkbox-control__input[type=checkbox]:checked::before, .components-checkbox-control__input[type=checkbox][aria-checked=mixed]::before { 527 margin: -4px -5px 0 0; 528 } 529 } 530 .components-checkbox-control__input[type=checkbox][aria-checked=mixed] { 531 background: var(--wp-admin-theme-color); 532 border-color: var(--wp-admin-theme-color); 533 } 534 .components-checkbox-control__input[type=checkbox][aria-checked=mixed]::before { 535 content: ""; 536 float: right; 537 display: inline-block; 538 vertical-align: middle; 539 width: 16px; 540 /* stylelint-disable */ 541 font: normal 30px/1 dashicons; 542 /* stylelint-enable */ 543 speak: none; 544 -webkit-font-smoothing: antialiased; 545 -moz-osx-font-smoothing: grayscale; 546 } 547 @media (min-width: 782px) { 548 .components-checkbox-control__input[type=checkbox][aria-checked=mixed]::before { 549 float: none; 550 font-size: 21px; 551 } 552 } 553 @media (min-width: 600px) { 554 .components-checkbox-control__input[type=checkbox] { 555 height: 20px; 556 width: 20px; 557 } 558 } 559 @media (prefers-reduced-motion: reduce) { 560 .components-checkbox-control__input[type=checkbox] { 561 transition-duration: 0s; 562 transition-delay: 0s; 563 } 564 } 565 .components-checkbox-control__input[type=checkbox]:focus { 566 box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-admin-theme-color); 567 outline: 2px solid transparent; 568 } 569 .components-checkbox-control__input[type=checkbox]:checked { 570 background: var(--wp-admin-theme-color); 571 border-color: var(--wp-admin-theme-color); 572 } 573 .components-checkbox-control__input[type=checkbox]:checked::-ms-check { 574 opacity: 0; 575 } 576 .components-checkbox-control__input[type=checkbox]:checked::before { 577 content: none; 578 } 579 580 .components-checkbox-control__input-container { 581 position: relative; 582 display: inline-block; 583 margin-left: 12px; 584 vertical-align: middle; 585 width: 24px; 586 height: 24px; 587 } 588 @media (min-width: 600px) { 589 .components-checkbox-control__input-container { 590 width: 20px; 591 height: 20px; 592 } 593 } 594 595 svg.components-checkbox-control__checked { 596 fill: #fff; 597 cursor: pointer; 598 position: absolute; 599 right: 0; 600 top: 0; 601 width: 24px; 602 height: 24px; 603 -webkit-user-select: none; 604 user-select: none; 605 pointer-events: none; 606 } 607 @media (min-width: 600px) { 608 svg.components-checkbox-control__checked { 609 right: -2px; 610 top: -2px; 611 } 612 } 613 614 .components-circular-option-picker { 615 display: inline-block; 616 width: 100%; 617 min-width: 188px; 618 } 619 .components-circular-option-picker .components-circular-option-picker__custom-clear-wrapper { 620 display: flex; 621 justify-content: flex-end; 622 } 623 .components-circular-option-picker .components-circular-option-picker__swatches { 624 margin-left: -12px; 625 } 626 627 .components-circular-option-picker__option-wrapper { 628 display: inline-block; 629 height: 28px; 630 width: 28px; 631 margin-left: 12px; 632 margin-bottom: 12px; 633 vertical-align: top; 634 transform: scale(1); 635 transition: 100ms transform ease; 636 } 637 @media (prefers-reduced-motion: reduce) { 638 .components-circular-option-picker__option-wrapper { 639 transition-duration: 0s; 640 transition-delay: 0s; 641 } 642 } 643 .components-circular-option-picker__option-wrapper:hover { 644 transform: scale(1.2); 645 } 646 .components-circular-option-picker__option-wrapper > div { 647 height: 100%; 648 width: 100%; 649 } 650 651 .components-circular-option-picker__option-wrapper::before { 652 content: ""; 653 position: absolute; 654 top: 1px; 655 right: 1px; 656 bottom: 1px; 657 left: 1px; 658 border-radius: 50%; 659 z-index: -1; 660 /* stylelint-disable-next-line function-url-quotes */ 661 background: url('data:image/svg+xml,%3Csvg width="28" height="28" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M6 8V6H4v2h2zM8 8V6h2v2H8zM10 16H8v-2h2v2zM12 16v-2h2v2h-2zM12 18v-2h-2v2H8v2h2v-2h2zM14 18v2h-2v-2h2zM16 18h-2v-2h2v2z" fill="%23555D65"/%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M18 18h2v-2h-2v-2h2v-2h-2v-2h2V8h-2v2h-2V8h-2v2h2v2h-2v2h2v2h2v2zm-2-4v-2h2v2h-2z" fill="%23555D65"/%3E%3Cpath d="M18 18v2h-2v-2h2z" fill="%23555D65"/%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M8 10V8H6v2H4v2h2v2H4v2h2v2H4v2h2v2H4v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h2V4h-2v2h-2V4h-2v2h-2V4h-2v2h-2V4h-2v2h2v2h-2v2H8zm0 2v-2H6v2h2zm2 0v-2h2v2h-2zm0 2v-2H8v2H6v2h2v2H6v2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h-2v2h-2V6h-2v2h-2v2h2v2h-2v2h-2z" fill="%23555D65"/%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M4 0H2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h2V4h-2V2h2V0h-2v2h-2V0h-2v2h-2V0h-2v2h-2V0h-2v2h-2V0h-2v2H8V0H6v2H4V0zm0 4V2H2v2h2zm2 0V2h2v2H6zm0 2V4H4v2H2v2h2v2H2v2h2v2H2v2h2v2H2v2h2v2H2v2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h2V4h-2V2h-2v2h-2V2h-2v2h-2V2h-2v2h-2V2h-2v2H8v2H6z" fill="%23555D65"/%3E%3C/svg%3E'); 662 } 663 664 .components-circular-option-picker__option { 665 display: inline-block; 666 vertical-align: top; 667 height: 100%; 668 width: 100%; 669 border: none; 670 border-radius: 50%; 671 background: transparent; 672 box-shadow: inset 0 0 0 14px; 673 transition: 100ms box-shadow ease; 674 cursor: pointer; 675 } 676 @media (prefers-reduced-motion: reduce) { 677 .components-circular-option-picker__option { 678 transition-duration: 0s; 679 transition-delay: 0s; 680 } 681 } 682 .components-circular-option-picker__option:hover { 683 box-shadow: inset 0 0 0 14px !important; 684 } 685 .components-circular-option-picker__option.is-pressed { 686 box-shadow: inset 0 0 0 4px; 687 position: relative; 688 z-index: 1; 689 overflow: visible; 690 } 691 .components-circular-option-picker__option.is-pressed + svg { 692 position: absolute; 693 right: 2px; 694 top: 2px; 695 border-radius: 50%; 696 z-index: 2; 697 pointer-events: none; 698 } 699 .components-circular-option-picker__option::after { 700 content: ""; 701 position: absolute; 702 top: -1px; 703 right: -1px; 704 bottom: -1px; 705 left: -1px; 706 border-radius: 50%; 707 box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2); 708 border: 1px solid transparent; 709 } 710 .components-circular-option-picker__option:focus::after { 711 content: ""; 712 border: 2px solid #757575; 713 width: 32px; 714 height: 32px; 715 position: absolute; 716 top: -2px; 717 right: -2px; 718 border-radius: 50%; 719 box-shadow: inset 0 0 0 2px #fff; 720 } 721 .components-circular-option-picker__option.components-button:focus { 722 background-color: transparent; 723 box-shadow: inset 0 0 0 14px; 724 outline: none; 725 } 726 727 .components-circular-option-picker__button-action .components-circular-option-picker__option { 728 color: #fff; 729 background: #fff; 730 } 731 732 .components-circular-option-picker__dropdown-link-action { 733 margin-left: 16px; 734 } 735 .components-circular-option-picker__dropdown-link-action .components-button { 736 line-height: 22px; 737 } 738 739 .components-color-edit__color-option-main-area { 740 display: flex; 741 align-items: center; 742 } 743 .components-color-edit__color-option-main-area div.components-circular-option-picker__option-wrapper { 744 display: block; 745 margin: 8px; 746 } 747 748 .components-color-edit__color-option.is-hover { 749 background: #e0e0e0; 750 } 751 752 .components-color-edit__cancel-button { 753 float: left; 754 } 755 756 .components-color-edit__color-option-color-name { 757 width: 100%; 758 } 759 760 .components-color-edit__label-and-insert-container { 761 display: flex; 762 align-items: center; 763 justify-content: space-between; 764 } 765 766 .components-color-edit__insert-button { 767 margin-top: -8px; 768 } 769 770 .components-color-edit__hidden-control { 771 position: relative; 772 right: -9999px; 773 } 774 775 .components-color-edit__color-option-color-name-input .components-base-control__field { 776 margin-bottom: 0; 777 margin-left: 8px; 778 } 779 780 .components-color-edit__slug-input { 781 margin-right: 8px; 782 } 783 784 .components-color-edit__reset-button { 785 float: left; 786 } 787 788 .component-color-indicator { 789 width: 25px; 790 height: 16px; 791 margin-right: 0.8rem; 792 border: 1px solid #dadada; 793 display: inline-block; 794 } 795 .component-color-indicator + .component-color-indicator { 796 margin-right: 0.5rem; 797 } 798 799 /** 800 * Parts of this source were derived and modified from react-color, 801 * released under the MIT license. 802 * 803 * https://github.com/casesandberg/react-color/ 804 * 805 * Copyright (c) 2015 Case Sandberg 806 * 807 * Permission is hereby granted, free of charge, to any person obtaining a copy 808 * of this software and associated documentation files (the "Software"), to deal 809 * in the Software without restriction, including without limitation the rights 810 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 811 * copies of the Software, and to permit persons to whom the Software is 812 * furnished to do so, subject to the following conditions: 813 * 814 * The above copyright notice and this permission notice shall be included in 815 * all copies or substantial portions of the Software. 816 * 817 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 818 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 819 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 820 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 821 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 822 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 823 * THE SOFTWARE. 824 */ 825 .components-color-picker { 826 width: 100%; 827 } 828 .components-color-picker * { 829 box-sizing: border-box; 830 } 831 832 .components-color-picker__saturation { 833 width: 100%; 834 padding-bottom: 55%; 835 position: relative; 836 } 837 838 .components-color-picker__body { 839 padding: 16px 16px 12px; 840 } 841 842 .components-color-picker__controls { 843 display: flex; 844 } 845 846 .components-color-picker__saturation-pointer, 847 .components-color-picker__hue-pointer, 848 .components-color-picker__alpha-pointer { 849 padding: 0; 850 position: absolute; 851 cursor: pointer; 852 box-shadow: none; 853 border: none; 854 } 855 856 /* CURRENT COLOR COMPONENT */ 857 .components-color-picker__swatch { 858 margin-left: 8px; 859 width: 32px; 860 height: 32px; 861 border-radius: 50%; 862 position: relative; 863 overflow: hidden; 864 background-image: linear-gradient(-45deg, #ddd 25%, transparent 25%), linear-gradient(45deg, #ddd 25%, transparent 25%), linear-gradient(-45deg, transparent 75%, #ddd 75%), linear-gradient(45deg, transparent 75%, #ddd 75%); 865 background-size: 10px 10px; 866 background-position: 100% 0, 100% 5px, 5px -5px, -5px 0; 867 } 868 .is-alpha-disabled .components-color-picker__swatch { 869 width: 12px; 870 height: 12px; 871 margin-top: 0; 872 } 873 874 .components-color-picker__active { 875 position: absolute; 876 top: 0; 877 right: 0; 878 left: 0; 879 bottom: 0; 880 border-radius: 50%; 881 box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); 882 z-index: 2; 883 } 884 885 /* SATURATION COMPONENT */ 886 .components-color-picker__saturation-color, 887 .components-color-picker__saturation-white, 888 .components-color-picker__saturation-black { 889 position: absolute; 890 top: 0; 891 right: 0; 892 left: 0; 893 bottom: 0; 894 } 895 896 .components-color-picker__saturation-color { 897 overflow: visible; 898 } 899 900 .components-color-picker__saturation-white { 901 background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0)); 902 } 903 904 .components-color-picker__saturation-black { 905 background: linear-gradient(to top, #000, rgba(0, 0, 0, 0)); 906 } 907 908 .components-button.components-color-picker__saturation-pointer { 909 width: 14px; 910 height: 14px; 911 padding: 0; 912 border-radius: 50%; 913 background-color: transparent; 914 transform: translate(50%, -50%); 915 box-shadow: 0 0 0 1px #fff, inset 0 0 0 1px #000, 0 0 0 2px #000; 916 } 917 .components-button.components-color-picker__saturation-pointer:focus:not(:disabled) { 918 box-shadow: 0 0 0 2px #fff, inset 0 0 0 1px #000, 0 0 0 3px #000; 919 } 920 921 /* HUE & ALPHA BARS */ 922 .components-color-picker__toggles { 923 flex: 1; 924 } 925 926 .components-color-picker__alpha { 927 background-image: linear-gradient(-45deg, #ddd 25%, transparent 25%), linear-gradient(45deg, #ddd 25%, transparent 25%), linear-gradient(-45deg, transparent 75%, #ddd 75%), linear-gradient(45deg, transparent 75%, #ddd 75%); 928 background-size: 10px 10px; 929 background-position: 100% 0, 100% 5px, 5px -5px, -5px 0; 930 } 931 932 .components-color-picker__hue-gradient, 933 .components-color-picker__alpha-gradient { 934 position: absolute; 935 top: 0; 936 right: 0; 937 left: 0; 938 bottom: 0; 939 } 940 941 .components-color-picker__hue, 942 .components-color-picker__alpha { 943 height: 12px; 944 position: relative; 945 } 946 947 .is-alpha-enabled .components-color-picker__hue { 948 margin-bottom: 8px; 949 } 950 951 .components-color-picker__hue-bar, 952 .components-color-picker__alpha-bar { 953 position: relative; 954 margin: 0 3px; 955 height: 100%; 956 padding: 0 2px; 957 } 958 959 .components-color-picker__hue-gradient { 960 background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%); 961 } 962 963 .components-color-picker__hue-pointer, 964 .components-color-picker__alpha-pointer { 965 left: 0; 966 width: 14px; 967 height: 14px; 968 border-radius: 50%; 969 box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37); 970 background: #fff; 971 transform: translate(7px, -1px); 972 } 973 974 .components-color-picker__hue-pointer, 975 .components-color-picker__saturation-pointer { 976 transition: box-shadow 0.1s linear; 977 } 978 @media (prefers-reduced-motion: reduce) { 979 .components-color-picker__hue-pointer, 980 .components-color-picker__saturation-pointer { 981 transition-duration: 0s; 982 transition-delay: 0s; 983 } 984 } 985 986 .components-color-picker__saturation-pointer:focus { 987 box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-admin-theme-color), 0 0 5px 0 var(--wp-admin-theme-color), inset 0 0 1px 1px rgba(0, 0, 0, 0.3), 0 0 1px 2px rgba(0, 0, 0, 0.4); 988 } 989 990 .components-color-picker__hue-pointer:focus, 991 .components-color-picker__alpha-pointer:focus { 992 border-color: var(--wp-admin-theme-color); 993 box-shadow: 0 0 0 2px var(--wp-admin-theme-color), 0 0 3px 0 var(--wp-admin-theme-color); 994 outline: 2px solid transparent; 995 outline-offset: -2px; 996 } 997 998 /* INPUTS COMPONENT */ 999 .components-color-picker__inputs-wrapper { 1000 margin: 0 -4px; 1001 padding-top: 16px; 1002 display: flex; 1003 align-items: flex-end; 1004 min-width: 255px; 1005 } 1006 .components-color-picker__inputs-wrapper fieldset { 1007 flex: 1; 1008 border: none; 1009 margin: 0; 1010 padding: 0; 1011 } 1012 .components-color-picker__inputs-wrapper .components-color-picker__inputs-fields .components-text-control__input[type=number] { 1013 padding: 6px 3px; 1014 margin: 0; 1015 } 1016 1017 .components-color-picker__inputs-field { 1018 width: 100%; 1019 } 1020 1021 .components-color-picker__inputs-fields { 1022 display: flex; 1023 direction: ltr; 1024 flex-grow: 1; 1025 margin-left: 4px; 1026 } 1027 .components-color-picker__inputs-fields .components-base-control + .components-base-control { 1028 margin-top: 0; 1029 } 1030 .components-color-picker__inputs-fields .components-base-control__field { 1031 margin: 0 2px; 1032 } 1033 1034 .components-color-picker__inputs-toggle { 1035 height: 30px; 1036 padding: 0 5px; 1037 } 1038 1039 .components-combobox-control { 1040 width: 100%; 1041 } 1042 1043 input.components-combobox-control__input[type=text] { 1044 width: 100%; 1045 border: none; 1046 box-shadow: none; 1047 font-size: 16px; 1048 padding: 2px; 1049 margin: 0; 1050 line-height: inherit; 1051 min-height: auto; 1052 } 1053 @media (min-width: 600px) { 1054 input.components-combobox-control__input[type=text] { 1055 font-size: 13px; 1056 } 1057 } 1058 input.components-combobox-control__input[type=text]:focus { 1059 outline: none; 1060 box-shadow: none; 1061 } 1062 1063 .components-combobox-control__suggestions-container { 1064 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; 1065 padding: 6px 8px; 1066 box-shadow: 0 0 0 transparent; 1067 transition: box-shadow 0.1s linear; 1068 border-radius: 2px; 1069 border: 1px solid #757575; 1070 /* Fonts smaller than 16px causes mobile safari to zoom. */ 1071 font-size: 16px; 1072 /* Override core line-height. To be reviewed. */ 1073 line-height: normal; 1074 display: flex; 1075 flex-wrap: wrap; 1076 align-items: flex-start; 1077 width: 100%; 1078 margin: 0 0 8px 0; 1079 padding: 4px; 1080 } 1081 @media (prefers-reduced-motion: reduce) { 1082 .components-combobox-control__suggestions-container { 1083 transition-duration: 0s; 1084 transition-delay: 0s; 1085 } 1086 } 1087 @media (min-width: 600px) { 1088 .components-combobox-control__suggestions-container { 1089 font-size: 13px; 1090 /* Override core line-height. To be reviewed. */ 1091 line-height: normal; 1092 } 1093 } 1094 .components-combobox-control__suggestions-container:focus { 1095 border-color: var(--wp-admin-theme-color); 1096 box-shadow: 0 0 0 1px var(--wp-admin-theme-color); 1097 outline: 2px solid transparent; 1098 } 1099 .components-combobox-control__suggestions-container::-webkit-input-placeholder { 1100 color: rgba(30, 30, 30, 0.62); 1101 } 1102 .components-combobox-control__suggestions-container::-moz-placeholder { 1103 opacity: 1; 1104 color: rgba(30, 30, 30, 0.62); 1105 } 1106 .components-combobox-control__suggestions-container:-ms-input-placeholder { 1107 color: rgba(30, 30, 30, 0.62); 1108 } 1109 .components-combobox-control__suggestions-container:focus-within { 1110 border-color: var(--wp-admin-theme-color); 1111 box-shadow: 0 0 0 1px var(--wp-admin-theme-color); 1112 outline: 2px solid transparent; 1113 } 1114 1115 .components-combobox-control__reset.components-button { 1116 display: flex; 1117 height: 24px; 1118 min-width: 24px; 1119 padding: 0; 1120 } 1121 1122 .components-color-list-picker, 1123 .components-color-list-picker__swatch-button { 1124 width: 100%; 1125 } 1126 1127 .components-custom-gradient-picker__gradient-bar:not(.has-gradient) { 1128 opacity: 0.4; 1129 } 1130 1131 .components-custom-gradient-picker__gradient-bar { 1132 margin-top: 12px; 1133 width: 100%; 1134 height: 36px; 1135 border-radius: 36px; 1136 margin-bottom: 12px; 1137 padding-right: 6px; 1138 padding-left: 30px; 1139 } 1140 .components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__markers-container { 1141 position: relative; 1142 } 1143 .components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__insert-point { 1144 border-radius: 50%; 1145 background: #fff; 1146 padding: 2px; 1147 top: 6px; 1148 min-width: 24px; 1149 width: 24px; 1150 height: 24px; 1151 position: relative; 1152 color: #1e1e1e; 1153 } 1154 .components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__insert-point svg { 1155 height: 100%; 1156 width: 100%; 1157 } 1158 .components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__control-point-button { 1159 border: 2px solid transparent; 1160 box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) #fff; 1161 border-radius: 50%; 1162 height: 24px; 1163 width: 24px; 1164 padding: 0; 1165 position: absolute; 1166 top: 6px; 1167 } 1168 .components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__control-point-button:focus, .components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__control-point-button.is-active { 1169 box-shadow: 0 0 0 1px #fff, 0 0 0 3px #1e1e1e; 1170 } 1171 1172 .components-custom-gradient-picker__color-picker-popover .components-custom-gradient-picker__remove-control-point { 1173 margin-right: auto; 1174 margin-left: auto; 1175 display: block; 1176 margin-bottom: 8px; 1177 } 1178 1179 .components-custom-gradient-picker__inserter { 1180 width: 100%; 1181 } 1182 1183 .components-custom-gradient-picker__liner-gradient-indicator { 1184 display: inline-block; 1185 flex: 0 auto; 1186 width: 20px; 1187 height: 20px; 1188 } 1189 1190 .components-custom-gradient-picker .components-custom-gradient-picker__ui-line { 1191 margin-bottom: 16px; 1192 } 1193 .components-custom-gradient-picker .components-custom-gradient-picker__ui-line .components-base-control.components-angle-picker, 1194 .components-custom-gradient-picker .components-custom-gradient-picker__ui-line .components-base-control.components-custom-gradient-picker__type-picker { 1195 margin-bottom: 0; 1196 } 1197 1198 .components-custom-gradient-picker .components-custom-gradient-picker__toolbar { 1199 border: none; 1200 } 1201 .components-custom-gradient-picker .components-custom-gradient-picker__toolbar > div + div { 1202 margin-right: 1px; 1203 } 1204 .components-custom-gradient-picker .components-custom-gradient-picker__toolbar button.is-pressed > svg { 1205 background: #fff; 1206 border: 1px solid #949494; 1207 border-radius: 2px; 1208 } 1209 1210 .components-custom-select-control { 1211 position: relative; 1212 } 1213 1214 .components-custom-select-control__label { 1215 display: block; 1216 margin-bottom: 8px; 1217 } 1218 1219 .components-custom-select-control__button { 1220 border: 1px solid #757575; 1221 border-radius: 2px; 1222 min-height: 30px; 1223 min-width: 130px; 1224 position: relative; 1225 text-align: right; 1226 } 1227 .components-custom-select-control__button.components-custom-select-control__button { 1228 padding-left: 24px; 1229 } 1230 .components-custom-select-control__button:focus:not(:disabled) { 1231 border-color: var(--wp-admin-theme-color); 1232 box-shadow: 0 0 0 1px var(--wp-admin-theme-color); 1233 } 1234 .components-custom-select-control__button .components-custom-select-control__button-icon { 1235 height: 100%; 1236 padding: 0; 1237 position: absolute; 1238 left: 0; 1239 top: 0; 1240 } 1241 1242 .components-custom-select-control__menu { 1243 border: 1px solid #1e1e1e; 1244 background-color: #fff; 1245 border-radius: 2px; 1246 outline: none; 1247 transition: none; 1248 max-height: 400px; 1249 min-width: 100%; 1250 overflow: auto; 1251 padding: 0; 1252 position: absolute; 1253 z-index: 1000000; 1254 } 1255 .components-custom-select-control__menu[aria-hidden=true] { 1256 display: none; 1257 } 1258 1259 .components-custom-select-control__item { 1260 align-items: center; 1261 display: flex; 1262 list-style-type: none; 1263 padding: 8px; 1264 cursor: default; 1265 line-height: 28px; 1266 } 1267 .components-custom-select-control__item.is-highlighted { 1268 background: #ddd; 1269 } 1270 .components-custom-select-control__item .components-custom-select-control__item-icon { 1271 margin-left: 0; 1272 margin-right: auto; 1273 } 1274 .components-custom-select-control__item:last-child { 1275 margin-bottom: 0; 1276 } 1277 1278 /** 1279 * Parts of this source were derived and modified from react-dates, 1280 * released under the MIT license. 1281 * 1282 * https://github.com/airbnb/react-dates 1283 * 1284 * The MIT License (MIT) 1285 * 1286 * Copyright (c) 2016 Airbnb 1287 * 1288 * Permission is hereby granted, free of charge, to any person obtaining a copy 1289 * of this software and associated documentation files (the "Software"), to deal 1290 * in the Software without restriction, including without limitation the rights 1291 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 1292 * copies of the Software, and to permit persons to whom the Software is 1293 * furnished to do so, subject to the following conditions: 1294 * 1295 * The above copyright notice and this permission notice shall be included in all 1296 * copies or substantial portions of the Software. 1297 * 1298 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 1299 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 1300 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 1301 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 1302 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 1303 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 1304 * SOFTWARE. 1305 */ 1306 .PresetDateRangePicker_panel { 1307 padding: 0 22px 11px; 1308 } 1309 1310 .PresetDateRangePicker_button { 1311 position: relative; 1312 height: 100%; 1313 text-align: center; 1314 background: 0 0; 1315 border: 2px solid #00a699; 1316 color: #00a699; 1317 padding: 4px 12px; 1318 margin-right: 8px; 1319 font: inherit; 1320 font-weight: 700; 1321 line-height: normal; 1322 overflow: visible; 1323 box-sizing: border-box; 1324 cursor: pointer; 1325 } 1326 1327 .PresetDateRangePicker_button:active { 1328 outline: 0; 1329 } 1330 1331 .PresetDateRangePicker_button__selected { 1332 color: #fff; 1333 background: #00a699; 1334 } 1335 1336 .SingleDatePickerInput { 1337 display: inline-block; 1338 background-color: #fff; 1339 } 1340 1341 .SingleDatePickerInput__withBorder { 1342 border-radius: 2px; 1343 border: 1px solid #dbdbdb; 1344 } 1345 1346 .SingleDatePickerInput__rtl { 1347 direction: rtl; 1348 } 1349 1350 .SingleDatePickerInput__disabled { 1351 background-color: #f2f2f2; 1352 } 1353 1354 .SingleDatePickerInput__block { 1355 display: block; 1356 } 1357 1358 .SingleDatePickerInput__showClearDate { 1359 padding-right: 30px; 1360 } 1361 1362 .SingleDatePickerInput_clearDate { 1363 background: 0 0; 1364 border: 0; 1365 color: inherit; 1366 font: inherit; 1367 line-height: normal; 1368 overflow: visible; 1369 cursor: pointer; 1370 padding: 10px; 1371 margin: 0 10px 0 5px; 1372 position: absolute; 1373 right: 0; 1374 top: 50%; 1375 transform: translateY(-50%); 1376 } 1377 1378 .SingleDatePickerInput_clearDate__default:focus, 1379 .SingleDatePickerInput_clearDate__default:hover { 1380 background: #dbdbdb; 1381 border-radius: 50%; 1382 } 1383 1384 .SingleDatePickerInput_clearDate__small { 1385 padding: 6px; 1386 } 1387 1388 .SingleDatePickerInput_clearDate__hide { 1389 visibility: hidden; 1390 } 1391 1392 .SingleDatePickerInput_clearDate_svg { 1393 fill: #82888a; 1394 height: 12px; 1395 width: 15px; 1396 vertical-align: middle; 1397 } 1398 1399 .SingleDatePickerInput_clearDate_svg__small { 1400 height: 9px; 1401 } 1402 1403 .SingleDatePickerInput_calendarIcon { 1404 background: 0 0; 1405 border: 0; 1406 color: inherit; 1407 font: inherit; 1408 line-height: normal; 1409 overflow: visible; 1410 cursor: pointer; 1411 display: inline-block; 1412 vertical-align: middle; 1413 padding: 10px; 1414 margin: 0 5px 0 10px; 1415 } 1416 1417 .SingleDatePickerInput_calendarIcon_svg { 1418 fill: #82888a; 1419 height: 15px; 1420 width: 14px; 1421 vertical-align: middle; 1422 } 1423 1424 .SingleDatePicker { 1425 position: relative; 1426 display: inline-block; 1427 } 1428 1429 .SingleDatePicker__block { 1430 display: block; 1431 } 1432 1433 .SingleDatePicker_picker { 1434 z-index: 1; 1435 background-color: #fff; 1436 position: absolute; 1437 } 1438 1439 .SingleDatePicker_picker__rtl { 1440 direction: rtl; 1441 } 1442 1443 .SingleDatePicker_picker__directionLeft { 1444 left: 0; 1445 } 1446 1447 .SingleDatePicker_picker__directionRight { 1448 right: 0; 1449 } 1450 1451 .SingleDatePicker_picker__portal { 1452 background-color: rgba(0, 0, 0, 0.3); 1453 position: fixed; 1454 top: 0; 1455 left: 0; 1456 height: 100%; 1457 width: 100%; 1458 } 1459 1460 .SingleDatePicker_picker__fullScreenPortal { 1461 background-color: #fff; 1462 } 1463 1464 .SingleDatePicker_closeButton { 1465 background: 0 0; 1466 border: 0; 1467 color: inherit; 1468 font: inherit; 1469 line-height: normal; 1470 overflow: visible; 1471 cursor: pointer; 1472 position: absolute; 1473 top: 0; 1474 right: 0; 1475 padding: 15px; 1476 z-index: 2; 1477 } 1478 1479 .SingleDatePicker_closeButton:focus, 1480 .SingleDatePicker_closeButton:hover { 1481 color: #b0b3b4; 1482 text-decoration: none; 1483 } 1484 1485 .SingleDatePicker_closeButton_svg { 1486 height: 15px; 1487 width: 15px; 1488 fill: #cacccd; 1489 } 1490 1491 .DayPickerKeyboardShortcuts_buttonReset { 1492 background: 0 0; 1493 border: 0; 1494 border-radius: 0; 1495 color: inherit; 1496 font: inherit; 1497 line-height: normal; 1498 overflow: visible; 1499 padding: 0; 1500 cursor: pointer; 1501 font-size: 14px; 1502 } 1503 1504 .DayPickerKeyboardShortcuts_buttonReset:active { 1505 outline: 0; 1506 } 1507 1508 .DayPickerKeyboardShortcuts_show { 1509 width: 22px; 1510 position: absolute; 1511 z-index: 2; 1512 } 1513 1514 .DayPickerKeyboardShortcuts_show__bottomRight { 1515 border-top: 26px solid transparent; 1516 border-right: 33px solid #00a699; 1517 bottom: 0; 1518 right: 0; 1519 } 1520 1521 .DayPickerKeyboardShortcuts_show__bottomRight:hover { 1522 border-right: 33px solid #008489; 1523 } 1524 1525 .DayPickerKeyboardShortcuts_show__topRight { 1526 border-bottom: 26px solid transparent; 1527 border-right: 33px solid #00a699; 1528 top: 0; 1529 right: 0; 1530 } 1531 1532 .DayPickerKeyboardShortcuts_show__topRight:hover { 1533 border-right: 33px solid #008489; 1534 } 1535 1536 .DayPickerKeyboardShortcuts_show__topLeft { 1537 border-bottom: 26px solid transparent; 1538 border-left: 33px solid #00a699; 1539 top: 0; 1540 left: 0; 1541 } 1542 1543 .DayPickerKeyboardShortcuts_show__topLeft:hover { 1544 border-left: 33px solid #008489; 1545 } 1546 1547 .DayPickerKeyboardShortcuts_showSpan { 1548 color: #fff; 1549 position: absolute; 1550 } 1551 1552 .DayPickerKeyboardShortcuts_showSpan__bottomRight { 1553 bottom: 0; 1554 right: -28px; 1555 } 1556 1557 .DayPickerKeyboardShortcuts_showSpan__topRight { 1558 top: 1px; 1559 right: -28px; 1560 } 1561 1562 .DayPickerKeyboardShortcuts_showSpan__topLeft { 1563 top: 1px; 1564 left: -28px; 1565 } 1566 1567 .DayPickerKeyboardShortcuts_panel { 1568 overflow: auto; 1569 background: #fff; 1570 border: 1px solid #dbdbdb; 1571 border-radius: 2px; 1572 position: absolute; 1573 top: 0; 1574 bottom: 0; 1575 right: 0; 1576 left: 0; 1577 z-index: 2; 1578 padding: 22px; 1579 margin: 33px; 1580 } 1581 1582 .DayPickerKeyboardShortcuts_title { 1583 font-size: 16px; 1584 font-weight: 700; 1585 margin: 0; 1586 } 1587 1588 .DayPickerKeyboardShortcuts_list { 1589 list-style: none; 1590 padding: 0; 1591 font-size: 14px; 1592 } 1593 1594 .DayPickerKeyboardShortcuts_close { 1595 position: absolute; 1596 right: 22px; 1597 top: 22px; 1598 z-index: 2; 1599 } 1600 1601 .DayPickerKeyboardShortcuts_close:active { 1602 outline: 0; 1603 } 1604 1605 .DayPickerKeyboardShortcuts_closeSvg { 1606 height: 15px; 1607 width: 15px; 1608 fill: #cacccd; 1609 } 1610 1611 .DayPickerKeyboardShortcuts_closeSvg:focus, 1612 .DayPickerKeyboardShortcuts_closeSvg:hover { 1613 fill: #82888a; 1614 } 1615 1616 .CalendarDay { 1617 box-sizing: border-box; 1618 cursor: pointer; 1619 font-size: 14px; 1620 text-align: center; 1621 } 1622 1623 .CalendarDay:active { 1624 outline: 0; 1625 } 1626 1627 .CalendarDay__defaultCursor { 1628 cursor: default; 1629 } 1630 1631 .CalendarDay__default { 1632 border: 1px solid #e4e7e7; 1633 color: #484848; 1634 background: #fff; 1635 } 1636 1637 .CalendarDay__default:hover { 1638 background: #e4e7e7; 1639 border: 1px double #e4e7e7; 1640 color: inherit; 1641 } 1642 1643 .CalendarDay__hovered_offset { 1644 background: #f4f5f5; 1645 border: 1px double #e4e7e7; 1646 color: inherit; 1647 } 1648 1649 .CalendarDay__outside { 1650 border: 0; 1651 background: #fff; 1652 color: #484848; 1653 } 1654 1655 .CalendarDay__outside:hover { 1656 border: 0; 1657 } 1658 1659 .CalendarDay__blocked_minimum_nights { 1660 background: #fff; 1661 border: 1px solid #eceeee; 1662 color: #cacccd; 1663 } 1664 1665 .CalendarDay__blocked_minimum_nights:active, 1666 .CalendarDay__blocked_minimum_nights:hover { 1667 background: #fff; 1668 color: #cacccd; 1669 } 1670 1671 .CalendarDay__highlighted_calendar { 1672 background: #ffe8bc; 1673 color: #484848; 1674 } 1675 1676 .CalendarDay__highlighted_calendar:active, 1677 .CalendarDay__highlighted_calendar:hover { 1678 background: #ffce71; 1679 color: #484848; 1680 } 1681 1682 .CalendarDay__selected_span { 1683 background: #66e2da; 1684 border: 1px solid #33dacd; 1685 color: #fff; 1686 } 1687 1688 .CalendarDay__selected_span:active, 1689 .CalendarDay__selected_span:hover { 1690 background: #33dacd; 1691 border: 1px solid #33dacd; 1692 color: #fff; 1693 } 1694 1695 .CalendarDay__last_in_range { 1696 border-right: #00a699; 1697 } 1698 1699 .CalendarDay__selected, 1700 .CalendarDay__selected:active, 1701 .CalendarDay__selected:hover { 1702 background: #00a699; 1703 border: 1px solid #00a699; 1704 color: #fff; 1705 } 1706 1707 .CalendarDay__hovered_span, 1708 .CalendarDay__hovered_span:hover { 1709 background: #b2f1ec; 1710 border: 1px solid #80e8e0; 1711 color: #007a87; 1712 } 1713 1714 .CalendarDay__hovered_span:active { 1715 background: #80e8e0; 1716 border: 1px solid #80e8e0; 1717 color: #007a87; 1718 } 1719 1720 .CalendarDay__blocked_calendar, 1721 .CalendarDay__blocked_calendar:active, 1722 .CalendarDay__blocked_calendar:hover { 1723 background: #cacccd; 1724 border: 1px solid #cacccd; 1725 color: #82888a; 1726 } 1727 1728 .CalendarDay__blocked_out_of_range, 1729 .CalendarDay__blocked_out_of_range:active, 1730 .CalendarDay__blocked_out_of_range:hover { 1731 background: #fff; 1732 border: 1px solid #e4e7e7; 1733 color: #cacccd; 1734 } 1735 1736 .CalendarMonth { 1737 background: #fff; 1738 text-align: center; 1739 vertical-align: top; 1740 -webkit-user-select: none; 1741 user-select: none; 1742 } 1743 1744 .CalendarMonth_table { 1745 border-collapse: collapse; 1746 border-spacing: 0; 1747 } 1748 1749 .CalendarMonth_verticalSpacing { 1750 border-collapse: separate; 1751 } 1752 1753 .CalendarMonth_caption { 1754 color: #484848; 1755 font-size: 18px; 1756 text-align: center; 1757 padding-top: 22px; 1758 padding-bottom: 37px; 1759 caption-side: initial; 1760 } 1761 1762 .CalendarMonth_caption__verticalScrollable { 1763 padding-top: 12px; 1764 padding-bottom: 7px; 1765 } 1766 1767 .CalendarMonthGrid { 1768 background: #fff; 1769 text-align: left; 1770 z-index: 0; 1771 } 1772 1773 .CalendarMonthGrid__animating { 1774 z-index: 1; 1775 } 1776 1777 .CalendarMonthGrid__horizontal { 1778 position: absolute; 1779 left: 0; 1780 } 1781 1782 .CalendarMonthGrid__vertical { 1783 margin: 0 auto; 1784 } 1785 1786 .CalendarMonthGrid__vertical_scrollable { 1787 margin: 0 auto; 1788 overflow-y: scroll; 1789 } 1790 1791 .CalendarMonthGrid_month__horizontal { 1792 display: inline-block; 1793 vertical-align: top; 1794 min-height: 100%; 1795 } 1796 1797 .CalendarMonthGrid_month__hideForAnimation { 1798 position: absolute; 1799 z-index: -1; 1800 opacity: 0; 1801 pointer-events: none; 1802 } 1803 1804 .CalendarMonthGrid_month__hidden { 1805 visibility: hidden; 1806 } 1807 1808 .DayPickerNavigation { 1809 position: relative; 1810 z-index: 2; 1811 } 1812 1813 .DayPickerNavigation__horizontal { 1814 height: 0; 1815 } 1816 1817 .DayPickerNavigation__verticalDefault { 1818 position: absolute; 1819 width: 100%; 1820 height: 52px; 1821 bottom: 0; 1822 left: 0; 1823 } 1824 1825 .DayPickerNavigation__verticalScrollableDefault { 1826 position: relative; 1827 } 1828 1829 .DayPickerNavigation_button { 1830 cursor: pointer; 1831 -webkit-user-select: none; 1832 user-select: none; 1833 border: 0; 1834 padding: 0; 1835 margin: 0; 1836 } 1837 1838 .DayPickerNavigation_button__default { 1839 border: 1px solid #e4e7e7; 1840 background-color: #fff; 1841 color: #757575; 1842 } 1843 1844 .DayPickerNavigation_button__default:focus, 1845 .DayPickerNavigation_button__default:hover { 1846 border: 1px solid #c4c4c4; 1847 } 1848 1849 .DayPickerNavigation_button__default:active { 1850 background: #f2f2f2; 1851 } 1852 1853 .DayPickerNavigation_button__horizontalDefault { 1854 position: absolute; 1855 top: 18px; 1856 line-height: 0.78; 1857 border-radius: 3px; 1858 padding: 6px 9px; 1859 } 1860 1861 .DayPickerNavigation_leftButton__horizontalDefault { 1862 left: 22px; 1863 } 1864 1865 .DayPickerNavigation_rightButton__horizontalDefault { 1866 right: 22px; 1867 } 1868 1869 .DayPickerNavigation_button__verticalDefault { 1870 padding: 5px; 1871 background: #fff; 1872 box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.1); 1873 position: relative; 1874 display: inline-block; 1875 height: 100%; 1876 width: 50%; 1877 } 1878 1879 .DayPickerNavigation_nextButton__verticalDefault { 1880 border-left: 0; 1881 } 1882 1883 .DayPickerNavigation_nextButton__verticalScrollableDefault { 1884 width: 100%; 1885 } 1886 1887 .DayPickerNavigation_svg__horizontal { 1888 height: 19px; 1889 width: 19px; 1890 fill: #82888a; 1891 display: block; 1892 } 1893 1894 .DayPickerNavigation_svg__vertical { 1895 height: 42px; 1896 width: 42px; 1897 fill: #484848; 1898 display: block; 1899 } 1900 1901 .DayPicker { 1902 background: #fff; 1903 position: relative; 1904 text-align: left; 1905 } 1906 1907 .DayPicker__horizontal { 1908 background: #fff; 1909 } 1910 1911 .DayPicker__verticalScrollable { 1912 height: 100%; 1913 } 1914 1915 .DayPicker__hidden { 1916 visibility: hidden; 1917 } 1918 1919 .DayPicker__withBorder { 1920 box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.07); 1921 border-radius: 3px; 1922 } 1923 1924 .DayPicker_portal__horizontal { 1925 box-shadow: none; 1926 position: absolute; 1927 left: 50%; 1928 top: 50%; 1929 } 1930 1931 .DayPicker_portal__vertical { 1932 position: initial; 1933 } 1934 1935 .DayPicker_focusRegion { 1936 outline: 0; 1937 } 1938 1939 .DayPicker_calendarInfo__horizontal, 1940 .DayPicker_wrapper__horizontal { 1941 display: inline-block; 1942 vertical-align: top; 1943 } 1944 1945 .DayPicker_weekHeaders { 1946 position: relative; 1947 } 1948 1949 .DayPicker_weekHeaders__horizontal { 1950 margin-left: 13px; 1951 } 1952 1953 .DayPicker_weekHeader { 1954 color: #757575; 1955 position: absolute; 1956 top: 62px; 1957 z-index: 2; 1958 text-align: left; 1959 padding: 0 !important; 1960 } 1961 1962 .DayPicker_weekHeader__vertical { 1963 left: 50%; 1964 } 1965 1966 .DayPicker_weekHeader__verticalScrollable { 1967 top: 0; 1968 display: table-row; 1969 border-bottom: 1px solid #dbdbdb; 1970 background: #fff; 1971 margin-left: 0; 1972 left: 0; 1973 width: 100%; 1974 text-align: center; 1975 } 1976 1977 .DayPicker_weekHeader_ul { 1978 list-style: none; 1979 margin: 1px 0; 1980 padding-left: 0; 1981 padding-right: 0; 1982 font-size: 14px; 1983 } 1984 1985 .DayPicker_weekHeader_li { 1986 display: inline-block; 1987 text-align: center; 1988 margin: 0 1px; 1989 } 1990 1991 .DayPicker_transitionContainer { 1992 position: relative; 1993 overflow: hidden; 1994 border-radius: 3px; 1995 } 1996 1997 .DayPicker_transitionContainer__horizontal { 1998 transition: height 0.2s ease-in-out; 1999 } 2000 2001 .DayPicker_transitionContainer__vertical { 2002 width: 100%; 2003 } 2004 2005 .DayPicker_transitionContainer__verticalScrollable { 2006 padding-top: 20px; 2007 height: 100%; 2008 position: absolute; 2009 top: 0; 2010 bottom: 0; 2011 right: 0; 2012 left: 0; 2013 overflow-y: scroll; 2014 } 2015 2016 .DateInput { 2017 margin: 0; 2018 padding: 0; 2019 background: #fff; 2020 position: relative; 2021 display: inline-block; 2022 width: 130px; 2023 vertical-align: middle; 2024 } 2025 2026 .DateInput__small { 2027 width: 97px; 2028 } 2029 2030 .DateInput__block { 2031 width: 100%; 2032 } 2033 2034 .DateInput__disabled { 2035 background: #f2f2f2; 2036 color: #dbdbdb; 2037 } 2038 2039 .DateInput_input { 2040 font-weight: 200; 2041 font-size: 19px; 2042 line-height: 24px; 2043 color: #484848; 2044 background-color: #fff; 2045 width: 100%; 2046 padding: 11px 11px 9px; 2047 border: 0; 2048 border-top: 0; 2049 border-right: 0; 2050 border-bottom: 2px solid transparent; 2051 border-left: 0; 2052 border-radius: 0; 2053 } 2054 2055 .DateInput_input__small { 2056 font-size: 15px; 2057 line-height: 18px; 2058 letter-spacing: 0.2px; 2059 padding: 7px 7px 5px; 2060 } 2061 2062 .DateInput_input__regular { 2063 font-weight: auto; 2064 } 2065 2066 .DateInput_input__readOnly { 2067 -webkit-user-select: none; 2068 user-select: none; 2069 } 2070 2071 .DateInput_input__focused { 2072 outline: 0; 2073 background: #fff; 2074 border: 0; 2075 border-top: 0; 2076 border-right: 0; 2077 border-bottom: 2px solid #008489; 2078 border-left: 0; 2079 } 2080 2081 .DateInput_input__disabled { 2082 background: #f2f2f2; 2083 font-style: italic; 2084 } 2085 2086 .DateInput_screenReaderMessage { 2087 border: 0; 2088 clip: rect(0, 0, 0, 0); 2089 height: 1px; 2090 margin: -1px; 2091 overflow: hidden; 2092 padding: 0; 2093 position: absolute; 2094 width: 1px; 2095 } 2096 2097 .DateInput_fang { 2098 position: absolute; 2099 width: 20px; 2100 height: 10px; 2101 left: 22px; 2102 z-index: 2; 2103 } 2104 2105 .DateInput_fangShape { 2106 fill: #fff; 2107 } 2108 2109 .DateInput_fangStroke { 2110 stroke: #dbdbdb; 2111 fill: transparent; 2112 } 2113 2114 .DateRangePickerInput { 2115 background-color: #fff; 2116 display: inline-block; 2117 } 2118 2119 .DateRangePickerInput__disabled { 2120 background: #f2f2f2; 2121 } 2122 2123 .DateRangePickerInput__withBorder { 2124 border-radius: 2px; 2125 border: 1px solid #dbdbdb; 2126 } 2127 2128 .DateRangePickerInput__rtl { 2129 direction: rtl; 2130 } 2131 2132 .DateRangePickerInput__block { 2133 display: block; 2134 } 2135 2136 .DateRangePickerInput__showClearDates { 2137 padding-right: 30px; 2138 } 2139 2140 .DateRangePickerInput_arrow { 2141 display: inline-block; 2142 vertical-align: middle; 2143 color: #484848; 2144 } 2145 2146 .DateRangePickerInput_arrow_svg { 2147 vertical-align: middle; 2148 fill: #484848; 2149 height: 24px; 2150 width: 24px; 2151 } 2152 2153 .DateRangePickerInput_clearDates { 2154 background: 0 0; 2155 border: 0; 2156 color: inherit; 2157 font: inherit; 2158 line-height: normal; 2159 overflow: visible; 2160 cursor: pointer; 2161 padding: 10px; 2162 margin: 0 10px 0 5px; 2163 position: absolute; 2164 right: 0; 2165 top: 50%; 2166 transform: translateY(-50%); 2167 } 2168 2169 .DateRangePickerInput_clearDates__small { 2170 padding: 6px; 2171 } 2172 2173 .DateRangePickerInput_clearDates_default:focus, 2174 .DateRangePickerInput_clearDates_default:hover { 2175 background: #dbdbdb; 2176 border-radius: 50%; 2177 } 2178 2179 .DateRangePickerInput_clearDates__hide { 2180 visibility: hidden; 2181 } 2182 2183 .DateRangePickerInput_clearDates_svg { 2184 fill: #82888a; 2185 height: 12px; 2186 width: 15px; 2187 vertical-align: middle; 2188 } 2189 2190 .DateRangePickerInput_clearDates_svg__small { 2191 height: 9px; 2192 } 2193 2194 .DateRangePickerInput_calendarIcon { 2195 background: 0 0; 2196 border: 0; 2197 color: inherit; 2198 font: inherit; 2199 line-height: normal; 2200 overflow: visible; 2201 cursor: pointer; 2202 display: inline-block; 2203 vertical-align: middle; 2204 padding: 10px; 2205 margin: 0 5px 0 10px; 2206 } 2207 2208 .DateRangePickerInput_calendarIcon_svg { 2209 fill: #82888a; 2210 height: 15px; 2211 width: 14px; 2212 vertical-align: middle; 2213 } 2214 2215 .DateRangePicker { 2216 position: relative; 2217 display: inline-block; 2218 } 2219 2220 .DateRangePicker__block { 2221 display: block; 2222 } 2223 2224 .DateRangePicker_picker { 2225 z-index: 1; 2226 background-color: #fff; 2227 position: absolute; 2228 } 2229 2230 .DateRangePicker_picker__rtl { 2231 direction: rtl; 2232 } 2233 2234 .DateRangePicker_picker__directionLeft { 2235 left: 0; 2236 } 2237 2238 .DateRangePicker_picker__directionRight { 2239 right: 0; 2240 } 2241 2242 .DateRangePicker_picker__portal { 2243 background-color: rgba(0, 0, 0, 0.3); 2244 position: fixed; 2245 top: 0; 2246 left: 0; 2247 height: 100%; 2248 width: 100%; 2249 } 2250 2251 .DateRangePicker_picker__fullScreenPortal { 2252 background-color: #fff; 2253 } 2254 2255 .DateRangePicker_closeButton { 2256 background: 0 0; 2257 border: 0; 2258 color: inherit; 2259 font: inherit; 2260 line-height: normal; 2261 overflow: visible; 2262 cursor: pointer; 2263 position: absolute; 2264 top: 0; 2265 right: 0; 2266 padding: 15px; 2267 z-index: 2; 2268 } 2269 2270 .DateRangePicker_closeButton:focus, 2271 .DateRangePicker_closeButton:hover { 2272 color: #b0b3b4; 2273 text-decoration: none; 2274 } 2275 2276 .DateRangePicker_closeButton_svg { 2277 height: 15px; 2278 width: 15px; 2279 fill: #cacccd; 2280 } 2281 .components-datetime { 2282 padding: 16px; 2283 } 2284 .components-panel__body .components-datetime { 2285 padding: 0; 2286 } 2287 .components-datetime .components-datetime__calendar-help { 2288 padding: 16px; 2289 } 2290 .components-datetime .components-datetime__calendar-help h4 { 2291 margin: 0; 2292 } 2293 .components-datetime .components-datetime__buttons { 2294 display: flex; 2295 justify-content: space-between; 2296 } 2297 .components-datetime .components-datetime__date-help-toggle { 2298 display: block; 2299 margin-right: auto; 2300 } 2301 .components-datetime fieldset { 2302 border: 0; 2303 padding: 0; 2304 margin: 0; 2305 } 2306 .components-datetime select, 2307 .components-datetime input { 2308 box-shadow: 0 0 0 transparent; 2309 transition: box-shadow 0.1s linear; 2310 border-radius: 2px; 2311 border: 1px solid #757575; 2312 } 2313 @media (prefers-reduced-motion: reduce) { 2314 .components-datetime select, 2315 .components-datetime input { 2316 transition-duration: 0s; 2317 transition-delay: 0s; 2318 } 2319 } 2320 .components-datetime select, 2321 .components-datetime input[type=number], 2322 .components-datetime .components-button { 2323 height: 30px; 2324 margin-top: 0; 2325 margin-bottom: 0; 2326 } 2327 2328 .components-datetime__date { 2329 min-height: 236px; 2330 border-top: 1px solid #ddd; 2331 } 2332 .components-datetime__date .DayPickerNavigation_leftButton__horizontalDefault { 2333 left: 13px; 2334 } 2335 .components-datetime__date .CalendarMonth_caption { 2336 font-size: 13px; 2337 } 2338 .components-datetime__date .CalendarMonth_table { 2339 border-collapse: separate; 2340 border-spacing: 2px; 2341 } 2342 .components-datetime__date .CalendarDay { 2343 font-size: 13px; 2344 border: none; 2345 border-radius: 50%; 2346 text-align: center; 2347 } 2348 .components-datetime__date .CalendarDay:focus { 2349 box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 3px #fff; 2350 outline: 2px solid transparent; 2351 } 2352 .components-datetime__date .CalendarDay__selected { 2353 background: var(--wp-admin-theme-color); 2354 border: 2px solid transparent; 2355 } 2356 .components-datetime__date .CalendarDay__selected:hover { 2357 background: var(--wp-admin-theme-color-darker-20); 2358 } 2359 .components-datetime__date .CalendarDay__selected:focus { 2360 box-shadow: inset 0 0 0 1px #fff; 2361 } 2362 .components-datetime__date .DayPickerNavigation_button__horizontalDefault { 2363 padding: 2px 8px; 2364 top: 20px; 2365 } 2366 .components-datetime__date .DayPickerNavigation_button__horizontalDefault:focus { 2367 border-color: var(--wp-admin-theme-color); 2368 box-shadow: 0 0 0 1px var(--wp-admin-theme-color); 2369 outline: 2px solid transparent; 2370 } 2371 .components-datetime__date .DayPicker_weekHeader { 2372 top: 50px; 2373 } 2374 .components-datetime__date .DayPicker_weekHeader .DayPicker_weekHeader_ul { 2375 margin: 1px; 2376 padding-right: 0; 2377 padding-left: 0; 2378 } 2379 .components-datetime__date.is-description-visible .DayPicker { 2380 visibility: hidden; 2381 } 2382 2383 .components-datetime__date .CalendarDay .components-datetime__date__day { 2384 height: 100%; 2385 display: flex; 2386 justify-content: center; 2387 align-content: center; 2388 flex-direction: column; 2389 position: relative; 2390 } 2391 .components-datetime__date .CalendarDay .components-datetime__date__day.has-events::before { 2392 content: " "; 2393 width: 4px; 2394 height: 4px; 2395 border-radius: 2px; 2396 position: absolute; 2397 right: 50%; 2398 margin-right: -2px; 2399 bottom: 0; 2400 background-color: #fff; 2401 } 2402 2403 .components-datetime__date .CalendarDay:not(.CalendarDay__selected) .components-datetime__date__day.has-events::before { 2404 background: var(--wp-admin-theme-color); 2405 } 2406 2407 .components-datetime__time { 2408 padding-bottom: 16px; 2409 } 2410 .components-datetime__time fieldset { 2411 position: relative; 2412 margin-bottom: 0.5em; 2413 } 2414 .components-datetime__time fieldset + fieldset { 2415 margin-bottom: 0; 2416 } 2417 .components-datetime__time .components-datetime__time-field-am-pm fieldset { 2418 margin-top: 0; 2419 } 2420 .components-datetime__time .components-datetime__time-wrapper { 2421 display: flex; 2422 } 2423 .components-datetime__time .components-datetime__time-wrapper .components-datetime__time-separator { 2424 display: inline-block; 2425 padding: 0 0 0 3px; 2426 } 2427 .components-datetime__time .components-datetime__time-wrapper .components-datetime__time-field-time { 2428 direction: ltr; 2429 } 2430 .components-datetime__time .components-datetime__time-wrapper .components-datetime__time-field select { 2431 margin-left: 4px; 2432 } 2433 .components-datetime__time .components-datetime__time-wrapper .components-datetime__time-field select:focus { 2434 position: relative; 2435 z-index: 1; 2436 } 2437 .components-datetime__time .components-datetime__time-wrapper .components-datetime__time-field input[type=number] { 2438 padding: 2px; 2439 margin-left: 4px; 2440 text-align: center; 2441 -moz-appearance: textfield; 2442 } 2443 .components-datetime__time .components-datetime__time-wrapper .components-datetime__time-field input[type=number]:focus { 2444 position: relative; 2445 z-index: 1; 2446 } 2447 .components-datetime__time .components-datetime__time-wrapper .components-datetime__time-field input[type=number]::-webkit-inner-spin-button { 2448 -webkit-appearance: none; 2449 margin: 0; 2450 } 2451 .components-datetime__time.is-12-hour .components-datetime__time-field-day input { 2452 margin: -4px 0 0 !important; 2453 border-radius: 0 2px 2px 0 !important; 2454 } 2455 .components-datetime__time.is-12-hour .components-datetime__time-field-year input { 2456 border-radius: 2px 0 0 2px !important; 2457 } 2458 2459 .components-datetime__timezone { 2460 line-height: 30px; 2461 margin-right: 4px; 2462 -webkit-text-decoration: underline dotted; 2463 text-decoration: underline dotted; 2464 } 2465 2466 .components-datetime__time-legend { 2467 font-weight: 600; 2468 margin-top: 0.5em; 2469 } 2470 .components-datetime__time-legend.invisible { 2471 position: absolute; 2472 top: -999em; 2473 right: -999em; 2474 } 2475 2476 .components-datetime__time-field-hours-input, 2477 .components-datetime__time-field-minutes-input, 2478 .components-datetime__time-field-day-input { 2479 width: 35px; 2480 } 2481 2482 .components-datetime__time-field-year-input { 2483 width: 55px; 2484 } 2485 2486 .components-datetime__time-field-month-select { 2487 max-width: 145px; 2488 } 2489 2490 .components-popover .components-datetime__date { 2491 padding-right: 4px; 2492 } 2493 2494 .block-editor-dimension-control .components-base-control__field { 2495 display: flex; 2496 align-items: center; 2497 } 2498 .block-editor-dimension-control .components-base-control__label { 2499 display: flex; 2500 align-items: center; 2501 margin-left: 1em; 2502 margin-bottom: 0; 2503 } 2504 .block-editor-dimension-control .components-base-control__label .dashicon { 2505 margin-left: 0.5em; 2506 } 2507 .block-editor-dimension-control.is-manual .components-base-control__label { 2508 width: 10em; 2509 } 2510 2511 body.is-dragging-components-draggable { 2512 cursor: move; 2513 /* Fallback for IE/Edge < 14 */ 2514 cursor: grabbing !important; 2515 } 2516 2517 .components-draggable__invisible-drag-image { 2518 position: fixed; 2519 right: -1000px; 2520 height: 50px; 2521 width: 50px; 2522 } 2523 2524 .components-draggable__clone { 2525 position: fixed; 2526 padding: 0; 2527 background: transparent; 2528 pointer-events: none; 2529 z-index: 1000000000; 2530 } 2531 2532 .components-drop-zone { 2533 position: absolute; 2534 top: 0; 2535 left: 0; 2536 bottom: 0; 2537 right: 0; 2538 z-index: 40; 2539 visibility: hidden; 2540 opacity: 0; 2541 transition: 0.3s opacity, 0.3s background-color, 0s visibility 0.3s; 2542 border: 2px solid var(--wp-admin-theme-color); 2543 border-radius: 2px; 2544 } 2545 @media (prefers-reduced-motion: reduce) { 2546 .components-drop-zone { 2547 transition-duration: 0s; 2548 transition-delay: 0s; 2549 } 2550 } 2551 .components-drop-zone.is-active { 2552 opacity: 1; 2553 visibility: visible; 2554 transition: 0.3s opacity, 0.3s background-color; 2555 } 2556 @media (prefers-reduced-motion: reduce) { 2557 .components-drop-zone.is-active { 2558 transition-duration: 0s; 2559 transition-delay: 0s; 2560 } 2561 } 2562 .components-drop-zone.is-dragging-over-element { 2563 background-color: var(--wp-admin-theme-color); 2564 } 2565 2566 .components-drop-zone__content { 2567 position: absolute; 2568 top: 50%; 2569 right: 0; 2570 left: 0; 2571 z-index: 50; 2572 transform: translateY(-50%); 2573 width: 100%; 2574 text-align: center; 2575 color: #fff; 2576 transition: transform 0.2s ease-in-out; 2577 } 2578 @media (prefers-reduced-motion: reduce) { 2579 .components-drop-zone__content { 2580 transition-duration: 0s; 2581 transition-delay: 0s; 2582 } 2583 } 2584 2585 .components-drop-zone.is-dragging-over-element .components-drop-zone__content { 2586 transform: translateY(-50%) scale(1.05); 2587 } 2588 2589 .components-drop-zone__content-icon, 2590 .components-drop-zone__content-text { 2591 display: block; 2592 } 2593 2594 .components-drop-zone__content-icon { 2595 margin: 0 auto; 2596 line-height: 0; 2597 fill: currentColor; 2598 } 2599 2600 .components-drop-zone__content-text { 2601 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; 2602 } 2603 2604 .components-dropdown { 2605 display: inline-block; 2606 } 2607 2608 .components-dropdown__content .components-popover__content > div { 2609 padding: 12px; 2610 } 2611 2612 .components-dropdown-menu__popover .components-popover__content { 2613 min-width: 200px; 2614 } 2615 2616 .components-dropdown-menu__menu { 2617 width: 100%; 2618 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; 2619 font-size: 13px; 2620 line-height: 1.4; 2621 } 2622 .components-dropdown-menu__menu .components-dropdown-menu__menu-item, 2623 .components-dropdown-menu__menu .components-menu-item { 2624 width: 100%; 2625 padding: 6px; 2626 outline: none; 2627 cursor: pointer; 2628 white-space: nowrap; 2629 } 2630 .components-dropdown-menu__menu .components-dropdown-menu__menu-item.has-separator, 2631 .components-dropdown-menu__menu .components-menu-item.has-separator { 2632 margin-top: 6px; 2633 position: relative; 2634 overflow: visible; 2635 } 2636 .components-dropdown-menu__menu .components-dropdown-menu__menu-item.has-separator::before, 2637 .components-dropdown-menu__menu .components-menu-item.has-separator::before { 2638 display: block; 2639 content: ""; 2640 box-sizing: content-box; 2641 background-color: #ddd; 2642 position: absolute; 2643 top: -3px; 2644 right: 0; 2645 left: 0; 2646 height: 1px; 2647 } 2648 .components-dropdown-menu__menu .components-dropdown-menu__menu-item.is-active svg, 2649 .components-dropdown-menu__menu .components-menu-item.is-active svg { 2650 color: #fff; 2651 background: #1e1e1e; 2652 box-shadow: 0 0 0 1px #1e1e1e; 2653 border-radius: 1px; 2654 } 2655 .components-dropdown-menu__menu .components-dropdown-menu__menu-item > svg, 2656 .components-dropdown-menu__menu .components-menu-item > svg { 2657 border-radius: 2px; 2658 width: 24px; 2659 height: 24px; 2660 } 2661 .components-dropdown-menu__menu .components-menu-item__button, 2662 .components-dropdown-menu__menu .components-menu-item__button.components-button { 2663 min-height: 36px; 2664 height: auto; 2665 text-align: right; 2666 padding-right: 8px; 2667 padding-left: 8px; 2668 } 2669 .components-dropdown-menu__menu .components-menu-group { 2670 padding: 12px; 2671 margin-top: 0; 2672 margin-bottom: 0; 2673 margin-right: -12px; 2674 margin-left: -12px; 2675 } 2676 .components-dropdown-menu__menu .components-menu-group:first-child { 2677 margin-top: -12px; 2678 } 2679 .components-dropdown-menu__menu .components-menu-group:last-child { 2680 margin-bottom: -12px; 2681 } 2682 .components-dropdown-menu__menu .components-menu-group + .components-menu-group { 2683 margin-top: 0; 2684 border-top: 1px solid #ccc; 2685 padding: 12px; 2686 } 2687 .is-alternate .components-dropdown-menu__menu .components-menu-group + .components-menu-group { 2688 border-color: #1e1e1e; 2689 } 2690 2691 .components-font-size-picker__controls { 2692 max-width: 248px; 2693 display: flex; 2694 flex-wrap: wrap; 2695 align-items: center; 2696 margin-bottom: 24px; 2697 } 2698 .components-font-size-picker__controls .components-unit-control-wrapper { 2699 margin-left: 8px; 2700 } 2701 .components-font-size-picker__controls .components-unit-control-wrapper .components-input-control__label { 2702 font-weight: 300; 2703 padding-bottom: 0 !important; 2704 margin-bottom: 8px !important; 2705 } 2706 .components-font-size-picker__controls .components-custom-select-control__button { 2707 min-width: 120px; 2708 } 2709 .components-font-size-picker__controls .components-font-size-picker__number { 2710 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; 2711 padding: 6px 8px; 2712 box-shadow: 0 0 0 transparent; 2713 transition: box-shadow 0.1s linear; 2714 border-radius: 2px; 2715 border: 1px solid #757575; 2716 /* Fonts smaller than 16px causes mobile safari to zoom. */ 2717 font-size: 16px; 2718 /* Override core line-height. To be reviewed. */ 2719 line-height: normal; 2720 display: inline-block; 2721 font-weight: 500; 2722 height: 30px; 2723 margin-bottom: 0; 2724 margin-right: 0; 2725 margin-left: 8px; 2726 margin-top: 8px; 2727 width: 54px; 2728 } 2729 @media (prefers-reduced-motion: reduce) { 2730 .components-font-size-picker__controls .components-font-size-picker__number { 2731 transition-duration: 0s; 2732 transition-delay: 0s; 2733 } 2734 } 2735 @media (min-width: 600px) { 2736 .components-font-size-picker__controls .components-font-size-picker__number { 2737 font-size: 13px; 2738 /* Override core line-height. To be reviewed. */ 2739 line-height: normal; 2740 } 2741 } 2742 .components-font-size-picker__controls .components-font-size-picker__number:focus { 2743 border-color: var(--wp-admin-theme-color); 2744 box-shadow: 0 0 0 1px var(--wp-admin-theme-color); 2745 outline: 2px solid transparent; 2746 } 2747 .components-font-size-picker__controls .components-font-size-picker__number::-webkit-input-placeholder { 2748 color: rgba(30, 30, 30, 0.62); 2749 } 2750 .components-font-size-picker__controls .components-font-size-picker__number::-moz-placeholder { 2751 opacity: 1; 2752 color: rgba(30, 30, 30, 0.62); 2753 } 2754 .components-font-size-picker__controls .components-font-size-picker__number:-ms-input-placeholder { 2755 color: rgba(30, 30, 30, 0.62); 2756 } 2757 .components-font-size-picker__controls .components-font-size-picker__number[value=""] + .components-button { 2758 cursor: default; 2759 opacity: 0.3; 2760 pointer-events: none; 2761 } 2762 .components-font-size-picker__controls .components-font-size-picker__number-container { 2763 display: flex; 2764 flex-direction: column; 2765 } 2766 .components-font-size-picker__controls .components-font-size-picker__select { 2767 margin-left: 8px; 2768 } 2769 .components-font-size-picker__controls .components-color-palette__clear { 2770 height: 30px; 2771 margin-top: 26px; 2772 } 2773 2774 .components-font-size-picker__custom-input .components-range-control__slider + .dashicon { 2775 width: 30px; 2776 height: 30px; 2777 } 2778 2779 .components-font-size-picker { 2780 border: 0; 2781 padding: 0; 2782 margin: 0; 2783 } 2784 2785 .components-form-toggle { 2786 position: relative; 2787 display: inline-block; 2788 } 2789 .components-form-toggle .components-form-toggle__track { 2790 content: ""; 2791 display: inline-block; 2792 box-sizing: border-box; 2793 vertical-align: top; 2794 background-color: #fff; 2795 border: 1px solid #1e1e1e; 2796 width: 36px; 2797 height: 18px; 2798 border-radius: 9px; 2799 transition: 0.2s background ease; 2800 } 2801 @media (prefers-reduced-motion: reduce) { 2802 .components-form-toggle .components-form-toggle__track { 2803 transition-duration: 0s; 2804 transition-delay: 0s; 2805 } 2806 } 2807 .components-form-toggle .components-form-toggle__thumb { 2808 display: block; 2809 position: absolute; 2810 box-sizing: border-box; 2811 top: 3px; 2812 right: 3px; 2813 width: 12px; 2814 height: 12px; 2815 border-radius: 50%; 2816 transition: 0.1s transform ease; 2817 background-color: #1e1e1e; 2818 border: 5px solid #1e1e1e; 2819 } 2820 @media (prefers-reduced-motion: reduce) { 2821 .components-form-toggle .components-form-toggle__thumb { 2822 transition-duration: 0s; 2823 transition-delay: 0s; 2824 } 2825 } 2826 .components-form-toggle.is-checked .components-form-toggle__track { 2827 background-color: var(--wp-admin-theme-color); 2828 border: 1px solid var(--wp-admin-theme-color); 2829 border: 9px solid transparent; 2830 } 2831 .components-form-toggle .components-form-toggle__input:focus + .components-form-toggle__track { 2832 box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-admin-theme-color); 2833 outline: 2px solid transparent; 2834 outline-offset: 2px; 2835 } 2836 .components-form-toggle.is-checked .components-form-toggle__thumb { 2837 background-color: #fff; 2838 border-width: 0; 2839 transform: translateX(-18px); 2840 } 2841 .components-form-toggle.is-disabled, .components-disabled .components-form-toggle { 2842 opacity: 0.3; 2843 } 2844 2845 .components-form-toggle input.components-form-toggle__input[type=checkbox] { 2846 position: absolute; 2847 top: 0; 2848 right: 0; 2849 width: 100%; 2850 height: 100%; 2851 opacity: 0; 2852 margin: 0; 2853 padding: 0; 2854 z-index: 1; 2855 border: none; 2856 } 2857 .components-form-toggle input.components-form-toggle__input[type=checkbox]:checked { 2858 background: none; 2859 } 2860 .components-form-toggle input.components-form-toggle__input[type=checkbox]::before { 2861 content: ""; 2862 } 2863 2864 .components-form-token-field__input-container { 2865 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; 2866 padding: 6px 8px; 2867 box-shadow: 0 0 0 transparent; 2868 transition: box-shadow 0.1s linear; 2869 border-radius: 2px; 2870 border: 1px solid #757575; 2871 /* Fonts smaller than 16px causes mobile safari to zoom. */ 2872 font-size: 16px; 2873 /* Override core line-height. To be reviewed. */ 2874 line-height: normal; 2875 display: flex; 2876 flex-wrap: wrap; 2877 align-items: center; 2878 width: 100%; 2879 margin: 0 0 8px 0; 2880 padding: 2px 4px; 2881 cursor: text; 2882 } 2883 @media (prefers-reduced-motion: reduce) { 2884 .components-form-token-field__input-container { 2885 transition-duration: 0s; 2886 transition-delay: 0s; 2887 } 2888 } 2889 @media (min-width: 600px) { 2890 .components-form-token-field__input-container { 2891 font-size: 13px; 2892 /* Override core line-height. To be reviewed. */ 2893 line-height: normal; 2894 } 2895 } 2896 .components-form-token-field__input-container:focus { 2897 border-color: var(--wp-admin-theme-color); 2898 box-shadow: 0 0 0 1px var(--wp-admin-theme-color); 2899 outline: 2px solid transparent; 2900 } 2901 .components-form-token-field__input-container::-webkit-input-placeholder { 2902 color: rgba(30, 30, 30, 0.62); 2903 } 2904 .components-form-token-field__input-container::-moz-placeholder { 2905 opacity: 1; 2906 color: rgba(30, 30, 30, 0.62); 2907 } 2908 .components-form-token-field__input-container:-ms-input-placeholder { 2909 color: rgba(30, 30, 30, 0.62); 2910 } 2911 .components-form-token-field__input-container.is-disabled { 2912 background: #ddd; 2913 border-color: #ddd; 2914 } 2915 .components-form-token-field__input-container.is-active { 2916 border-color: var(--wp-admin-theme-color); 2917 box-shadow: 0 0 0 1px var(--wp-admin-theme-color); 2918 outline: 2px solid transparent; 2919 } 2920 .components-form-token-field__input-container input[type=text].components-form-token-field__input { 2921 display: inline-block; 2922 flex: 1; 2923 font-size: 16px; 2924 width: 100%; 2925 max-width: 100%; 2926 margin-right: 4px; 2927 padding: 0; 2928 min-height: 24px; 2929 min-width: 50px; 2930 background: inherit; 2931 border: 0; 2932 color: #1e1e1e; 2933 box-shadow: none; 2934 } 2935 @media (min-width: 600px) { 2936 .components-form-token-field__input-container input[type=text].components-form-token-field__input { 2937 font-size: 13px; 2938 } 2939 } 2940 .components-form-token-field__input-container input[type=text].components-form-token-field__input:focus, .components-form-token-field.is-active .components-form-token-field__input-container input[type=text].components-form-token-field__input { 2941 outline: none; 2942 box-shadow: none; 2943 } 2944 .components-form-token-field__input-container .components-form-token-field__token + input[type=text].components-form-token-field__input { 2945 width: auto; 2946 } 2947 2948 .components-form-token-field__label { 2949 display: inline-block; 2950 margin-bottom: 4px; 2951 } 2952 2953 .components-form-token-field__help { 2954 font-size: 12px; 2955 font-style: normal; 2956 color: #757575; 2957 } 2958 2959 .components-form-token-field__token { 2960 font-size: 13px; 2961 display: flex; 2962 margin: 2px 0 2px 4px; 2963 color: #1e1e1e; 2964 max-width: 100%; 2965 } 2966 .components-form-token-field__token.is-success .components-form-token-field__token-text, 2967 .components-form-token-field__token.is-success .components-form-token-field__remove-token { 2968 background: #4ab866; 2969 } 2970 .components-form-token-field__token.is-error .components-form-token-field__token-text, 2971 .components-form-token-field__token.is-error .components-form-token-field__remove-token { 2972 background: #cc1818; 2973 } 2974 .components-form-token-field__token.is-validating .components-form-token-field__token-text, 2975 .components-form-token-field__token.is-validating .components-form-token-field__remove-token { 2976 color: #757575; 2977 } 2978 .components-form-token-field__token.is-borderless { 2979 position: relative; 2980 padding: 0 0 0 16px; 2981 } 2982 .components-form-token-field__token.is-borderless .components-form-token-field__token-text { 2983 background: transparent; 2984 color: var(--wp-admin-theme-color); 2985 } 2986 .components-form-token-field__token.is-borderless .components-form-token-field__remove-token { 2987 background: transparent; 2988 color: #757575; 2989 position: absolute; 2990 top: 1px; 2991 left: 0; 2992 } 2993 .components-form-token-field__token.is-borderless.is-success .components-form-token-field__token-text { 2994 color: #4ab866; 2995 } 2996 .components-form-token-field__token.is-borderless.is-error .components-form-token-field__token-text { 2997 color: #cc1818; 2998 border-radius: 0 4px 4px 0; 2999 padding: 0 6px 0 4px; 3000 } 3001 .components-form-token-field__token.is-borderless.is-validating .components-form-token-field__token-text { 3002 color: #1e1e1e; 3003 } 3004 .components-form-token-field__token.is-disabled .components-form-token-field__remove-token { 3005 cursor: default; 3006 } 3007 3008 .components-form-token-field__token-text, 3009 .components-form-token-field__remove-token.components-button { 3010 display: inline-block; 3011 line-height: 24px; 3012 height: auto; 3013 background: #ddd; 3014 min-width: unset; 3015 transition: all 0.2s cubic-bezier(0.4, 1, 0.4, 1); 3016 } 3017 @media (prefers-reduced-motion: reduce) { 3018 .components-form-token-field__token-text, 3019 .components-form-token-field__remove-token.components-button { 3020 transition-duration: 0s; 3021 transition-delay: 0s; 3022 animation-duration: 1ms; 3023 animation-delay: 0s; 3024 } 3025 } 3026 3027 .components-form-token-field__token-text { 3028 border-radius: 0 2px 2px 0; 3029 padding: 0 8px 0 0; 3030 white-space: nowrap; 3031 overflow: hidden; 3032 text-overflow: ellipsis; 3033 } 3034 3035 .components-form-token-field__remove-token.components-button { 3036 cursor: pointer; 3037 border-radius: 2px 0 0 2px; 3038 padding: 0 2px; 3039 color: #1e1e1e; 3040 line-height: 10px; 3041 overflow: initial; 3042 } 3043 .components-form-token-field__remove-token.components-button:hover { 3044 color: #1e1e1e; 3045 } 3046 3047 .components-form-token-field__suggestions-list { 3048 flex: 1 0 100%; 3049 min-width: 100%; 3050 max-height: 9em; 3051 overflow-y: auto; 3052 transition: all 0.15s ease-in-out; 3053 list-style: none; 3054 border-top: 1px solid #757575; 3055 margin: 4px -4px -4px; 3056 padding: 0; 3057 } 3058 @media (prefers-reduced-motion: reduce) { 3059 .components-form-token-field__suggestions-list { 3060 transition-duration: 0s; 3061 transition-delay: 0s; 3062 } 3063 } 3064 3065 .components-form-token-field__suggestion { 3066 color: #757575; 3067 display: block; 3068 font-size: 13px; 3069 padding: 4px 8px; 3070 margin: 0; 3071 cursor: pointer; 3072 } 3073 .components-form-token-field__suggestion.is-selected { 3074 background: var(--wp-admin-theme-color); 3075 color: #fff; 3076 } 3077 3078 .components-form-token-field__suggestion-match { 3079 text-decoration: underline; 3080 } 3081 3082 @media (min-width: 600px) { 3083 .components-guide { 3084 width: 600px; 3085 } 3086 } 3087 .components-guide .components-modal__header { 3088 background: none; 3089 border-bottom: none; 3090 width: 100%; 3091 padding: 0; 3092 margin: 0; 3093 } 3094 .components-guide .components-modal__header .components-button { 3095 align-self: flex-start; 3096 margin: 8px 0 0 8px; 3097 position: static; 3098 } 3099 .components-guide .components-modal__header .components-button:hover svg { 3100 fill: #fff; 3101 } 3102 .components-guide__container { 3103 display: flex; 3104 flex-direction: column; 3105 justify-content: space-between; 3106 margin-top: -60px; 3107 min-height: 100%; 3108 } 3109 .components-guide__page { 3110 display: flex; 3111 flex-direction: column; 3112 justify-content: center; 3113 position: relative; 3114 } 3115 @media (min-width: 600px) { 3116 .components-guide__page { 3117 min-height: 300px; 3118 } 3119 } 3120 .components-guide__footer { 3121 align-content: center; 3122 display: flex; 3123 height: 30px; 3124 justify-content: center; 3125 margin: 0 0 24px 0; 3126 padding: 0 32px; 3127 position: relative; 3128 width: 100%; 3129 } 3130 @media (max-width: 600px) { 3131 .components-guide__footer { 3132 position: absolute; 3133 bottom: 0; 3134 } 3135 } 3136 .components-guide__page-control { 3137 margin: 0; 3138 text-align: center; 3139 } 3140 .components-guide__page-control li { 3141 display: inline-block; 3142 margin: 0; 3143 } 3144 .components-guide__page-control .components-button { 3145 height: 30px; 3146 min-width: 20px; 3147 margin: -6px 0; 3148 } 3149 .components-guide .components-modal__content { 3150 padding: 0; 3151 } 3152 3153 .components-modal__frame.components-guide { 3154 border: none; 3155 min-width: 312px; 3156 height: 80vh; 3157 max-height: 575px; 3158 } 3159 @media (max-width: 600px) { 3160 .components-modal__frame.components-guide { 3161 bottom: 5%; 3162 right: 16px; 3163 left: 16px; 3164 top: 5%; 3165 margin: 0 auto; 3166 } 3167 } 3168 3169 .components-button.components-guide__back-button, .components-button.components-guide__forward-button, .components-button.components-guide__finish-button { 3170 height: 30px; 3171 position: absolute; 3172 } 3173 .components-button.components-guide__back-button, .components-button.components-guide__forward-button { 3174 font-size: 13px; 3175 padding: 4px 2px; 3176 } 3177 .components-button.components-guide__back-button.has-text svg, .components-button.components-guide__forward-button.has-text svg { 3178 margin: 0; 3179 } 3180 .components-button.components-guide__back-button:hover, .components-button.components-guide__forward-button:hover { 3181 text-decoration: underline; 3182 } 3183 .components-button.components-guide__back-button { 3184 right: 32px; 3185 } 3186 .components-button.components-guide__forward-button { 3187 left: 32px; 3188 color: #1386bf; 3189 font-weight: bold; 3190 } 3191 .components-button.components-guide__finish-button { 3192 left: 32px; 3193 } 3194 .components-button.components-guide__inline-finish-button { 3195 display: none; 3196 } 3197 3198 [role=region] { 3199 position: relative; 3200 } 3201 3202 .is-focusing-regions [role=region]:focus::after { 3203 content: ""; 3204 position: absolute; 3205 top: 0; 3206 bottom: 0; 3207 right: 0; 3208 left: 0; 3209 pointer-events: none; 3210 outline: 4px solid transparent; 3211 box-shadow: inset 0 0 0 4px var(--wp-admin-theme-color); 3212 } 3213 @supports (outline-offset: 1px) { 3214 .is-focusing-regions [role=region]:focus::after { 3215 content: none; 3216 } 3217 .is-focusing-regions [role=region]:focus { 3218 outline-style: solid; 3219 outline-color: var(--wp-admin-theme-color); 3220 outline-width: 4px; 3221 outline-offset: -4px; 3222 } 3223 } 3224 3225 .components-menu-group + .components-menu-group { 3226 margin-top: 8px; 3227 padding-top: 8px; 3228 border-top: 1px solid #1e1e1e; 3229 } 3230 .components-menu-group + .components-menu-group.has-hidden-separator { 3231 border-top: none; 3232 margin-top: 0; 3233 padding-top: 0; 3234 } 3235 3236 .components-menu-group__label { 3237 padding: 0 8px; 3238 margin-top: 4px; 3239 margin-bottom: 12px; 3240 color: #757575; 3241 text-transform: uppercase; 3242 font-size: 11px; 3243 font-weight: 500; 3244 } 3245 3246 .components-menu-item__button, 3247 .components-menu-item__button.components-button { 3248 width: 100%; 3249 } 3250 .components-menu-item__button .components-menu-items__item-icon, 3251 .components-menu-item__button.components-button .components-menu-items__item-icon { 3252 margin-left: -2px; 3253 margin-right: 24px; 3254 display: inline-block; 3255 flex: 0 0 auto; 3256 } 3257 .components-menu-item__button .components-menu-item__shortcut + .components-menu-items__item-icon, 3258 .components-menu-item__button.components-button .components-menu-item__shortcut + .components-menu-items__item-icon { 3259 margin-right: 8px; 3260 } 3261 .components-menu-item__button .block-editor-block-icon, 3262 .components-menu-item__button.components-button .block-editor-block-icon { 3263 margin-right: -2px; 3264 margin-left: 8px; 3265 } 3266 .components-menu-item__button.is-primary, 3267 .components-menu-item__button.components-button.is-primary { 3268 justify-content: center; 3269 } 3270 .components-menu-item__button.is-primary .components-menu-item__item, 3271 .components-menu-item__button.components-button.is-primary .components-menu-item__item { 3272 margin-left: 0; 3273 } 3274 3275 .components-menu-item__info-wrapper { 3276 display: flex; 3277 flex-direction: column; 3278 margin-left: auto; 3279 } 3280 3281 .components-menu-item__info { 3282 margin-top: 4px; 3283 font-size: 12px; 3284 color: #757575; 3285 white-space: normal; 3286 } 3287 3288 .components-menu-item__item { 3289 white-space: nowrap; 3290 margin-left: auto; 3291 display: inline-flex; 3292 align-items: center; 3293 } 3294 3295 .components-menu-item__shortcut { 3296 align-self: center; 3297 margin-left: 0; 3298 margin-right: auto; 3299 padding-right: 24px; 3300 color: currentColor; 3301 display: none; 3302 } 3303 @media (min-width: 480px) { 3304 .components-menu-item__shortcut { 3305 display: inline; 3306 } 3307 } 3308 3309 .components-menu-items-choice svg, 3310 .components-menu-items-choice.components-button svg { 3311 margin-left: 12px; 3312 } 3313 .components-menu-items-choice.has-icon, 3314 .components-menu-items-choice.components-button.has-icon { 3315 padding-right: 12px; 3316 } 3317 3318 .components-modal__screen-overlay { 3319 position: fixed; 3320 top: 0; 3321 left: 0; 3322 bottom: 0; 3323 right: 0; 3324 background-color: rgba(0, 0, 0, 0.35); 3325 z-index: 100000; 3326 animation: edit-post__fade-in-animation 0.2s ease-out 0s; 3327 animation-fill-mode: forwards; 3328 } 3329 @media (prefers-reduced-motion: reduce) { 3330 .components-modal__screen-overlay { 3331 animation-duration: 1ms; 3332 animation-delay: 0s; 3333 } 3334 } 3335 3336 .components-modal__frame { 3337 position: absolute; 3338 top: 0; 3339 left: 0; 3340 bottom: 0; 3341 right: 0; 3342 box-sizing: border-box; 3343 margin: 0; 3344 background: #fff; 3345 box-shadow: 0 10px 10px rgba(0, 0, 0, 0.25); 3346 border-radius: 2px; 3347 overflow: auto; 3348 } 3349 @media (min-width: 600px) { 3350 .components-modal__frame { 3351 top: 50%; 3352 left: auto; 3353 bottom: auto; 3354 right: 50%; 3355 min-width: 360px; 3356 max-width: calc(100% - 16px - 16px); 3357 max-height: 90%; 3358 transform: translate(50%, -50%); 3359 animation: components-modal__appear-animation 0.1s ease-out; 3360 animation-fill-mode: forwards; 3361 } 3362 } 3363 @media (min-width: 600px) and (prefers-reduced-motion: reduce) { 3364 .components-modal__frame { 3365 animation-duration: 1ms; 3366 animation-delay: 0s; 3367 } 3368 } 3369 3370 @keyframes components-modal__appear-animation { 3371 from { 3372 margin-top: 32px; 3373 } 3374 to { 3375 margin-top: 0; 3376 } 3377 } 3378 .components-modal__header { 3379 box-sizing: border-box; 3380 border-bottom: 1px solid #ddd; 3381 padding: 0 32px; 3382 display: flex; 3383 flex-direction: row; 3384 justify-content: space-between; 3385 background: #fff; 3386 align-items: center; 3387 height: 60px; 3388 z-index: 10; 3389 position: relative; 3390 position: sticky; 3391 top: 0; 3392 margin: 0 -32px 24px; 3393 } 3394 @supports (-ms-ime-align: auto) { 3395 .components-modal__header { 3396 position: fixed; 3397 width: 100%; 3398 } 3399 } 3400 .components-modal__header .components-modal__header-heading { 3401 font-size: 1rem; 3402 font-weight: 600; 3403 } 3404 .components-modal__header h1 { 3405 line-height: 1; 3406 margin: 0; 3407 } 3408 .components-modal__header .components-button { 3409 position: relative; 3410 right: 8px; 3411 } 3412 3413 .components-modal__header-heading-container { 3414 align-items: center; 3415 flex-grow: 1; 3416 display: flex; 3417 flex-direction: row; 3418 justify-content: left; 3419 } 3420 3421 .components-modal__header-icon-container { 3422 display: inline-block; 3423 } 3424 .components-modal__header-icon-container svg { 3425 max-width: 36px; 3426 max-height: 36px; 3427 padding: 8px; 3428 } 3429 3430 .components-modal__content { 3431 box-sizing: border-box; 3432 height: 100%; 3433 padding: 0 32px 24px; 3434 } 3435 @supports (-ms-ime-align: auto) { 3436 .components-modal__content { 3437 padding-top: 60px; 3438 } 3439 } 3440 3441 .components-notice { 3442 display: flex; 3443 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; 3444 font-size: 13px; 3445 background-color: #fff; 3446 border-right: 4px solid var(--wp-admin-theme-color); 3447 margin: 5px 15px 2px; 3448 padding: 8px 12px; 3449 align-items: center; 3450 } 3451 .components-notice.is-dismissible { 3452 padding-left: 36px; 3453 position: relative; 3454 } 3455 .components-notice.is-success { 3456 border-right-color: #4ab866; 3457 background-color: #eff9f1; 3458 } 3459 .components-notice.is-warning { 3460 border-right-color: #f0b849; 3461 background-color: #fef8ee; 3462 } 3463 .components-notice.is-error { 3464 border-right-color: #cc1818; 3465 background-color: #f4a2a2; 3466 } 3467 3468 .components-notice__content { 3469 flex-grow: 1; 3470 margin: 4px 0 4px 25px; 3471 } 3472 3473 .components-notice__actions { 3474 display: flex; 3475 flex-wrap: wrap; 3476 } 3477 3478 .components-notice__action.components-button { 3479 margin-left: 8px; 3480 } 3481 .components-notice__action.components-button, .components-notice__action.components-button.is-link { 3482 margin-right: 12px; 3483 } 3484 .components-notice__action.components-button.is-secondary { 3485 vertical-align: initial; 3486 } 3487 3488 .components-notice__dismiss { 3489 color: #757575; 3490 align-self: flex-start; 3491 flex-shrink: 0; 3492 } 3493 .components-notice__dismiss:not(:disabled):not([aria-disabled=true]):not(.is-secondary):hover, .components-notice__dismiss:not(:disabled):not([aria-disabled=true]):not(.is-secondary):active, .components-notice__dismiss:not(:disabled):not([aria-disabled=true]):focus { 3494 color: #1e1e1e; 3495 background-color: transparent; 3496 } 3497 .components-notice__dismiss:not(:disabled):not([aria-disabled=true]):not(.is-secondary):hover { 3498 box-shadow: none; 3499 } 3500 3501 .components-notice-list { 3502 max-width: 100vw; 3503 box-sizing: border-box; 3504 } 3505 .components-notice-list .components-notice__content { 3506 margin-top: 12px; 3507 margin-bottom: 12px; 3508 line-height: 2; 3509 } 3510 .components-notice-list .components-notice__action.components-button { 3511 display: block; 3512 margin-right: 0; 3513 margin-top: 8px; 3514 } 3515 3516 .components-panel { 3517 background: #fff; 3518 border: 1px solid #e0e0e0; 3519 } 3520 .components-panel > .components-panel__header:first-child, 3521 .components-panel > .components-panel__body:first-child { 3522 margin-top: -1px; 3523 } 3524 .components-panel > .components-panel__header:last-child, 3525 .components-panel > .components-panel__body:last-child { 3526 border-bottom-width: 0; 3527 } 3528 3529 .components-panel + .components-panel { 3530 margin-top: -1px; 3531 } 3532 3533 .components-panel__body { 3534 border-top: 1px solid #e0e0e0; 3535 border-bottom: 1px solid #e0e0e0; 3536 } 3537 .components-panel__body h3 { 3538 margin: 0 0 0.5em; 3539 } 3540 .components-panel__body.is-opened { 3541 padding: 16px; 3542 } 3543 3544 .components-panel__header { 3545 display: flex; 3546 justify-content: space-between; 3547 align-items: center; 3548 padding: 0 16px; 3549 height: 48px; 3550 border-top: 1px solid #ddd; 3551 border-bottom: 1px solid #ddd; 3552 } 3553 .components-panel__header h2 { 3554 margin: 0; 3555 font-size: inherit; 3556 color: inherit; 3557 } 3558 3559 .components-panel__body + .components-panel__body, 3560 .components-panel__body + .components-panel__header, 3561 .components-panel__header + .components-panel__body, 3562 .components-panel__header + .components-panel__header { 3563 margin-top: -1px; 3564 } 3565 3566 .components-panel__body > .components-panel__body-title { 3567 display: block; 3568 padding: 0; 3569 font-size: inherit; 3570 margin-top: 0; 3571 margin-bottom: 0; 3572 transition: 0.1s background ease-in-out; 3573 } 3574 @media (prefers-reduced-motion: reduce) { 3575 .components-panel__body > .components-panel__body-title { 3576 transition-duration: 0s; 3577 transition-delay: 0s; 3578 } 3579 } 3580 3581 .components-panel__body.is-opened > .components-panel__body-title { 3582 margin: -16px; 3583 margin-bottom: 5px; 3584 } 3585 3586 .components-panel__body > .components-panel__body-title:hover { 3587 background: #f0f0f0; 3588 border: none; 3589 } 3590 3591 .components-panel__body-toggle.components-button { 3592 position: relative; 3593 padding: 16px 16px 16px 48px; 3594 outline: none; 3595 width: 100%; 3596 font-weight: 500; 3597 text-align: right; 3598 color: #1e1e1e; 3599 border: none; 3600 box-shadow: none; 3601 transition: 0.1s background ease-in-out; 3602 height: auto; 3603 } 3604 @media (prefers-reduced-motion: reduce) { 3605 .components-panel__body-toggle.components-button { 3606 transition-duration: 0s; 3607 transition-delay: 0s; 3608 } 3609 } 3610 .components-panel__body-toggle.components-button:focus { 3611 box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); 3612 border-radius: 0; 3613 } 3614 .components-panel__body-toggle.components-button .components-panel__arrow { 3615 position: absolute; 3616 left: 16px; 3617 top: 50%; 3618 transform: translateY(-50%); 3619 color: #1e1e1e; 3620 fill: currentColor; 3621 transition: 0.1s color ease-in-out; 3622 } 3623 @media (prefers-reduced-motion: reduce) { 3624 .components-panel__body-toggle.components-button .components-panel__arrow { 3625 transition-duration: 0s; 3626 transition-delay: 0s; 3627 } 3628 } 3629 body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right { 3630 transform: scaleX(-1); 3631 -ms-filter: fliph; 3632 filter: FlipH; 3633 margin-top: -10px; 3634 } 3635 3636 .components-panel__icon { 3637 color: #757575; 3638 margin: -2px 6px -2px 0; 3639 } 3640 3641 .components-panel__body-toggle-icon { 3642 margin-left: -5px; 3643 } 3644 3645 .components-panel__color-title { 3646 float: right; 3647 height: 19px; 3648 } 3649 3650 .components-panel__row { 3651 display: flex; 3652 justify-content: space-between; 3653 align-items: center; 3654 margin-top: 8px; 3655 min-height: 36px; 3656 } 3657 .components-panel__row select { 3658 min-width: 0; 3659 } 3660 .components-panel__row label { 3661 margin-left: 12px; 3662 flex-shrink: 0; 3663 max-width: 75%; 3664 } 3665 .components-panel__row:empty, .components-panel__row:first-of-type { 3666 margin-top: 0; 3667 } 3668 3669 .components-panel .circle-picker { 3670 padding-bottom: 20px; 3671 } 3672 3673 .components-placeholder.components-placeholder { 3674 box-sizing: border-box; 3675 position: relative; 3676 padding: 1em; 3677 min-height: 200px; 3678 width: 100%; 3679 text-align: right; 3680 margin: 0; 3681 color: #1e1e1e; 3682 -moz-font-smoothing: subpixel-antialiased; 3683 -webkit-font-smoothing: subpixel-antialiased; 3684 border-radius: 2px; 3685 background-color: #fff; 3686 box-shadow: inset 0 0 0 1px #1e1e1e; 3687 outline: 1px solid transparent; 3688 } 3689 @supports (position: sticky) { 3690 .components-placeholder.components-placeholder { 3691 display: flex; 3692 flex-direction: column; 3693 justify-content: center; 3694 align-items: flex-start; 3695 } 3696 } 3697 .components-placeholder.components-placeholder .components-base-control__label { 3698 font-size: 13px; 3699 } 3700 3701 .components-placeholder__error, 3702 .components-placeholder__instructions, 3703 .components-placeholder__label, 3704 .components-placeholder__fieldset { 3705 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; 3706 font-size: 13px; 3707 } 3708 3709 .components-placeholder__label { 3710 display: flex; 3711 font-weight: 600; 3712 margin-bottom: 16px; 3713 align-items: center; 3714 } 3715 .components-placeholder__label > svg, 3716 .components-placeholder__label .dashicon, 3717 .components-placeholder__label .block-editor-block-icon { 3718 fill: currentColor; 3719 margin-left: 1ch; 3720 } 3721 .components-placeholder__label:empty { 3722 display: none; 3723 } 3724 3725 .components-placeholder__fieldset, 3726 .components-placeholder__fieldset form { 3727 display: flex; 3728 flex-direction: row; 3729 width: 100%; 3730 flex-wrap: wrap; 3731 } 3732 .components-placeholder__fieldset p, 3733 .components-placeholder__fieldset form p { 3734 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; 3735 font-size: 13px; 3736 } 3737 3738 .components-placeholder__fieldset.is-column-layout, 3739 .components-placeholder__fieldset.is-column-layout form { 3740 flex-direction: column; 3741 } 3742 3743 .components-placeholder__input[type=url] { 3744 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; 3745 padding: 6px 8px; 3746 box-shadow: 0 0 0 transparent; 3747 transition: box-shadow 0.1s linear; 3748 border-radius: 2px; 3749 border: 1px solid #757575; 3750 /* Fonts smaller than 16px causes mobile safari to zoom. */ 3751 font-size: 16px; 3752 /* Override core line-height. To be reviewed. */ 3753 line-height: normal; 3754 margin: 0 0 0 8px; 3755 flex: 1 1 auto; 3756 } 3757 @media (prefers-reduced-motion: reduce) { 3758 .components-placeholder__input[type=url] { 3759 transition-duration: 0s; 3760 transition-delay: 0s; 3761 } 3762 } 3763 @media (min-width: 600px) { 3764 .components-placeholder__input[type=url] { 3765 font-size: 13px; 3766 /* Override core line-height. To be reviewed. */ 3767 line-height: normal; 3768 } 3769 } 3770 .components-placeholder__input[type=url]:focus { 3771 border-color: var(--wp-admin-theme-color); 3772 box-shadow: 0 0 0 1px var(--wp-admin-theme-color); 3773 outline: 2px solid transparent; 3774 } 3775 .components-placeholder__input[type=url]::-webkit-input-placeholder { 3776 color: rgba(30, 30, 30, 0.62); 3777 } 3778 .components-placeholder__input[type=url]::-moz-placeholder { 3779 opacity: 1; 3780 color: rgba(30, 30, 30, 0.62); 3781 } 3782 .components-placeholder__input[type=url]:-ms-input-placeholder { 3783 color: rgba(30, 30, 30, 0.62); 3784 } 3785 3786 .components-placeholder__instructions { 3787 margin-bottom: 1em; 3788 } 3789 3790 .components-placeholder__error { 3791 margin-top: 1em; 3792 width: 100%; 3793 } 3794 3795 .components-placeholder__preview img { 3796 margin: 3%; 3797 width: 50%; 3798 } 3799 3800 .components-placeholder__fieldset .components-button { 3801 margin-left: 12px; 3802 margin-bottom: 12px; 3803 } 3804 .components-placeholder__fieldset .components-button:last-child { 3805 margin-bottom: 0; 3806 margin-left: 0; 3807 } 3808 3809 .components-placeholder__fieldset .components-button:not(.is-link) ~ .components-button.is-link { 3810 margin-right: 10px; 3811 margin-left: 10px; 3812 } 3813 .components-placeholder__fieldset .components-button:not(.is-link) ~ .components-button.is-link:last-child { 3814 margin-left: 0; 3815 } 3816 3817 .components-placeholder.is-large .components-placeholder__label { 3818 font-size: 18pt; 3819 font-weight: normal; 3820 } 3821 .components-placeholder.is-medium .components-placeholder__instructions, .components-placeholder.is-small .components-placeholder__instructions { 3822 display: none; 3823 } 3824 .components-placeholder.is-medium .components-placeholder__fieldset, 3825 .components-placeholder.is-medium .components-placeholder__fieldset form, .components-placeholder.is-small .components-placeholder__fieldset, 3826 .components-placeholder.is-small .components-placeholder__fieldset form { 3827 flex-direction: column; 3828 } 3829 .components-placeholder.is-medium .components-placeholder__fieldset .components-button, .components-placeholder.is-small .components-placeholder__fieldset .components-button { 3830 margin-left: auto; 3831 } 3832 .components-placeholder.is-small .components-button { 3833 padding: 0 8px 2px; 3834 } 3835 .components-popover { 3836 position: fixed; 3837 z-index: 1000000; 3838 top: 0; 3839 left: 0; 3840 opacity: 0; 3841 } 3842 .components-popover.is-expanded, .components-popover[data-x-axis][data-y-axis] { 3843 opacity: 1; 3844 } 3845 .components-popover.is-expanded { 3846 top: 0; 3847 left: 0; 3848 right: 0; 3849 bottom: 0; 3850 z-index: 1000000 !important; 3851 } 3852 .components-popover:not(.is-without-arrow) { 3853 margin-left: 2px; 3854 } 3855 .components-popover:not(.is-without-arrow)::before { 3856 border: 8px solid #ccc; 3857 } 3858 .components-popover:not(.is-without-arrow).is-alternate::before { 3859 border-color: #1e1e1e; 3860 } 3861 .components-popover:not(.is-without-arrow)::after { 3862 border: 8px solid #fff; 3863 } 3864 .components-popover:not(.is-without-arrow)::before, .components-popover:not(.is-without-arrow)::after { 3865 content: ""; 3866 position: absolute; 3867 height: 0; 3868 width: 0; 3869 line-height: 0; 3870 } 3871 .components-popover:not(.is-without-arrow)[data-y-axis=top] { 3872 margin-top: -8px; 3873 } 3874 .components-popover:not(.is-without-arrow)[data-y-axis=top]::before { 3875 bottom: -8px; 3876 } 3877 .components-popover:not(.is-without-arrow)[data-y-axis=top]::after { 3878 bottom: -6px; 3879 } 3880 .components-popover:not(.is-without-arrow)[data-y-axis=top]::before, .components-popover:not(.is-without-arrow)[data-y-axis=top]::after { 3881 border-bottom: none; 3882 border-left-color: transparent; 3883 border-right-color: transparent; 3884 border-top-style: solid; 3885 margin-left: -10px; 3886 } 3887 .components-popover:not(.is-without-arrow)[data-y-axis=bottom] { 3888 margin-top: 8px; 3889 } 3890 .components-popover:not(.is-without-arrow)[data-y-axis=bottom]::before { 3891 top: -8px; 3892 } 3893 .components-popover:not(.is-without-arrow)[data-y-axis=bottom]::after { 3894 top: -6px; 3895 } 3896 .components-popover:not(.is-without-arrow)[data-y-axis=bottom]::before, .components-popover:not(.is-without-arrow)[data-y-axis=bottom]::after { 3897 border-bottom-style: solid; 3898 border-left-color: transparent; 3899 border-right-color: transparent; 3900 border-top: none; 3901 margin-left: -10px; 3902 } 3903 .components-popover:not(.is-without-arrow)[data-y-axis=middle][data-x-axis=left] { 3904 margin-left: -8px; 3905 } 3906 .components-popover:not(.is-without-arrow)[data-y-axis=middle][data-x-axis=left]::before { 3907 right: -8px; 3908 } 3909 .components-popover:not(.is-without-arrow)[data-y-axis=middle][data-x-axis=left]::after { 3910 right: -6px; 3911 } 3912 .components-popover:not(.is-without-arrow)[data-y-axis=middle][data-x-axis=left]::before, .components-popover:not(.is-without-arrow)[data-y-axis=middle][data-x-axis=left]::after { 3913 border-bottom-color: transparent; 3914 border-left-style: solid; 3915 border-right: none; 3916 border-top-color: transparent; 3917 } 3918 .components-popover:not(.is-without-arrow)[data-y-axis=middle][data-x-axis=right] { 3919 margin-left: 8px; 3920 } 3921 .components-popover:not(.is-without-arrow)[data-y-axis=middle][data-x-axis=right]::before { 3922 left: -8px; 3923 } 3924 .components-popover:not(.is-without-arrow)[data-y-axis=middle][data-x-axis=right]::after { 3925 left: -6px; 3926 } 3927 .components-popover:not(.is-without-arrow)[data-y-axis=middle][data-x-axis=right]::before, .components-popover:not(.is-without-arrow)[data-y-axis=middle][data-x-axis=right]::after { 3928 border-bottom-color: transparent; 3929 border-left: none; 3930 border-right-style: solid; 3931 border-top-color: transparent; 3932 } 3933 .components-popover[data-y-axis=top] { 3934 bottom: 100%; 3935 } 3936 .components-popover[data-y-axis=bottom] { 3937 top: 100%; 3938 } 3939 .components-popover[data-y-axis=middle] { 3940 align-items: center; 3941 display: flex; 3942 } 3943 .components-popover.is-from-top { 3944 margin-top: 12px; 3945 } 3946 .components-popover.is-from-bottom { 3947 margin-top: -12px; 3948 } 3949 .components-popover.is-from-left:not(.is-from-top):not(.is-from-bottom) { 3950 margin-left: 12px; 3951 } 3952 .components-popover.is-from-right:not(.is-from-top):not(.is-from-bottom) { 3953 margin-right: 12px; 3954 } 3955 3956 .components-popover__content { 3957 height: 100%; 3958 background: #fff; 3959 border: 1px solid #ccc; 3960 box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); 3961 border-radius: 2px; 3962 } 3963 .is-alternate .components-popover__content { 3964 border: 1px solid #1e1e1e; 3965 box-shadow: none; 3966 } 3967 .components-popover .components-popover__content { 3968 position: absolute; 3969 height: auto; 3970 overflow-y: auto; 3971 } 3972 .components-popover.is-expanded .components-popover__content { 3973 position: static; 3974 height: calc(100% - 48px); 3975 overflow-y: visible; 3976 min-width: auto; 3977 border: none; 3978 border-top: 1px solid #1e1e1e; 3979 } 3980 .components-popover[data-y-axis=top] .components-popover__content { 3981 bottom: 100%; 3982 } 3983 .components-popover[data-x-axis=center] .components-popover__content { 3984 left: 50%; 3985 transform: translateX(-50%); 3986 } 3987 .components-popover[data-x-axis=right] .components-popover__content { 3988 position: absolute; 3989 left: 100%; 3990 } 3991 .components-popover:not([data-y-axis=middle])[data-x-axis=right] .components-popover__content { 3992 margin-left: -25px; 3993 } 3994 .components-popover[data-x-axis=left] .components-popover__content { 3995 position: absolute; 3996 right: 100%; 3997 } 3998 .components-popover:not([data-y-axis=middle])[data-x-axis=left] .components-popover__content { 3999 margin-right: -25px; 4000 } 4001 4002 .components-popover__header { 4003 align-items: center; 4004 background: #fff; 4005 display: flex; 4006 height: 48px; 4007 justify-content: space-between; 4008 padding: 0 8px 0 16px; 4009 } 4010 4011 .components-popover__header-title { 4012 overflow: hidden; 4013 text-overflow: ellipsis; 4014 white-space: nowrap; 4015 width: 100%; 4016 } 4017 4018 .components-popover__close.components-button { 4019 z-index: 5; 4020 } 4021 .components-radio-control { 4022 display: flex; 4023 flex-direction: column; 4024 } 4025 .components-radio-control .components-base-control__help { 4026 margin-top: 0; 4027 } 4028 .components-radio-control .components-base-control__field { 4029 margin-bottom: 0; 4030 } 4031 4032 .components-radio-control__option:not(:last-child) { 4033 margin-bottom: 4px; 4034 } 4035 4036 .components-radio-control__input[type=radio] { 4037 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; 4038 padding: 6px 8px; 4039 box-shadow: 0 0 0 transparent; 4040 transition: box-shadow 0.1s linear; 4041 border-radius: 2px; 4042 border: 1px solid #757575; 4043 /* Fonts smaller than 16px causes mobile safari to zoom. */ 4044 font-size: 16px; 4045 /* Override core line-height. To be reviewed. */ 4046 line-height: normal; 4047 border: 1px solid #1e1e1e; 4048 margin-left: 12px; 4049 transition: none; 4050 border-radius: 50%; 4051 width: 24px; 4052 height: 24px; 4053 margin-top: 0; 4054 margin-left: 6px; 4055 } 4056 @media (prefers-reduced-motion: reduce) { 4057 .components-radio-control__input[type=radio] { 4058 transition-duration: 0s; 4059 transition-delay: 0s; 4060 } 4061 } 4062 @media (min-width: 600px) { 4063 .components-radio-control__input[type=radio] { 4064 font-size: 13px; 4065 /* Override core line-height. To be reviewed. */ 4066 line-height: normal; 4067 } 4068 } 4069 .components-radio-control__input[type=radio]:focus { 4070 border-color: var(--wp-admin-theme-color); 4071 box-shadow: 0 0 0 1px var(--wp-admin-theme-color); 4072 outline: 2px solid transparent; 4073 } 4074 .components-radio-control__input[type=radio]::-webkit-input-placeholder { 4075 color: rgba(30, 30, 30, 0.62); 4076 } 4077 .components-radio-control__input[type=radio]::-moz-placeholder { 4078 opacity: 1; 4079 color: rgba(30, 30, 30, 0.62); 4080 } 4081 .components-radio-control__input[type=radio]:-ms-input-placeholder { 4082 color: rgba(30, 30, 30, 0.62); 4083 } 4084 @media (min-width: 600px) { 4085 .components-radio-control__input[type=radio] { 4086 height: 20px; 4087 width: 20px; 4088 } 4089 } 4090 .components-radio-control__input[type=radio]:checked::before { 4091 box-sizing: inherit; 4092 width: 8px; 4093 height: 8px; 4094 transform: translate(-7px, 7px); 4095 margin: 0; 4096 background-color: #fff; 4097 border: 4px solid #fff; 4098 } 4099 @media (min-width: 600px) { 4100 .components-radio-control__input[type=radio]:checked::before { 4101 transform: translate(-5px, 5px); 4102 } 4103 } 4104 .components-radio-control__input[type=radio]:focus { 4105 box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-admin-theme-color); 4106 outline: 2px solid transparent; 4107 } 4108 .components-radio-control__input[type=radio]:checked { 4109 background: var(--wp-admin-theme-color); 4110 border-color: var(--wp-admin-theme-color); 4111 } 4112 4113 .components-resizable-box__handle { 4114 display: none; 4115 width: 23px; 4116 height: 23px; 4117 z-index: 2; 4118 } 4119 .components-resizable-box__container.has-show-handle .components-resizable-box__handle { 4120 display: block; 4121 } 4122 4123 .components-resizable-box__handle::after { 4124 display: block; 4125 content: ""; 4126 width: 15px; 4127 height: 15px; 4128 border: 2px solid var(--wp-admin-theme-color); 4129 border-radius: 50%; 4130 background: #fff; 4131 cursor: inherit; 4132 position: absolute; 4133 top: calc(50% - 8px); 4134 left: calc(50% - 8px); 4135 } 4136 4137 .components-resizable-box__side-handle::before { 4138 display: block; 4139 border-radius: 2px; 4140 content: ""; 4141 width: 3px; 4142 height: 3px; 4143 background: var(--wp-admin-theme-color); 4144 cursor: inherit; 4145 position: absolute; 4146 top: calc(50% - 1px); 4147 left: calc(50% - 1px); 4148 transition: transform 0.1s ease-in; 4149 opacity: 0; 4150 } 4151 @media (prefers-reduced-motion: reduce) { 4152 .components-resizable-box__side-handle::before { 4153 transition-duration: 0s; 4154 transition-delay: 0s; 4155 } 4156 } 4157 4158 .components-resizable-box__side-handle { 4159 z-index: 2; 4160 } 4161 4162 .components-resizable-box__corner-handle { 4163 z-index: 2; 4164 } 4165 4166 .components-resizable-box__side-handle.components-resizable-box__handle-top, 4167 .components-resizable-box__side-handle.components-resizable-box__handle-bottom, 4168 .components-resizable-box__side-handle.components-resizable-box__handle-top::before, 4169 .components-resizable-box__side-handle.components-resizable-box__handle-bottom::before { 4170 width: 100%; 4171 right: 0; 4172 border-right: 0; 4173 border-left: 0; 4174 } 4175 4176 .components-resizable-box__side-handle.components-resizable-box__handle-left, 4177 .components-resizable-box__side-handle.components-resizable-box__handle-right, 4178 .components-resizable-box__side-handle.components-resizable-box__handle-left::before, 4179 .components-resizable-box__side-handle.components-resizable-box__handle-right::before { 4180 height: 100%; 4181 top: 0; 4182 border-top: 0; 4183 border-bottom: 0; 4184 } 4185 4186 .components-resizable-box__side-handle.components-resizable-box__handle-top:hover::before, 4187 .components-resizable-box__side-handle.components-resizable-box__handle-bottom:hover::before, 4188 .components-resizable-box__side-handle.components-resizable-box__handle-top:active::before, 4189 .components-resizable-box__side-handle.components-resizable-box__handle-bottom:active::before { 4190 animation: components-resizable-box__top-bottom-animation 0.1s ease-out 0s; 4191 animation-fill-mode: forwards; 4192 } 4193 @media (prefers-reduced-motion: reduce) { 4194 .components-resizable-box__side-handle.components-resizable-box__handle-top:hover::before, 4195 .components-resizable-box__side-handle.components-resizable-box__handle-bottom:hover::before, 4196 .components-resizable-box__side-handle.components-resizable-box__handle-top:active::before, 4197 .components-resizable-box__side-handle.components-resizable-box__handle-bottom:active::before { 4198 animation-duration: 1ms; 4199 animation-delay: 0s; 4200 } 4201 } 4202 4203 .components-resizable-box__side-handle.components-resizable-box__handle-left:hover::before, 4204 .components-resizable-box__side-handle.components-resizable-box__handle-right:hover::before, 4205 .components-resizable-box__side-handle.components-resizable-box__handle-left:active::before, 4206 .components-resizable-box__side-handle.components-resizable-box__handle-right:active::before { 4207 animation: components-resizable-box__left-right-animation 0.1s ease-out 0s; 4208 animation-fill-mode: forwards; 4209 } 4210 @media (prefers-reduced-motion: reduce) { 4211 .components-resizable-box__side-handle.components-resizable-box__handle-left:hover::before, 4212 .components-resizable-box__side-handle.components-resizable-box__handle-right:hover::before, 4213 .components-resizable-box__side-handle.components-resizable-box__handle-left:active::before, 4214 .components-resizable-box__side-handle.components-resizable-box__handle-right:active::before { 4215 animation-duration: 1ms; 4216 animation-delay: 0s; 4217 } 4218 } 4219 4220 /* This CSS is shown only to Safari, which has a bug with table-caption making it jumpy. 4221 See https://bugs.webkit.org/show_bug.cgi?id=187903. */ 4222 @media not all and (-webkit-min-device-pixel-ratio: 0), not all and (min-resolution: 0.001dpcm) { 4223 @supports (-webkit-appearance: none) { 4224 .components-resizable-box__side-handle.components-resizable-box__handle-top:hover::before, 4225 .components-resizable-box__side-handle.components-resizable-box__handle-bottom:hover::before, 4226 .components-resizable-box__side-handle.components-resizable-box__handle-top:active::before, 4227 .components-resizable-box__side-handle.components-resizable-box__handle-bottom:active::before { 4228 animation: none; 4229 } 4230 4231 .components-resizable-box__side-handle.components-resizable-box__handle-left:hover::before, 4232 .components-resizable-box__side-handle.components-resizable-box__handle-right:hover::before, 4233 .components-resizable-box__side-handle.components-resizable-box__handle-left:active::before, 4234 .components-resizable-box__side-handle.components-resizable-box__handle-right:active::before { 4235 animation: none; 4236 } 4237 } 4238 } 4239 @keyframes components-resizable-box__top-bottom-animation { 4240 from { 4241 transform: scaleX(0); 4242 opacity: 0; 4243 } 4244 to { 4245 transform: scaleX(1); 4246 opacity: 1; 4247 } 4248 } 4249 @keyframes components-resizable-box__left-right-animation { 4250 from { 4251 transform: scaleY(0); 4252 opacity: 0; 4253 } 4254 to { 4255 transform: scaleY(1); 4256 opacity: 1; 4257 } 4258 } 4259 .components-resizable-box__handle-right { 4260 right: calc(11.5px * -1); 4261 } 4262 4263 .components-resizable-box__handle-left { 4264 left: calc(11.5px * -1); 4265 } 4266 4267 .components-resizable-box__handle-top { 4268 top: calc(11.5px * -1); 4269 } 4270 4271 .components-resizable-box__handle-bottom { 4272 bottom: calc(11.5px * -1); 4273 } 4274 .components-responsive-wrapper { 4275 position: relative; 4276 max-width: 100%; 4277 } 4278 .components-responsive-wrapper, .components-responsive-wrapper > span { 4279 display: block; 4280 } 4281 4282 .components-responsive-wrapper__content { 4283 position: absolute; 4284 top: 0; 4285 left: 0; 4286 bottom: 0; 4287 right: 0; 4288 width: 100%; 4289 height: 100%; 4290 margin: auto; 4291 } 4292 4293 .components-sandbox { 4294 overflow: hidden; 4295 } 4296 4297 iframe.components-sandbox { 4298 width: 100%; 4299 } 4300 4301 html.lockscroll, 4302 body.lockscroll { 4303 overflow: hidden; 4304 } 4305 4306 .components-select-control__input { 4307 background: #fff; 4308 height: 36px; 4309 line-height: 36px; 4310 margin: 1px; 4311 outline: 0; 4312 width: 100%; 4313 -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important; 4314 } 4315 @media (min-width: 782px) { 4316 .components-select-control__input { 4317 height: 28px; 4318 line-height: 28px; 4319 } 4320 } 4321 4322 @media (max-width: 782px) { 4323 .components-base-control .components-base-control__field .components-select-control__input { 4324 font-size: 16px; 4325 } 4326 } 4327 .components-snackbar { 4328 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; 4329 font-size: 13px; 4330 background-color: #1e1e1e; 4331 border-radius: 2px; 4332 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); 4333 color: #fff; 4334 padding: 16px 24px; 4335 width: 100%; 4336 max-width: 600px; 4337 box-sizing: border-box; 4338 cursor: pointer; 4339 pointer-events: auto; 4340 } 4341 @media (min-width: 600px) { 4342 .components-snackbar { 4343 width: -moz-fit-content; 4344 width: fit-content; 4345 } 4346 } 4347 .components-snackbar:focus { 4348 box-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--wp-admin-theme-color); 4349 } 4350 .components-snackbar.components-snackbar-explicit-dismiss { 4351 cursor: default; 4352 } 4353 .components-snackbar .components-snackbar__content-with-icon { 4354 margin-right: 24px; 4355 } 4356 .components-snackbar .components-snackbar__icon { 4357 position: absolute; 4358 top: 24px; 4359 right: 28px; 4360 } 4361 .components-snackbar .components-snackbar__dismiss-button { 4362 margin-right: 32px; 4363 cursor: pointer; 4364 } 4365 4366 .components-snackbar__action.components-button { 4367 margin-right: 32px; 4368 color: #fff; 4369 height: auto; 4370 flex-shrink: 0; 4371 line-height: 1.4; 4372 padding: 0; 4373 } 4374 .components-snackbar__action.components-button:not(:disabled):not([aria-disabled=true]):not(.is-secondary) { 4375 text-decoration: underline; 4376 background-color: transparent; 4377 } 4378 .components-snackbar__action.components-button:not(:disabled):not([aria-disabled=true]):not(.is-secondary):focus { 4379 color: #fff; 4380 box-shadow: none; 4381 outline: 1px dotted #fff; 4382 } 4383 .components-snackbar__action.components-button:not(:disabled):not([aria-disabled=true]):not(.is-secondary):hover { 4384 color: var(--wp-admin-theme-color); 4385 } 4386 4387 .components-snackbar__content { 4388 display: flex; 4389 align-items: baseline; 4390 justify-content: space-between; 4391 line-height: 1.4; 4392 } 4393 4394 .components-snackbar-list { 4395 position: absolute; 4396 z-index: 100000; 4397 width: 100%; 4398 box-sizing: border-box; 4399 pointer-events: none; 4400 } 4401 4402 .components-snackbar-list__notice-container { 4403 position: relative; 4404 padding-top: 8px; 4405 } 4406 4407 .components-swatch { 4408 width: 18px; 4409 height: 18px; 4410 border-radius: 50%; 4411 color: transparent; 4412 background: transparent; 4413 } 4414 .components-swatch::after { 4415 content: ""; 4416 display: block; 4417 width: 100%; 4418 height: 100%; 4419 border: 1px solid rgba(0, 0, 0, 0.2); 4420 border-radius: 50%; 4421 } 4422 4423 .components-button.has-icon.has-text .components-swatch { 4424 margin-left: 8px; 4425 } 4426 4427 .components-tab-panel__tabs { 4428 display: flex; 4429 align-items: stretch; 4430 flex-direction: row; 4431 } 4432 .components-tab-panel__tabs[aria-orientation=vertical] { 4433 flex-direction: column; 4434 } 4435 4436 .components-tab-panel__tabs-item { 4437 background: transparent; 4438 border: none; 4439 box-shadow: none; 4440 border-radius: 0; 4441 cursor: pointer; 4442 height: 48px; 4443 padding: 3px 16px; 4444 margin-right: 0; 4445 font-weight: 500; 4446 transition: box-shadow 0.1s linear; 4447 box-sizing: border-box; 4448 } 4449 .components-tab-panel__tabs-item::after { 4450 content: attr(data-label); 4451 display: block; 4452 height: 0; 4453 overflow: hidden; 4454 speak: none; 4455 visibility: hidden; 4456 } 4457 .components-tab-panel__tabs-item:focus:not(:disabled) { 4458 box-shadow: inset 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); 4459 } 4460 .components-tab-panel__tabs-item.is-active { 4461 box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) transparent, inset 0 -4px 0 0 var(--wp-admin-theme-color); 4462 position: relative; 4463 } 4464 .components-tab-panel__tabs-item.is-active::before { 4465 content: ""; 4466 position: absolute; 4467 top: 0; 4468 bottom: 1px; 4469 left: 0; 4470 right: 0; 4471 border-bottom: 4px solid transparent; 4472 } 4473 .components-tab-panel__tabs-item:focus { 4474 box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); 4475 } 4476 .components-tab-panel__tabs-item.is-active:focus { 4477 box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 -4px 0 0 var(--wp-admin-theme-color); 4478 } 4479 4480 .components-text-control__input, 4481 .components-text-control__input[type=text], 4482 .components-text-control__input[type=tel], 4483 .components-text-control__input[type=time], 4484 .components-text-control__input[type=url], 4485 .components-text-control__input[type=week], 4486 .components-text-control__input[type=password], 4487 .components-text-control__input[type=color], 4488 .components-text-control__input[type=date], 4489 .components-text-control__input[type=datetime], 4490 .components-text-control__input[type=datetime-local], 4491 .components-text-control__input[type=email], 4492 .components-text-control__input[type=month], 4493 .components-text-control__input[type=number] { 4494 width: 100%; 4495 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; 4496 padding: 6px 8px; 4497 box-shadow: 0 0 0 transparent; 4498 transition: box-shadow 0.1s linear; 4499 border-radius: 2px; 4500 border: 1px solid #757575; 4501 /* Fonts smaller than 16px causes mobile safari to zoom. */ 4502 font-size: 16px; 4503 /* Override core line-height. To be reviewed. */ 4504 line-height: normal; 4505 } 4506 @media (prefers-reduced-motion: reduce) { 4507 .components-text-control__input, 4508 .components-text-control__input[type=text], 4509 .components-text-control__input[type=tel], 4510 .components-text-control__input[type=time], 4511 .components-text-control__input[type=url], 4512 .components-text-control__input[type=week], 4513 .components-text-control__input[type=password], 4514 .components-text-control__input[type=color], 4515 .components-text-control__input[type=date], 4516 .components-text-control__input[type=datetime], 4517 .components-text-control__input[type=datetime-local], 4518 .components-text-control__input[type=email], 4519 .components-text-control__input[type=month], 4520 .components-text-control__input[type=number] { 4521 transition-duration: 0s; 4522 transition-delay: 0s; 4523 } 4524 } 4525 @media (min-width: 600px) { 4526 .components-text-control__input, 4527 .components-text-control__input[type=text], 4528 .components-text-control__input[type=tel], 4529 .components-text-control__input[type=time], 4530 .components-text-control__input[type=url], 4531 .components-text-control__input[type=week], 4532 .components-text-control__input[type=password], 4533 .components-text-control__input[type=color], 4534 .components-text-control__input[type=date], 4535 .components-text-control__input[type=datetime], 4536 .components-text-control__input[type=datetime-local], 4537 .components-text-control__input[type=email], 4538 .components-text-control__input[type=month], 4539 .components-text-control__input[type=number] { 4540 font-size: 13px; 4541 /* Override core line-height. To be reviewed. */ 4542 line-height: normal; 4543 } 4544 } 4545 .components-text-control__input:focus, 4546 .components-text-control__input[type=text]:focus, 4547 .components-text-control__input[type=tel]:focus, 4548 .components-text-control__input[type=time]:focus, 4549 .components-text-control__input[type=url]:focus, 4550 .components-text-control__input[type=week]:focus, 4551 .components-text-control__input[type=password]:focus, 4552 .components-text-control__input[type=color]:focus, 4553 .components-text-control__input[type=date]:focus, 4554 .components-text-control__input[type=datetime]:focus, 4555 .components-text-control__input[type=datetime-local]:focus, 4556 .components-text-control__input[type=email]:focus, 4557 .components-text-control__input[type=month]:focus, 4558 .components-text-control__input[type=number]:focus { 4559 border-color: var(--wp-admin-theme-color); 4560 box-shadow: 0 0 0 1px var(--wp-admin-theme-color); 4561 outline: 2px solid transparent; 4562 } 4563 .components-text-control__input::-webkit-input-placeholder, 4564 .components-text-control__input[type=text]::-webkit-input-placeholder, 4565 .components-text-control__input[type=tel]::-webkit-input-placeholder, 4566 .components-text-control__input[type=time]::-webkit-input-placeholder, 4567 .components-text-control__input[type=url]::-webkit-input-placeholder, 4568 .components-text-control__input[type=week]::-webkit-input-placeholder, 4569 .components-text-control__input[type=password]::-webkit-input-placeholder, 4570 .components-text-control__input[type=color]::-webkit-input-placeholder, 4571 .components-text-control__input[type=date]::-webkit-input-placeholder, 4572 .components-text-control__input[type=datetime]::-webkit-input-placeholder, 4573 .components-text-control__input[type=datetime-local]::-webkit-input-placeholder, 4574 .components-text-control__input[type=email]::-webkit-input-placeholder, 4575 .components-text-control__input[type=month]::-webkit-input-placeholder, 4576 .components-text-control__input[type=number]::-webkit-input-placeholder { 4577 color: rgba(30, 30, 30, 0.62); 4578 } 4579 .components-text-control__input::-moz-placeholder, 4580 .components-text-control__input[type=text]::-moz-placeholder, 4581 .components-text-control__input[type=tel]::-moz-placeholder, 4582 .components-text-control__input[type=time]::-moz-placeholder, 4583 .components-text-control__input[type=url]::-moz-placeholder, 4584 .components-text-control__input[type=week]::-moz-placeholder, 4585 .components-text-control__input[type=password]::-moz-placeholder, 4586 .components-text-control__input[type=color]::-moz-placeholder, 4587 .components-text-control__input[type=date]::-moz-placeholder, 4588 .components-text-control__input[type=datetime]::-moz-placeholder, 4589 .components-text-control__input[type=datetime-local]::-moz-placeholder, 4590 .components-text-control__input[type=email]::-moz-placeholder, 4591 .components-text-control__input[type=month]::-moz-placeholder, 4592 .components-text-control__input[type=number]::-moz-placeholder { 4593 opacity: 1; 4594 color: rgba(30, 30, 30, 0.62); 4595 } 4596 .components-text-control__input:-ms-input-placeholder, 4597 .components-text-control__input[type=text]:-ms-input-placeholder, 4598 .components-text-control__input[type=tel]:-ms-input-placeholder, 4599 .components-text-control__input[type=time]:-ms-input-placeholder, 4600 .components-text-control__input[type=url]:-ms-input-placeholder, 4601 .components-text-control__input[type=week]:-ms-input-placeholder, 4602 .components-text-control__input[type=password]:-ms-input-placeholder, 4603 .components-text-control__input[type=color]:-ms-input-placeholder, 4604 .components-text-control__input[type=date]:-ms-input-placeholder, 4605 .components-text-control__input[type=datetime]:-ms-input-placeholder, 4606 .components-text-control__input[type=datetime-local]:-ms-input-placeholder, 4607 .components-text-control__input[type=email]:-ms-input-placeholder, 4608 .components-text-control__input[type=month]:-ms-input-placeholder, 4609 .components-text-control__input[type=number]:-ms-input-placeholder { 4610 color: rgba(30, 30, 30, 0.62); 4611 } 4612 4613 .components-tip { 4614 display: flex; 4615 color: #757575; 4616 } 4617 .components-tip svg { 4618 align-self: center; 4619 fill: #f0b849; 4620 flex-shrink: 0; 4621 margin-left: 16px; 4622 } 4623 .components-tip p { 4624 margin: 0; 4625 } 4626 4627 .components-toggle-control .components-base-control__field { 4628 display: flex; 4629 margin-bottom: 12px; 4630 line-height: initial; 4631 align-items: center; 4632 } 4633 .components-toggle-control .components-base-control__field .components-form-toggle { 4634 margin-left: 12px; 4635 } 4636 .components-toggle-control .components-base-control__field .components-toggle-control__label { 4637 display: block; 4638 } 4639 4640 .components-accessible-toolbar { 4641 display: inline-flex; 4642 border: 1px solid #1e1e1e; 4643 border-radius: 2px; 4644 flex-shrink: 0; 4645 } 4646 .components-accessible-toolbar > .components-toolbar-group:last-child { 4647 border-left: none; 4648 } 4649 4650 .components-accessible-toolbar .components-button, 4651 .components-toolbar .components-button { 4652 position: relative; 4653 height: 48px; 4654 z-index: 1; 4655 padding-right: 16px; 4656 padding-left: 16px; 4657 } 4658 .components-accessible-toolbar .components-button:focus:enabled, 4659 .components-toolbar .components-button:focus:enabled { 4660 box-shadow: none; 4661 outline: none; 4662 } 4663 .components-accessible-toolbar .components-button::before, 4664 .components-toolbar .components-button::before { 4665 content: ""; 4666 position: absolute; 4667 display: block; 4668 border-radius: 2px; 4669 height: 32px; 4670 right: 8px; 4671 left: 8px; 4672 z-index: -1; 4673 animation: components-button__appear-animation 0.1s ease; 4674 animation-fill-mode: forwards; 4675 } 4676 @media (prefers-reduced-motion: reduce) { 4677 .components-accessible-toolbar .components-button::before, 4678 .components-toolbar .components-button::before { 4679 animation-duration: 1ms; 4680 animation-delay: 0s; 4681 } 4682 } 4683 .components-accessible-toolbar .components-button svg, 4684 .components-toolbar .components-button svg { 4685 position: relative; 4686 margin-right: auto; 4687 margin-left: auto; 4688 } 4689 .components-accessible-toolbar .components-button.is-pressed, 4690 .components-toolbar .components-button.is-pressed { 4691 background: transparent; 4692 } 4693 .components-accessible-toolbar .components-button.is-pressed:hover, 4694 .components-toolbar .components-button.is-pressed:hover { 4695 background: transparent; 4696 } 4697 .components-accessible-toolbar .components-button.is-pressed::before, 4698 .components-toolbar .components-button.is-pressed::before { 4699 background: #1e1e1e; 4700 } 4701 .components-accessible-toolbar .components-button:focus::before, 4702 .components-toolbar .components-button:focus::before { 4703 box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 4px #fff; 4704 outline: 2px solid transparent; 4705 } 4706 .components-accessible-toolbar .components-button.has-icon, 4707 .components-toolbar .components-button.has-icon { 4708 padding-right: 8px; 4709 padding-left: 8px; 4710 min-width: 48px; 4711 justify-content: center; 4712 } 4713 .components-accessible-toolbar .components-button.components-tab-button, 4714 .components-toolbar .components-button.components-tab-button { 4715 font-weight: 500; 4716 } 4717 .components-accessible-toolbar .components-button.components-tab-button span, 4718 .components-toolbar .components-button.components-tab-button span { 4719 display: inline-block; 4720 padding-right: 0; 4721 padding-left: 0; 4722 position: relative; 4723 } 4724 4725 @keyframes components-button__appear-animation { 4726 from { 4727 transform: scaleY(0); 4728 } 4729 to { 4730 transform: scaleY(1); 4731 } 4732 } 4733 .components-toolbar__control.components-button { 4734 position: relative; 4735 } 4736 .components-toolbar__control.components-button[data-subscript] svg { 4737 padding: 5px 0 5px 10px; 4738 } 4739 .components-toolbar__control.components-button[data-subscript]::after { 4740 content: attr(data-subscript); 4741 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; 4742 font-size: 13px; 4743 font-weight: 600; 4744 line-height: 12px; 4745 position: absolute; 4746 left: 8px; 4747 bottom: 10px; 4748 } 4749 .components-toolbar__control.components-button:active::before { 4750 display: none; 4751 } 4752 .components-toolbar__control.components-button:not(:disabled).is-pressed[data-subscript]::after { 4753 color: #fff; 4754 } 4755 4756 .components-toolbar-group { 4757 min-height: 48px; 4758 border-left: 1px solid #1e1e1e; 4759 background-color: #fff; 4760 display: inline-flex; 4761 flex-shrink: 0; 4762 flex-wrap: wrap; 4763 line-height: 0; 4764 } 4765 .components-toolbar-group .components-toolbar-group.components-toolbar-group { 4766 border-width: 0; 4767 margin: 0; 4768 } 4769 4770 .components-toolbar { 4771 min-height: 48px; 4772 margin: 0; 4773 border: 1px solid #1e1e1e; 4774 background-color: #fff; 4775 display: inline-flex; 4776 flex-shrink: 0; 4777 flex-wrap: wrap; 4778 } 4779 .components-toolbar .components-toolbar.components-toolbar { 4780 border-width: 0; 4781 margin: 0; 4782 } 4783 4784 div.components-toolbar > div { 4785 display: block; 4786 margin: 0; 4787 } 4788 @supports (position: sticky) { 4789 div.components-toolbar > div { 4790 display: flex; 4791 } 4792 } 4793 div.components-toolbar > div + div.has-left-divider { 4794 margin-right: 6px; 4795 position: relative; 4796 overflow: visible; 4797 } 4798 div.components-toolbar > div + div.has-left-divider::before { 4799 display: inline-block; 4800 content: ""; 4801 box-sizing: content-box; 4802 background-color: #ddd; 4803 position: absolute; 4804 top: 8px; 4805 right: -3px; 4806 width: 1px; 4807 height: 20px; 4808 } 4809 4810 .block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > .components-button:first-child:last-child, 4811 .block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > .components-dropdown:first-child:last-child .components-button, .block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot.components-dropdown > .components-button.components-button, .block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot.components-dropdown > * .components-button, 4812 .block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > .components-button:first-child:last-child, 4813 .block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > .components-dropdown:first-child:last-child .components-button, 4814 .block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot.components-dropdown > .components-button.components-button, 4815 .block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot.components-dropdown > * .components-button, 4816 .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > .components-button:first-child:last-child, 4817 .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > .components-dropdown:first-child:last-child .components-button, 4818 .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar.components-dropdown > .components-button.components-button, 4819 .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar.components-dropdown > * .components-button, 4820 .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > .components-button:first-child:last-child, 4821 .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > .components-dropdown:first-child:last-child .components-button, 4822 .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown.components-dropdown > .components-button.components-button, 4823 .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown.components-dropdown > * .components-button, 4824 .block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > .components-button:first-child:last-child, 4825 .block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > .components-dropdown:first-child:last-child .components-button, 4826 .block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group.components-dropdown > .components-button.components-button, 4827 .block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group.components-dropdown > * .components-button { 4828 min-width: 48px; 4829 padding-right: 12px; 4830 padding-left: 12px; 4831 } 4832 .block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > .components-button:first-child:last-child::before, 4833 .block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > .components-dropdown:first-child:last-child .components-button::before, .block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot.components-dropdown > .components-button.components-button::before, .block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot.components-dropdown > * .components-button::before, 4834 .block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > .components-button:first-child:last-child::before, 4835 .block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > .components-dropdown:first-child:last-child .components-button::before, 4836 .block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot.components-dropdown > .components-button.components-button::before, 4837 .block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot.components-dropdown > * .components-button::before, 4838 .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > .components-button:first-child:last-child::before, 4839 .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > .components-dropdown:first-child:last-child .components-button::before, 4840 .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar.components-dropdown > .components-button.components-button::before, 4841 .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar.components-dropdown > * .components-button::before, 4842 .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > .components-button:first-child:last-child::before, 4843 .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > .components-dropdown:first-child:last-child .components-button::before, 4844 .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown.components-dropdown > .components-button.components-button::before, 4845 .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown.components-dropdown > * .components-button::before, 4846 .block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > .components-button:first-child:last-child::before, 4847 .block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > .components-dropdown:first-child:last-child .components-button::before, 4848 .block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group.components-dropdown > .components-button.components-button::before, 4849 .block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group.components-dropdown > * .components-button::before { 4850 right: 8px; 4851 left: 8px; 4852 } 4853 .block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > .components-button:first-child, 4854 .block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > div:first-child > .components-button, 4855 .block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > .components-dropdown:first-child .components-button, 4856 .block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > .components-button:first-child, 4857 .block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > div:first-child > .components-button, 4858 .block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > .components-dropdown:first-child .components-button, 4859 .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > .components-button:first-child, 4860 .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > div:first-child > .components-button, 4861 .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > .components-dropdown:first-child .components-button, 4862 .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > .components-button:first-child, 4863 .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > div:first-child > .components-button, 4864 .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > .components-dropdown:first-child .components-button, 4865 .block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > .components-button:first-child, 4866 .block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > div:first-child > .components-button, 4867 .block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > .components-dropdown:first-child .components-button { 4868 min-width: 42px; 4869 padding-right: 11px; 4870 padding-left: 6px; 4871 } 4872 .block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > .components-button:first-child::before, 4873 .block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > div:first-child > .components-button::before, 4874 .block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > .components-dropdown:first-child .components-button::before, 4875 .block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > .components-button:first-child::before, 4876 .block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > div:first-child > .components-button::before, 4877 .block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > .components-dropdown:first-child .components-button::before, 4878 .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > .components-button:first-child::before, 4879 .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > div:first-child > .components-button::before, 4880 .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > .components-dropdown:first-child .components-button::before, 4881 .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > .components-button:first-child::before, 4882 .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > div:first-child > .components-button::before, 4883 .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > .components-dropdown:first-child .components-button::before, 4884 .block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > .components-button:first-child::before, 4885 .block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > div:first-child > .components-button::before, 4886 .block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > .components-dropdown:first-child .components-button::before { 4887 right: 8px; 4888 left: 2px; 4889 } 4890 .block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > .components-button, 4891 .block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > div > .components-button, 4892 .block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > .components-dropdown .components-button, 4893 .block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > .components-button, 4894 .block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > div > .components-button, 4895 .block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > .components-dropdown .components-button, 4896 .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > .components-button, 4897 .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > div > .components-button, 4898 .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > .components-dropdown .components-button, 4899 .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > .components-button, 4900 .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > div > .components-button, 4901 .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > .components-dropdown .components-button, 4902 .block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > .components-button, 4903 .block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > div > .components-button, 4904 .block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > .components-dropdown .components-button { 4905 min-width: 36px; 4906 padding-right: 6px; 4907 padding-left: 6px; 4908 } 4909 .block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > .components-button svg, 4910 .block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > div > .components-button svg, 4911 .block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > .components-dropdown .components-button svg, 4912 .block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > .components-button svg, 4913 .block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > div > .components-button svg, 4914 .block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > .components-dropdown .components-button svg, 4915 .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > .components-button svg, 4916 .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > div > .components-button svg, 4917 .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > .components-dropdown .components-button svg, 4918 .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > .components-button svg, 4919 .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > div > .components-button svg, 4920 .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > .components-dropdown .components-button svg, 4921 .block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > .components-button svg, 4922 .block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > div > .components-button svg, 4923 .block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > .components-dropdown .components-button svg { 4924 min-width: 24px; 4925 } 4926 .block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > .components-button::before, 4927 .block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > div > .components-button::before, 4928 .block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > .components-dropdown .components-button::before, 4929 .block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > .components-button::before, 4930 .block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > div > .components-button::before, 4931 .block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > .components-dropdown .components-button::before, 4932 .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > .components-button::before, 4933 .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > div > .components-button::before, 4934 .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > .components-dropdown .components-button::before, 4935 .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > .components-button::before, 4936 .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > div > .components-button::before, 4937 .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > .components-dropdown .components-button::before, 4938 .block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > .components-button::before, 4939 .block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > div > .components-button::before, 4940 .block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > .components-dropdown .components-button::before { 4941 right: 2px; 4942 left: 2px; 4943 } 4944 .block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > .components-button:last-child, 4945 .block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > div:last-child > .components-button, 4946 .block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > .components-dropdown:last-child .components-button, 4947 .block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > .components-button:last-child, 4948 .block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > div:last-child > .components-button, 4949 .block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > .components-dropdown:last-child .components-button, 4950 .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > .components-button:last-child, 4951 .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > div:last-child > .components-button, 4952 .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > .components-dropdown:last-child .components-button, 4953 .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > .components-button:last-child, 4954 .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > div:last-child > .components-button, 4955 .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > .components-dropdown:last-child .components-button, 4956 .block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > .components-button:last-child, 4957 .block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > div:last-child > .components-button, 4958 .block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > .components-dropdown:last-child .components-button { 4959 min-width: 42px; 4960 padding-right: 6px; 4961 padding-left: 11px; 4962 } 4963 .block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > .components-button:last-child::before, 4964 .block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > div:last-child > .components-button::before, 4965 .block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > .components-dropdown:last-child .components-button::before, 4966 .block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > .components-button:last-child::before, 4967 .block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > div:last-child > .components-button::before, 4968 .block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > .components-dropdown:last-child .components-button::before, 4969 .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > .components-button:last-child::before, 4970 .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > div:last-child > .components-button::before, 4971 .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > .components-dropdown:last-child .components-button::before, 4972 .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > .components-button:last-child::before, 4973 .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > div:last-child > .components-button::before, 4974 .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > .components-dropdown:last-child .components-button::before, 4975 .block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > .components-button:last-child::before, 4976 .block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > div:last-child > .components-button::before, 4977 .block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > .components-dropdown:last-child .components-button::before { 4978 right: 2px; 4979 left: 8px; 4980 } 4981 4982 .components-tooltip.components-popover { 4983 z-index: 1000002; 4984 } 4985 .components-tooltip.components-popover .components-popover__content { 4986 min-width: 0; 4987 } 4988 4989 .components-tooltip .components-popover__content { 4990 background: #1e1e1e; 4991 border-radius: 2px; 4992 border-width: 0; 4993 color: #fff; 4994 white-space: nowrap; 4995 text-align: center; 4996 line-height: 1.4; 4997 font-size: 12px; 4998 box-shadow: none; 4999 } 5000 .components-tooltip .components-popover__content > div { 5001 padding: 4px 8px; 5002 } 5003 5004 .components-tooltip__shortcut { 5005 display: inline-block; 5006 margin-right: 8px; 5007 } 5008 5009 .disabled-element-wrapper { 5010 position: relative; 5011 } 5012 .disabled-element-wrapper .event-catcher { 5013 z-index: 100002; 5014 position: absolute; 5015 width: 100%; 5016 height: 100%; 5017 top: 0; 5018 right: 0; 5019 bottom: 0; 5020 left: 0; 5021 } 5022 5023 .components-visually-hidden { 5024 border: 0; 5025 clip: rect(1px, 1px, 1px, 1px); 5026 -webkit-clip-path: inset(50%); 5027 clip-path: inset(50%); 5028 height: 1px; 5029 margin: -1px; 5030 overflow: hidden; 5031 padding: 0; 5032 position: absolute; 5033 width: 1px; 5034 word-wrap: normal !important; 5035 } 5036 5037 .components-visually-hidden:focus { 5038 background-color: #ddd; 5039 clip: auto !important; 5040 -webkit-clip-path: none; 5041 clip-path: none; 5042 color: #444; 5043 display: block; 5044 font-size: 1em; 5045 height: auto; 5046 right: 5px; 5047 line-height: normal; 5048 padding: 15px 23px 14px; 5049 text-decoration: none; 5050 top: 5px; 5051 width: auto; 5052 z-index: 100000; 5053 }