[Summary view] [Print] [Text view]

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