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