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