style-rtl.css (25035B)
1 /** 2 * Colors 3 */ 4 /** 5 * Breakpoints & Media Queries 6 */ 7 /** 8 * SCSS Variables. 9 * 10 * Please use variables from this sheet to ensure consistency across the UI. 11 * Don't add to this sheet unless you're pretty sure the value will be reused in many places. 12 * For example, don't add rules to this sheet that affect block visuals. It's purely for UI. 13 */ 14 /** 15 * Colors 16 */ 17 /** 18 * Fonts & basic variables. 19 */ 20 /** 21 * Grid System. 22 * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/ 23 */ 24 /** 25 * Dimensions. 26 */ 27 /** 28 * Shadows. 29 */ 30 /** 31 * Editor widths. 32 */ 33 /** 34 * Block & Editor UI. 35 */ 36 /** 37 * Block paddings. 38 */ 39 /** 40 * React Native specific. 41 * These variables do not appear to be used anywhere else. 42 */ 43 /** 44 * Breakpoint mixins 45 */ 46 /** 47 * Long content fade mixin 48 * 49 * Creates a fading overlay to signify that the content is longer 50 * than the space allows. 51 */ 52 /** 53 * Focus styles. 54 */ 55 /** 56 * Applies editor left position to the selector passed as argument 57 */ 58 /** 59 * Styles that are reused verbatim in a few places 60 */ 61 /** 62 * Allows users to opt-out of animations via OS-level preferences. 63 */ 64 /** 65 * Reset default styles for JavaScript UI based pages. 66 * This is a WP-admin agnostic reset 67 */ 68 /** 69 * Reset the WP Admin page styles for Gutenberg-like pages. 70 */ 71 :root { 72 --wp-admin-theme-color: #007cba; 73 --wp-admin-theme-color-darker-10: #006ba1; 74 --wp-admin-theme-color-darker-20: #005a87; 75 --wp-admin-border-width-focus: 2px; 76 } 77 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 78 :root { 79 --wp-admin-border-width-focus: 1.5px; 80 } 81 } 82 83 .components-panel__header.interface-complementary-area-header__small { 84 background: #fff; 85 padding-left: 4px; 86 } 87 .components-panel__header.interface-complementary-area-header__small .interface-complementary-area-header__small-title { 88 overflow: hidden; 89 text-overflow: ellipsis; 90 white-space: nowrap; 91 width: 100%; 92 } 93 @media (min-width: 782px) { 94 .components-panel__header.interface-complementary-area-header__small { 95 display: none; 96 } 97 } 98 99 .interface-complementary-area-header { 100 background: #fff; 101 padding-left: 4px; 102 } 103 .interface-complementary-area-header .components-button.has-icon { 104 display: none; 105 margin-right: auto; 106 } 107 .interface-complementary-area-header .components-button.has-icon ~ .components-button { 108 margin-right: 0; 109 } 110 @media (min-width: 782px) { 111 .interface-complementary-area-header .components-button.has-icon { 112 display: flex; 113 } 114 } 115 116 .interface-complementary-area { 117 background: #fff; 118 color: #1e1e1e; 119 } 120 @media (min-width: 600px) { 121 .interface-complementary-area { 122 -webkit-overflow-scrolling: touch; 123 } 124 } 125 @media (min-width: 782px) { 126 .interface-complementary-area { 127 width: 280px; 128 } 129 } 130 .interface-complementary-area .components-panel { 131 border: none; 132 position: relative; 133 z-index: 0; 134 } 135 .interface-complementary-area .components-panel__header { 136 position: sticky; 137 top: 0; 138 z-index: 1; 139 } 140 .interface-complementary-area .components-panel__header.edit-post-sidebar__panel-tabs { 141 top: 48px; 142 } 143 @media (min-width: 782px) { 144 .interface-complementary-area .components-panel__header.edit-post-sidebar__panel-tabs { 145 top: 0; 146 } 147 } 148 .interface-complementary-area p { 149 margin-top: 0; 150 } 151 .interface-complementary-area h2, 152 .interface-complementary-area h3 { 153 font-size: 13px; 154 color: #1e1e1e; 155 margin-bottom: 1.5em; 156 } 157 .interface-complementary-area hr { 158 border-top: none; 159 border-bottom: 1px solid #f0f0f0; 160 margin: 1.5em 0; 161 } 162 .interface-complementary-area div.components-toolbar-group, 163 .interface-complementary-area div.components-toolbar { 164 box-shadow: none; 165 margin-bottom: 1.5em; 166 } 167 .interface-complementary-area div.components-toolbar-group:last-child, 168 .interface-complementary-area div.components-toolbar:last-child { 169 margin-bottom: 0; 170 } 171 .interface-complementary-area .block-editor-skip-to-selected-block:focus { 172 top: auto; 173 left: 10px; 174 bottom: 10px; 175 right: auto; 176 } 177 178 @media (min-width: 782px) { 179 body.js.is-fullscreen-mode { 180 margin-top: -32px; 181 height: calc(100% + 32px); 182 } 183 body.js.is-fullscreen-mode #adminmenumain, 184 body.js.is-fullscreen-mode #wpadminbar { 185 display: none; 186 } 187 body.js.is-fullscreen-mode #wpcontent, 188 body.js.is-fullscreen-mode #wpfooter { 189 margin-right: 0; 190 } 191 } 192 193 html.interface-interface-skeleton__html-container { 194 position: fixed; 195 width: 100%; 196 } 197 @media (min-width: 782px) { 198 html.interface-interface-skeleton__html-container { 199 position: initial; 200 width: initial; 201 } 202 } 203 204 .interface-interface-skeleton { 205 display: flex; 206 flex-direction: row; 207 height: auto; 208 max-height: 100%; 209 position: fixed; 210 top: 46px; 211 right: 0; 212 left: 0; 213 bottom: 0; 214 } 215 @media (min-width: 783px) { 216 .interface-interface-skeleton { 217 top: 32px; 218 } 219 .is-fullscreen-mode .interface-interface-skeleton { 220 top: 0; 221 } 222 } 223 224 .interface-interface-skeleton__editor { 225 display: flex; 226 flex-direction: column; 227 flex: 0 1 100%; 228 overflow: hidden; 229 } 230 231 .interface-interface-skeleton { 232 /* Set left position when auto-fold is not on the body element. */ 233 right: 0; 234 } 235 @media (min-width: 783px) { 236 .interface-interface-skeleton { 237 right: 160px; 238 } 239 } 240 241 .auto-fold .interface-interface-skeleton { 242 /* Auto fold is when on smaller breakpoints, nav menu auto collapses. */ 243 } 244 @media (min-width: 783px) { 245 .auto-fold .interface-interface-skeleton { 246 right: 36px; 247 } 248 } 249 @media (min-width: 961px) { 250 .auto-fold .interface-interface-skeleton { 251 right: 160px; 252 } 253 } 254 255 /* Sidebar manually collapsed. */ 256 .folded .interface-interface-skeleton { 257 right: 0; 258 } 259 @media (min-width: 783px) { 260 .folded .interface-interface-skeleton { 261 right: 36px; 262 } 263 } 264 265 body.is-fullscreen-mode .interface-interface-skeleton { 266 right: 0 !important; 267 } 268 269 .interface-interface-skeleton__body { 270 flex-grow: 1; 271 display: flex; 272 overflow: auto; 273 overscroll-behavior-y: none; 274 } 275 @media (min-width: 782px) { 276 .has-footer .interface-interface-skeleton__body { 277 padding-bottom: 25px; 278 } 279 } 280 281 .interface-interface-skeleton__content { 282 flex-grow: 1; 283 display: flex; 284 flex-direction: column; 285 overflow: auto; 286 z-index: 20; 287 } 288 289 .interface-interface-skeleton__secondary-sidebar, 290 .interface-interface-skeleton__sidebar { 291 display: block; 292 flex-shrink: 0; 293 position: absolute; 294 z-index: 100000; 295 top: 0; 296 left: 0; 297 bottom: 0; 298 right: 0; 299 background: #fff; 300 color: #1e1e1e; 301 } 302 @media (min-width: 782px) { 303 .interface-interface-skeleton__secondary-sidebar, 304 .interface-interface-skeleton__sidebar { 305 position: relative !important; 306 z-index: 90; 307 width: auto; 308 } 309 } 310 311 .interface-interface-skeleton__sidebar { 312 overflow: auto; 313 } 314 @media (min-width: 782px) { 315 .interface-interface-skeleton__sidebar { 316 border-right: 1px solid #e0e0e0; 317 } 318 } 319 320 @media (min-width: 782px) { 321 .interface-interface-skeleton__secondary-sidebar { 322 border-left: 1px solid #e0e0e0; 323 } 324 } 325 326 .interface-interface-skeleton__header { 327 flex-shrink: 0; 328 height: auto; 329 border-bottom: 1px solid #e0e0e0; 330 z-index: 30; 331 color: #1e1e1e; 332 } 333 334 .interface-interface-skeleton__footer { 335 height: auto; 336 flex-shrink: 0; 337 border-top: 1px solid #e0e0e0; 338 color: #1e1e1e; 339 position: absolute; 340 bottom: 0; 341 right: 0; 342 width: 100%; 343 background-color: #fff; 344 z-index: 90; 345 display: none; 346 } 347 @media (min-width: 782px) { 348 .interface-interface-skeleton__footer { 349 display: flex; 350 } 351 } 352 .interface-interface-skeleton__footer .block-editor-block-breadcrumb { 353 z-index: 30; 354 display: flex; 355 background: #fff; 356 height: 24px; 357 align-items: center; 358 font-size: 13px; 359 padding: 0 18px; 360 } 361 362 .interface-interface-skeleton__actions { 363 z-index: 100000; 364 position: fixed !important; 365 top: -9999em; 366 bottom: auto; 367 right: auto; 368 left: 0; 369 width: 280px; 370 color: #1e1e1e; 371 } 372 .interface-interface-skeleton__actions:focus { 373 top: auto; 374 bottom: 0; 375 } 376 377 .interface-pinned-items { 378 display: flex; 379 } 380 .interface-pinned-items .components-button:not(:first-child) { 381 display: none; 382 } 383 @media (min-width: 600px) { 384 .interface-pinned-items .components-button:not(:first-child) { 385 display: flex; 386 } 387 } 388 .interface-pinned-items .components-button { 389 margin-right: 4px; 390 } 391 .interface-pinned-items .components-button svg { 392 max-width: 24px; 393 max-height: 24px; 394 } 395 396 .wp-block[data-type="core/widget-area"] { 397 max-width: 700px; 398 margin-right: auto; 399 margin-left: auto; 400 } 401 .wp-block[data-type="core/widget-area"] .components-panel__body > .components-panel__body-title { 402 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; 403 margin: 0; 404 height: 48px; 405 position: relative; 406 z-index: 1; 407 background: #fff; 408 transform: translateZ(0); 409 } 410 .wp-block[data-type="core/widget-area"] .components-panel__body > .components-panel__body-title:hover { 411 background: #fff; 412 } 413 .wp-block[data-type="core/widget-area"] .block-list-appender.wp-block { 414 width: initial; 415 } 416 .wp-block[data-type="core/widget-area"] .editor-styles-wrapper .wp-block.wp-block.wp-block.wp-block.wp-block { 417 max-width: 100%; 418 } 419 .wp-block[data-type="core/widget-area"] .components-panel__body.is-opened { 420 padding: 0; 421 } 422 423 .blocks-widgets-container .wp-block-widget-area__inner-blocks.editor-styles-wrapper { 424 margin: 0; 425 padding: 0; 426 } 427 .blocks-widgets-container .wp-block-widget-area__inner-blocks.editor-styles-wrapper > .block-editor-block-list__layout { 428 margin-top: -48px; 429 padding: 72px 16px 16px; 430 min-height: 32px; 431 } 432 433 .wp-block-widget-area__highlight-drop-zone { 434 outline: var(--wp-admin-border-width-focus) solid var(--wp-admin-theme-color); 435 } 436 437 body.is-dragging-components-draggable .wp-block[data-type="core/widget-area"] .components-panel__body > .components-panel__body-title, 438 body.is-dragging-components-draggable .wp-block[data-type="core/widget-area"] .components-panel__body > .components-panel__body-title * { 439 pointer-events: none; 440 } 441 442 .edit-widgets-error-boundary { 443 margin: auto; 444 max-width: 780px; 445 padding: 20px; 446 margin-top: 60px; 447 box-shadow: 0 10px 10px rgba(0, 0, 0, 0.25); 448 } 449 450 .edit-widgets-header { 451 display: flex; 452 align-items: center; 453 justify-content: space-between; 454 height: 60px; 455 padding: 0 16px; 456 overflow: auto; 457 } 458 @media (min-width: 600px) { 459 .edit-widgets-header { 460 overflow: visible; 461 } 462 } 463 464 .edit-widgets-header__navigable-toolbar-wrapper { 465 display: flex; 466 align-items: center; 467 justify-content: center; 468 } 469 470 .edit-widgets-header__title { 471 font-size: 20px; 472 padding: 0; 473 margin: 0 0 0 20px; 474 } 475 476 .edit-widgets-header__actions { 477 display: flex; 478 } 479 .edit-widgets-header__actions .components-button { 480 margin-left: 4px; 481 } 482 @media (min-width: 600px) { 483 .edit-widgets-header__actions .components-button { 484 margin-left: 12px; 485 } 486 } 487 .edit-widgets-header__actions .edit-widgets-more-menu .components-button, 488 .edit-widgets-header__actions .interface-pinned-items .components-button { 489 margin-left: 0; 490 } 491 492 .edit-widgets-header-toolbar { 493 border: none; 494 } 495 .edit-widgets-header-toolbar > .components-button.has-icon, 496 .edit-widgets-header-toolbar > .components-dropdown > .components-button.has-icon { 497 height: 36px; 498 min-width: 36px; 499 padding: 6px; 500 } 501 .edit-widgets-header-toolbar > .components-button.has-icon.is-pressed, 502 .edit-widgets-header-toolbar > .components-dropdown > .components-button.has-icon.is-pressed { 503 background: #1e1e1e; 504 } 505 .edit-widgets-header-toolbar > .components-button.has-icon:focus:not(:disabled), 506 .edit-widgets-header-toolbar > .components-dropdown > .components-button.has-icon:focus:not(:disabled) { 507 box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 1px #fff; 508 outline: 1px solid transparent; 509 } 510 .edit-widgets-header-toolbar > .components-button.has-icon::before, 511 .edit-widgets-header-toolbar > .components-dropdown > .components-button.has-icon::before { 512 display: none; 513 } 514 515 .edit-widgets-header-toolbar__inserter-toggle.edit-widgets-header-toolbar__inserter-toggle { 516 padding-right: 8px; 517 padding-left: 8px; 518 } 519 @media (min-width: 600px) { 520 .edit-widgets-header-toolbar__inserter-toggle.edit-widgets-header-toolbar__inserter-toggle { 521 padding-right: 12px; 522 padding-left: 12px; 523 } 524 } 525 .edit-widgets-header-toolbar__inserter-toggle.edit-widgets-header-toolbar__inserter-toggle::after { 526 content: none; 527 } 528 529 .edit-widgets-keyboard-shortcut-help-modal__section { 530 margin: 0 0 2rem 0; 531 } 532 .edit-widgets-keyboard-shortcut-help-modal__main-shortcuts .edit-widgets-keyboard-shortcut-help-modal__shortcut-list { 533 margin-top: -25px; 534 } 535 .edit-widgets-keyboard-shortcut-help-modal__section-title { 536 font-size: 0.9rem; 537 font-weight: 600; 538 } 539 .edit-widgets-keyboard-shortcut-help-modal__shortcut { 540 display: flex; 541 align-items: baseline; 542 padding: 0.6rem 0; 543 border-top: 1px solid #ddd; 544 margin-bottom: 0; 545 } 546 .edit-widgets-keyboard-shortcut-help-modal__shortcut:last-child { 547 border-bottom: 1px solid #ddd; 548 } 549 .edit-widgets-keyboard-shortcut-help-modal__shortcut:empty { 550 display: none; 551 } 552 .edit-widgets-keyboard-shortcut-help-modal__shortcut-term { 553 font-weight: 600; 554 margin: 0 1rem 0 0; 555 text-align: left; 556 } 557 .edit-widgets-keyboard-shortcut-help-modal__shortcut-description { 558 flex: 1; 559 margin: 0; 560 flex-basis: auto; 561 } 562 .edit-widgets-keyboard-shortcut-help-modal__shortcut-key-combination { 563 display: block; 564 background: none; 565 margin: 0; 566 padding: 0; 567 } 568 .edit-widgets-keyboard-shortcut-help-modal__shortcut-key-combination + .edit-widgets-keyboard-shortcut-help-modal__shortcut-key-combination { 569 margin-top: 10px; 570 } 571 .edit-widgets-keyboard-shortcut-help-modal__shortcut-key { 572 padding: 0.25rem 0.5rem; 573 border-radius: 8%; 574 margin: 0 0.2rem 0 0.2rem; 575 } 576 .edit-widgets-keyboard-shortcut-help-modal__shortcut-key:last-child { 577 margin: 0 0.2rem 0 0; 578 } 579 580 .edit-widgets-more-menu { 581 margin-right: -4px; 582 } 583 .edit-widgets-more-menu .components-button { 584 width: auto; 585 padding: 0 2px; 586 } 587 @media (min-width: 600px) { 588 .edit-widgets-more-menu { 589 margin-right: 0; 590 } 591 .edit-widgets-more-menu .components-button { 592 padding: 0 4px; 593 } 594 } 595 596 .edit-widgets-more-menu__content .components-popover__content { 597 min-width: 280px; 598 } 599 @media (min-width: 480px) { 600 .edit-widgets-more-menu__content .components-popover__content { 601 width: auto; 602 max-width: 480px; 603 } 604 } 605 .edit-widgets-more-menu__content .components-popover__content .components-dropdown-menu__menu { 606 padding: 0; 607 } 608 609 .components-popover.edit-widgets-more-menu__content { 610 z-index: 99998; 611 } 612 613 .components-panel__header.edit-widgets-sidebar__panel-tabs { 614 justify-content: flex-start; 615 padding-right: 0; 616 padding-left: 4px; 617 border-top: 0; 618 margin-top: 0; 619 } 620 .components-panel__header.edit-widgets-sidebar__panel-tabs ul { 621 display: flex; 622 } 623 .components-panel__header.edit-widgets-sidebar__panel-tabs li { 624 margin: 0; 625 } 626 .components-panel__header.edit-widgets-sidebar__panel-tabs .components-button.has-icon { 627 display: none; 628 margin-right: auto; 629 } 630 @media (min-width: 782px) { 631 .components-panel__header.edit-widgets-sidebar__panel-tabs .components-button.has-icon { 632 display: flex; 633 } 634 } 635 636 .components-button.edit-widgets-sidebar__panel-tab { 637 border-radius: 0; 638 height: 49px; 639 background: transparent; 640 border: none; 641 box-shadow: none; 642 cursor: pointer; 643 display: inline-block; 644 padding: 3px 15px; 645 margin-right: 0; 646 font-weight: 400; 647 color: #1e1e1e; 648 } 649 .components-button.edit-widgets-sidebar__panel-tab::after { 650 content: attr(data-label); 651 display: block; 652 font-weight: 600; 653 height: 0; 654 overflow: hidden; 655 speak: none; 656 visibility: hidden; 657 } 658 .components-button.edit-widgets-sidebar__panel-tab.is-active { 659 box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) transparent, inset 0 -4px 0 0 var(--wp-admin-theme-color); 660 font-weight: 600; 661 position: relative; 662 } 663 .components-button.edit-widgets-sidebar__panel-tab.is-active::before { 664 content: ""; 665 position: absolute; 666 top: 0; 667 bottom: 1px; 668 left: 0; 669 right: 0; 670 border-bottom: 4px solid transparent; 671 } 672 .components-button.edit-widgets-sidebar__panel-tab:focus { 673 box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); 674 } 675 .components-button.edit-widgets-sidebar__panel-tab.is-active:focus { 676 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); 677 } 678 679 .edit-widgets-widget-areas__top-container { 680 display: flex; 681 padding: 16px; 682 } 683 .edit-widgets-widget-areas__top-container .block-editor-block-icon { 684 margin-left: 16px; 685 } 686 687 .edit-widgets-notices__snackbar { 688 position: fixed; 689 left: 0; 690 bottom: 20px; 691 padding-right: 16px; 692 padding-left: 16px; 693 } 694 695 .edit-widgets-notices__snackbar { 696 /* Set left position when auto-fold is not on the body element. */ 697 right: 0; 698 } 699 @media (min-width: 783px) { 700 .edit-widgets-notices__snackbar { 701 right: 160px; 702 } 703 } 704 705 .auto-fold .edit-widgets-notices__snackbar { 706 /* Auto fold is when on smaller breakpoints, nav menu auto collapses. */ 707 } 708 @media (min-width: 783px) { 709 .auto-fold .edit-widgets-notices__snackbar { 710 right: 36px; 711 } 712 } 713 @media (min-width: 961px) { 714 .auto-fold .edit-widgets-notices__snackbar { 715 right: 160px; 716 } 717 } 718 719 /* Sidebar manually collapsed. */ 720 .folded .edit-widgets-notices__snackbar { 721 right: 0; 722 } 723 @media (min-width: 783px) { 724 .folded .edit-widgets-notices__snackbar { 725 right: 36px; 726 } 727 } 728 729 body.is-fullscreen-mode .edit-widgets-notices__snackbar { 730 right: 0 !important; 731 } 732 733 .edit-widgets-notices__dismissible .components-notice, 734 .edit-widgets-notices__pinned .components-notice { 735 box-sizing: border-box; 736 margin: 0; 737 border-bottom: 1px solid rgba(0, 0, 0, 0.2); 738 padding: 0 12px; 739 min-height: 60px; 740 } 741 .edit-widgets-notices__dismissible .components-notice .components-notice__dismiss, 742 .edit-widgets-notices__pinned .components-notice .components-notice__dismiss { 743 margin-top: 12px; 744 } 745 746 .edit-widgets-layout__inserter-panel { 747 height: 100%; 748 display: flex; 749 flex-direction: column; 750 } 751 .edit-widgets-layout__inserter-panel .block-editor-inserter__menu { 752 overflow: hidden; 753 } 754 755 .edit-widgets-layout__inserter-panel-header { 756 padding-top: 8px; 757 padding-left: 8px; 758 display: flex; 759 justify-content: flex-end; 760 } 761 @media (min-width: 782px) { 762 .edit-widgets-layout__inserter-panel-header { 763 display: none; 764 } 765 } 766 767 .edit-widgets-layout__inserter-panel-content { 768 height: calc(100% - 36px - 8px); 769 } 770 @media (min-width: 782px) { 771 .edit-widgets-layout__inserter-panel-content { 772 height: 100%; 773 } 774 } 775 776 .edit-widgets-welcome-guide { 777 width: 312px; 778 } 779 .edit-widgets-welcome-guide__image { 780 background: #00a0d2; 781 margin: 0 0 16px; 782 } 783 .edit-widgets-welcome-guide__heading { 784 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; 785 font-size: 24px; 786 line-height: 1.4; 787 margin: 16px 0 16px 0; 788 padding: 0 32px; 789 } 790 .edit-widgets-welcome-guide__text { 791 font-size: 13px; 792 line-height: 1.4; 793 margin: 0 0 24px 0; 794 padding: 0 32px; 795 } 796 .edit-widgets-welcome-guide__inserter-icon { 797 margin: 0 4px; 798 vertical-align: text-top; 799 } 800 801 .edit-widgets-block-editor { 802 position: relative; 803 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; 804 display: flex; 805 flex-direction: column; 806 flex-grow: 1; 807 } 808 .edit-widgets-block-editor > div:last-of-type, 809 .edit-widgets-block-editor .block-editor-writing-flow, 810 .edit-widgets-block-editor .block-editor-writing-flow > div { 811 display: flex; 812 flex-direction: column; 813 flex-grow: 1; 814 } 815 .edit-widgets-block-editor .edit-widgets-main-block-list { 816 height: 100%; 817 } 818 .edit-widgets-block-editor .components-button { 819 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; 820 font-size: 13px; 821 } 822 .edit-widgets-block-editor .components-button.is-tertiary, .edit-widgets-block-editor .components-button.has-icon { 823 padding: 6px; 824 } 825 826 html.wp-toolbar { 827 background: #fff; 828 } 829 830 body.appearance_page_gutenberg-widgets, 831 body.widgets-php { 832 background: #fff; 833 /* We hide legacy notices in Gutenberg Based Pages, because they were not designed in a way that scaled well. 834 Plugins can use Gutenberg notices if they need to pass on information to the user when they are editing. */ 835 } 836 body.appearance_page_gutenberg-widgets #wpcontent, 837 body.widgets-php #wpcontent { 838 padding-right: 0; 839 } 840 body.appearance_page_gutenberg-widgets #wpbody-content, 841 body.widgets-php #wpbody-content { 842 padding-bottom: 0; 843 } 844 body.appearance_page_gutenberg-widgets #wpbody-content > div:not(.blocks-widgets-container):not(#screen-meta), 845 body.widgets-php #wpbody-content > div:not(.blocks-widgets-container):not(#screen-meta) { 846 display: none; 847 } 848 body.appearance_page_gutenberg-widgets #wpfooter, 849 body.widgets-php #wpfooter { 850 display: none; 851 } 852 body.appearance_page_gutenberg-widgets .a11y-speak-region, 853 body.widgets-php .a11y-speak-region { 854 right: -1px; 855 top: -1px; 856 } 857 body.appearance_page_gutenberg-widgets ul#adminmenu a.wp-has-current-submenu::after, 858 body.appearance_page_gutenberg-widgets ul#adminmenu > li.current > a.current::after, 859 body.widgets-php ul#adminmenu a.wp-has-current-submenu::after, 860 body.widgets-php ul#adminmenu > li.current > a.current::after { 861 border-left-color: #fff; 862 } 863 body.appearance_page_gutenberg-widgets .media-frame select.attachment-filters:last-of-type, 864 body.widgets-php .media-frame select.attachment-filters:last-of-type { 865 width: auto; 866 max-width: 100%; 867 } 868 869 .blocks-widgets-container, 870 .components-modal__frame { 871 box-sizing: border-box; 872 } 873 .blocks-widgets-container *, 874 .blocks-widgets-container *::before, 875 .blocks-widgets-container *::after, 876 .components-modal__frame *, 877 .components-modal__frame *::before, 878 .components-modal__frame *::after { 879 box-sizing: inherit; 880 } 881 882 @media (min-width: 600px) { 883 .blocks-widgets-container { 884 position: absolute; 885 top: 0; 886 left: 0; 887 bottom: 0; 888 right: 0; 889 min-height: calc(100vh - 46px); 890 } 891 } 892 @media (min-width: 782px) { 893 .blocks-widgets-container { 894 min-height: calc(100vh - 32px); 895 } 896 } 897 .blocks-widgets-container .interface-interface-skeleton__content { 898 background-color: #f0f0f0; 899 } 900 901 .blocks-widgets-container .editor-styles-wrapper { 902 max-width: 700px; 903 margin: auto; 904 } 905 906 .edit-widgets-sidebar .components-button.interface-complementary-area__pin-unpin-item { 907 display: none; 908 } 909 910 .widgets-php .notice { 911 display: none !important; 912 } 913 914 body.admin-color-light { 915 --wp-admin-theme-color: #0085ba; 916 --wp-admin-theme-color-darker-10: #0073a1; 917 --wp-admin-theme-color-darker-20: #006187; 918 --wp-admin-border-width-focus: 2px; 919 } 920 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 921 body.admin-color-light { 922 --wp-admin-border-width-focus: 1.5px; 923 } 924 } 925 926 body.admin-color-modern { 927 --wp-admin-theme-color: #3858e9; 928 --wp-admin-theme-color-darker-10: #2145e6; 929 --wp-admin-theme-color-darker-20: #183ad6; 930 --wp-admin-border-width-focus: 2px; 931 } 932 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 933 body.admin-color-modern { 934 --wp-admin-border-width-focus: 1.5px; 935 } 936 } 937 938 body.admin-color-blue { 939 --wp-admin-theme-color: #096484; 940 --wp-admin-theme-color-darker-10: #07526c; 941 --wp-admin-theme-color-darker-20: #064054; 942 --wp-admin-border-width-focus: 2px; 943 } 944 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 945 body.admin-color-blue { 946 --wp-admin-border-width-focus: 1.5px; 947 } 948 } 949 950 body.admin-color-coffee { 951 --wp-admin-theme-color: #46403c; 952 --wp-admin-theme-color-darker-10: #383330; 953 --wp-admin-theme-color-darker-20: #2b2724; 954 --wp-admin-border-width-focus: 2px; 955 } 956 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 957 body.admin-color-coffee { 958 --wp-admin-border-width-focus: 1.5px; 959 } 960 } 961 962 body.admin-color-ectoplasm { 963 --wp-admin-theme-color: #523f6d; 964 --wp-admin-theme-color-darker-10: #46365d; 965 --wp-admin-theme-color-darker-20: #3a2c4d; 966 --wp-admin-border-width-focus: 2px; 967 } 968 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 969 body.admin-color-ectoplasm { 970 --wp-admin-border-width-focus: 1.5px; 971 } 972 } 973 974 body.admin-color-midnight { 975 --wp-admin-theme-color: #e14d43; 976 --wp-admin-theme-color-darker-10: #dd382d; 977 --wp-admin-theme-color-darker-20: #d02c21; 978 --wp-admin-border-width-focus: 2px; 979 } 980 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 981 body.admin-color-midnight { 982 --wp-admin-border-width-focus: 1.5px; 983 } 984 } 985 986 body.admin-color-ocean { 987 --wp-admin-theme-color: #627c83; 988 --wp-admin-theme-color-darker-10: #576e74; 989 --wp-admin-theme-color-darker-20: #4c6066; 990 --wp-admin-border-width-focus: 2px; 991 } 992 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 993 body.admin-color-ocean { 994 --wp-admin-border-width-focus: 1.5px; 995 } 996 } 997 998 body.admin-color-sunrise { 999 --wp-admin-theme-color: #dd823b; 1000 --wp-admin-theme-color-darker-10: #d97426; 1001 --wp-admin-theme-color-darker-20: #c36922; 1002 --wp-admin-border-width-focus: 2px; 1003 } 1004 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 1005 body.admin-color-sunrise { 1006 --wp-admin-border-width-focus: 1.5px; 1007 } 1008 }