[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  }
 226  
 227  @media (min-width: 782px) {
 228    .interface-complementary-area {
 229      width: 280px;
 230    }
 231  }
 232  .interface-complementary-area .components-panel {
 233    border: none;
 234    position: relative;
 235    z-index: 0;
 236  }
 237  
 238  .interface-complementary-area .components-panel__header {
 239    position: sticky;
 240    top: 0;
 241    z-index: 1;
 242  }
 243  
 244  .interface-complementary-area .components-panel__header.editor-sidebar__panel-tabs {
 245    top: 0;
 246  }
 247  
 248  .interface-complementary-area p:not(.components-base-control__help, .components-form-token-field__help) {
 249    margin-top: 0;
 250  }
 251  
 252  .interface-complementary-area h2 {
 253    font-size: 13px;
 254    font-weight: var(--wpds-typography-font-weight-emphasis, 600);
 255    color: #1e1e1e;
 256    margin-bottom: 1.5em;
 257  }
 258  
 259  .interface-complementary-area h3 {
 260    font-size: 11px;
 261    text-transform: uppercase;
 262    font-weight: var(--wpds-typography-font-weight-emphasis, 600);
 263    color: #1e1e1e;
 264    margin-bottom: 1.5em;
 265  }
 266  
 267  .interface-complementary-area hr {
 268    border-top: none;
 269    border-bottom: 1px solid #f0f0f0;
 270    margin: 1.5em 0;
 271  }
 272  
 273  .interface-complementary-area div.components-toolbar-group,
 274  .interface-complementary-area div.components-toolbar {
 275    box-shadow: none;
 276    margin-bottom: 1.5em;
 277  }
 278  
 279  .interface-complementary-area div.components-toolbar-group:last-child,
 280  .interface-complementary-area div.components-toolbar:last-child {
 281    margin-bottom: 0;
 282  }
 283  
 284  .interface-complementary-area .block-editor-skip-to-selected-block:focus {
 285    top: auto;
 286    right: 10px;
 287    bottom: 10px;
 288    left: auto;
 289  }
 290  
 291  .interface-complementary-area__fill {
 292    height: 100%;
 293  }
 294  
 295  @media (min-width: 782px) {
 296    body.js.is-fullscreen-mode #adminmenumain {
 297      display: none;
 298    }
 299    body.js.is-fullscreen-mode #wpcontent,
 300    body.js.is-fullscreen-mode #wpfooter {
 301      margin-left: 0;
 302    }
 303  }
 304  html.interface-interface-skeleton__html-container {
 305    position: fixed;
 306    width: 100%;
 307  }
 308  
 309  @media (min-width: 782px) {
 310    html.interface-interface-skeleton__html-container:not(:has(.is-zoom-out)) {
 311      position: initial;
 312      width: initial;
 313    }
 314  }
 315  .interface-interface-skeleton {
 316    display: flex;
 317    flex-direction: row;
 318    height: auto;
 319    max-height: 100%;
 320    position: fixed;
 321    top: 46px;
 322    left: 0;
 323    right: 0;
 324    bottom: 0;
 325  }
 326  
 327  @media (min-width: 783px) {
 328    .interface-interface-skeleton {
 329      top: 32px;
 330    }
 331    .is-fullscreen-mode .interface-interface-skeleton {
 332      top: var(--wp-admin--admin-bar--height, 0);
 333    }
 334  }
 335  .interface-interface-skeleton__editor {
 336    display: flex;
 337    flex-direction: column;
 338    flex: 0 1 100%;
 339    overflow: hidden;
 340  }
 341  
 342  .interface-interface-skeleton { /* Set left position when auto-fold is not on the body element. */
 343    left: 0;
 344  }
 345  
 346  @media (min-width: 783px) {
 347    .interface-interface-skeleton {
 348      left: 160px;
 349    }
 350  }
 351  .auto-fold .interface-interface-skeleton { /* Auto fold is when on smaller breakpoints, nav menu auto collapses. */ }
 352  
 353  @media (min-width: 783px) {
 354    .auto-fold .interface-interface-skeleton {
 355      left: 36px;
 356    }
 357  }
 358  @media (min-width: 961px) {
 359    .auto-fold .interface-interface-skeleton {
 360      left: 160px;
 361    }
 362  }
 363  /* Sidebar manually collapsed. */
 364  .folded .interface-interface-skeleton {
 365    left: 0;
 366  }
 367  
 368  @media (min-width: 783px) {
 369    .folded .interface-interface-skeleton {
 370      left: 36px;
 371    }
 372  }
 373  body.is-fullscreen-mode .interface-interface-skeleton {
 374    left: 0 !important;
 375  }
 376  
 377  .interface-interface-skeleton__body {
 378    position: relative;
 379    flex-grow: 1;
 380    display: flex;
 381    overflow: auto;
 382    overscroll-behavior-y: none;
 383  }
 384  
 385  @media (min-width: 782px) {
 386    .has-footer .interface-interface-skeleton__body {
 387      padding-bottom: 25px;
 388    }
 389  }
 390  .interface-interface-skeleton__content {
 391    flex-grow: 1;
 392    display: flex;
 393    flex-direction: column;
 394    overflow: auto;
 395    z-index: 20;
 396  }
 397  
 398  @media (min-width: 782px) {
 399    .interface-interface-skeleton__content {
 400      z-index: auto;
 401    }
 402  }
 403  .interface-interface-skeleton__secondary-sidebar,
 404  .interface-interface-skeleton__sidebar {
 405    flex-shrink: 0;
 406    position: absolute;
 407    z-index: 100000;
 408    top: 0;
 409    left: 0;
 410    bottom: 0;
 411    background: #fff;
 412    color: #1e1e1e;
 413    width: auto;
 414  }
 415  
 416  @media (min-width: 782px) {
 417    .interface-interface-skeleton__secondary-sidebar,
 418    .interface-interface-skeleton__sidebar {
 419      position: relative !important;
 420    }
 421  }
 422  .interface-interface-skeleton__sidebar {
 423    border-top: 1px solid #e0e0e0;
 424    overflow: hidden;
 425  }
 426  
 427  @media (min-width: 782px) {
 428    .interface-interface-skeleton__sidebar {
 429      box-shadow: -1px 0 0 0 rgba(0, 0, 0, 0.133);
 430      outline: 1px solid transparent;
 431    }
 432  }
 433  .interface-interface-skeleton__secondary-sidebar {
 434    border-top: 1px solid #e0e0e0;
 435    right: 0;
 436  }
 437  
 438  @media (min-width: 782px) {
 439    .interface-interface-skeleton__secondary-sidebar {
 440      box-shadow: 1px 0 0 0 rgba(0, 0, 0, 0.133);
 441      outline: 1px solid transparent;
 442    }
 443  }
 444  .interface-interface-skeleton__header {
 445    flex-shrink: 0;
 446    height: auto;
 447    box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.133);
 448    z-index: 30;
 449    color: #1e1e1e;
 450    outline: 1px solid transparent;
 451  }
 452  
 453  .interface-interface-skeleton__footer {
 454    height: auto;
 455    flex-shrink: 0;
 456    border-top: 1px solid #e0e0e0;
 457    color: #1e1e1e;
 458    position: absolute;
 459    bottom: 0;
 460    left: 0;
 461    width: 100%;
 462    background-color: #fff;
 463    z-index: 90;
 464    display: none;
 465  }
 466  
 467  @media (min-width: 782px) {
 468    .interface-interface-skeleton__footer {
 469      display: flex;
 470    }
 471  }
 472  .interface-interface-skeleton__footer .block-editor-block-breadcrumb {
 473    z-index: 30;
 474    display: flex;
 475    background: #fff;
 476    height: 24px;
 477    align-items: center;
 478    font-size: 13px;
 479    padding: 0 18px;
 480  }
 481  
 482  .interface-interface-skeleton__actions {
 483    z-index: 100000;
 484    position: fixed !important;
 485    top: -9999em;
 486    bottom: auto;
 487    left: auto;
 488    right: 0;
 489    color: #1e1e1e;
 490    background: #fff;
 491    width: 100vw;
 492  }
 493  
 494  @media (min-width: 782px) {
 495    .interface-interface-skeleton__actions {
 496      width: 280px;
 497    }
 498  }
 499  .interface-interface-skeleton__actions:focus, .interface-interface-skeleton__actions:focus-within {
 500    top: auto;
 501    bottom: 0;
 502  }
 503  
 504  .is-entity-save-view-open .interface-interface-skeleton__actions:focus, .is-entity-save-view-open .interface-interface-skeleton__actions:focus-within {
 505    top: 46px;
 506  }
 507  
 508  @media (min-width: 782px) {
 509    .is-entity-save-view-open .interface-interface-skeleton__actions:focus, .is-entity-save-view-open .interface-interface-skeleton__actions:focus-within {
 510      border-left: 1px solid #ddd;
 511      top: 32px;
 512    }
 513    .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 {
 514      top: var(--wp-admin--admin-bar--height, 0);
 515    }
 516  }
 517  .interface-pinned-items {
 518    display: flex;
 519  }
 520  
 521  .interface-pinned-items .components-button {
 522    display: none;
 523    margin: 0;
 524  }
 525  
 526  .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"] {
 527    display: flex;
 528  }
 529  
 530  .interface-pinned-items .components-button svg {
 531    max-width: 24px;
 532    max-height: 24px;
 533  }
 534  
 535  @media (min-width: 600px) {
 536    .interface-pinned-items .components-button {
 537      display: flex;
 538    }
 539  }
 540  .interface-pinned-items {
 541    gap: 8px;
 542  }
 543  
 544  .wp-block[data-type="core/widget-area"] {
 545    max-width: 700px;
 546    margin-left: auto;
 547    margin-right: auto;
 548  }
 549  .wp-block[data-type="core/widget-area"] .components-panel__body > .components-panel__body-title {
 550    font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 551    margin: 0;
 552    height: 48px;
 553    position: relative;
 554    z-index: 1;
 555    background: #fff;
 556    transform: translateZ(0);
 557  }
 558  .wp-block[data-type="core/widget-area"] .components-panel__body > .components-panel__body-title:hover {
 559    background: #fff;
 560  }
 561  .wp-block[data-type="core/widget-area"] .block-list-appender.wp-block {
 562    width: initial;
 563    position: relative;
 564  }
 565  .wp-block[data-type="core/widget-area"] .editor-styles-wrapper .wp-block.wp-block.wp-block.wp-block.wp-block {
 566    max-width: 100%;
 567  }
 568  .wp-block[data-type="core/widget-area"] .components-panel__body.is-opened {
 569    padding: 0;
 570  }
 571  
 572  .blocks-widgets-container .wp-block-widget-area__inner-blocks.editor-styles-wrapper {
 573    margin: 0;
 574    padding: 0;
 575  }
 576  .blocks-widgets-container .wp-block-widget-area__inner-blocks.editor-styles-wrapper > .block-editor-block-list__layout {
 577    margin-top: -48px;
 578    padding: 72px 16px 16px;
 579    min-height: 32px;
 580  }
 581  
 582  .wp-block-widget-area__highlight-drop-zone {
 583    outline: var(--wp-admin-border-width-focus) solid var(--wp-admin-theme-color);
 584  }
 585  
 586  body.is-dragging-components-draggable .wp-block[data-type="core/widget-area"] .components-panel__body > .components-panel__body-title,
 587  body.is-dragging-components-draggable .wp-block[data-type="core/widget-area"] .components-panel__body > .components-panel__body-title * {
 588    pointer-events: none;
 589  }
 590  
 591  .edit-widgets-error-boundary {
 592    margin: auto;
 593    max-width: 780px;
 594    padding: 20px;
 595    margin-top: 64px;
 596    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08), 0 15px 27px rgba(0, 0, 0, 0.07), 0 30px 36px rgba(0, 0, 0, 0.04), 0 50px 43px rgba(0, 0, 0, 0.02);
 597  }
 598  
 599  .edit-widgets-header {
 600    display: flex;
 601    align-items: center;
 602    justify-content: space-between;
 603    height: 64px;
 604    overflow: auto;
 605    background: #fff;
 606  }
 607  @media (min-width: 600px) {
 608    .edit-widgets-header {
 609      overflow: visible;
 610    }
 611  }
 612  .edit-widgets-header .selected-block-tools-wrapper {
 613    overflow: hidden;
 614    display: flex;
 615    align-items: center;
 616    height: 64px;
 617  }
 618  .edit-widgets-header .selected-block-tools-wrapper .block-editor-block-contextual-toolbar {
 619    border-bottom: 0;
 620    height: 100%;
 621  }
 622  .edit-widgets-header .selected-block-tools-wrapper .block-editor-block-toolbar {
 623    height: 100%;
 624    padding-top: 17px;
 625  }
 626  .edit-widgets-header .selected-block-tools-wrapper .block-editor-block-toolbar .components-button:not(.block-editor-block-mover-button) {
 627    height: 32px;
 628  }
 629  .edit-widgets-header .selected-block-tools-wrapper .components-toolbar-group,
 630  .edit-widgets-header .selected-block-tools-wrapper .components-toolbar {
 631    border-right: none;
 632  }
 633  .edit-widgets-header .selected-block-tools-wrapper .components-toolbar-group::after,
 634  .edit-widgets-header .selected-block-tools-wrapper .components-toolbar::after {
 635    content: "";
 636    width: 1px;
 637    height: 24px;
 638    background-color: #ddd;
 639    margin-top: 4px;
 640    margin-left: 8px;
 641  }
 642  .edit-widgets-header .selected-block-tools-wrapper .components-toolbar-group .components-toolbar-group.components-toolbar-group::after,
 643  .edit-widgets-header .selected-block-tools-wrapper .components-toolbar .components-toolbar-group.components-toolbar-group::after {
 644    display: none;
 645  }
 646  .edit-widgets-header .selected-block-tools-wrapper .block-editor-block-mover.is-horizontal .block-editor-block-mover-button {
 647    height: 32px;
 648    overflow: visible;
 649  }
 650  @media (min-width: 600px) {
 651    .edit-widgets-header .selected-block-tools-wrapper .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover__move-button-container {
 652      position: relative;
 653      top: -10px;
 654    }
 655  }
 656  
 657  .edit-widgets-header__navigable-toolbar-wrapper {
 658    display: flex;
 659    align-items: center;
 660    justify-content: center;
 661    flex-shrink: 2;
 662    padding-right: 8px;
 663    padding-left: 16px;
 664    overflow: hidden;
 665    height: 64px;
 666  }
 667  
 668  .edit-widgets-header__title {
 669    font-size: 20px;
 670    padding: 0;
 671    margin: 0 20px 0 0;
 672  }
 673  
 674  .edit-widgets-header__actions {
 675    display: flex;
 676    align-items: center;
 677    padding-right: 4px;
 678  }
 679  @media (min-width: 600px) {
 680    .edit-widgets-header__actions {
 681      padding-right: 8px;
 682    }
 683  }
 684  .edit-widgets-header__actions {
 685    gap: 8px;
 686  }
 687  
 688  .edit-widgets-header-toolbar {
 689    gap: 8px;
 690    margin-right: 8px;
 691  }
 692  .edit-widgets-header-toolbar > .components-button.has-icon.has-icon.has-icon,
 693  .edit-widgets-header-toolbar > .components-dropdown > .components-button.has-icon.has-icon {
 694    height: 32px;
 695    min-width: 32px;
 696    padding: 4px;
 697  }
 698  .edit-widgets-header-toolbar > .components-button.has-icon.has-icon.has-icon.is-pressed,
 699  .edit-widgets-header-toolbar > .components-dropdown > .components-button.has-icon.has-icon.is-pressed {
 700    background: #1e1e1e;
 701  }
 702  .edit-widgets-header-toolbar > .components-button.has-icon.has-icon.has-icon:focus:not(:disabled),
 703  .edit-widgets-header-toolbar > .components-dropdown > .components-button.has-icon.has-icon:focus:not(:disabled) {
 704    box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 1px #fff;
 705    outline: 1px solid transparent;
 706  }
 707  .edit-widgets-header-toolbar > .components-button.has-icon.has-icon.has-icon::before,
 708  .edit-widgets-header-toolbar > .components-dropdown > .components-button.has-icon.has-icon::before {
 709    display: none;
 710  }
 711  
 712  .edit-widgets-header-toolbar__inserter-toggle.edit-widgets-header-toolbar__inserter-toggle {
 713    padding-left: 8px;
 714    padding-right: 8px;
 715  }
 716  @media (min-width: 600px) {
 717    .edit-widgets-header-toolbar__inserter-toggle.edit-widgets-header-toolbar__inserter-toggle {
 718      padding-left: 12px;
 719      padding-right: 12px;
 720    }
 721  }
 722  .edit-widgets-header-toolbar__inserter-toggle.edit-widgets-header-toolbar__inserter-toggle::after {
 723    content: none;
 724  }
 725  @media not (prefers-reduced-motion) {
 726    .edit-widgets-header-toolbar__inserter-toggle.edit-widgets-header-toolbar__inserter-toggle svg {
 727      transition: transform cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
 728    }
 729  }
 730  .edit-widgets-header-toolbar__inserter-toggle.edit-widgets-header-toolbar__inserter-toggle.is-pressed svg {
 731    transform: rotate(45deg);
 732  }
 733  
 734  .edit-widgets-keyboard-shortcut-help-modal__section {
 735    margin: 0 0 2rem 0;
 736  }
 737  .edit-widgets-keyboard-shortcut-help-modal__section-title {
 738    font-size: 0.9rem;
 739    font-weight: var(--wpds-typography-font-weight-emphasis, 600);
 740  }
 741  .edit-widgets-keyboard-shortcut-help-modal__shortcut {
 742    display: flex;
 743    align-items: baseline;
 744    padding: 0.6rem 0;
 745    border-top: 1px solid #ddd;
 746    margin-bottom: 0;
 747  }
 748  .edit-widgets-keyboard-shortcut-help-modal__shortcut:last-child {
 749    border-bottom: 1px solid #ddd;
 750  }
 751  .edit-widgets-keyboard-shortcut-help-modal__shortcut:empty {
 752    display: none;
 753  }
 754  .edit-widgets-keyboard-shortcut-help-modal__shortcut-term {
 755    font-weight: var(--wpds-typography-font-weight-emphasis, 600);
 756    margin: 0 0 0 1rem;
 757    text-align: right;
 758  }
 759  .edit-widgets-keyboard-shortcut-help-modal__shortcut-description {
 760    flex: 1;
 761    margin: 0;
 762  }
 763  .edit-widgets-keyboard-shortcut-help-modal__shortcut-key-combination {
 764    display: block;
 765    background: none;
 766    margin: 0;
 767    padding: 0;
 768  }
 769  .edit-widgets-keyboard-shortcut-help-modal__shortcut-key-combination + .edit-widgets-keyboard-shortcut-help-modal__shortcut-key-combination {
 770    margin-top: 10px;
 771  }
 772  .edit-widgets-keyboard-shortcut-help-modal__shortcut-key {
 773    padding: 0.25rem 0.5rem;
 774    border-radius: 8%;
 775    margin: 0 0.2rem 0 0.2rem;
 776  }
 777  .edit-widgets-keyboard-shortcut-help-modal__shortcut-key:last-child {
 778    margin: 0 0 0 0.2rem;
 779  }
 780  
 781  .components-panel__header.edit-widgets-sidebar__panel-tabs {
 782    padding-left: 0;
 783  }
 784  
 785  .edit-widgets-widget-areas__top-container {
 786    display: flex;
 787    padding: 16px;
 788  }
 789  .edit-widgets-widget-areas__top-container .block-editor-block-icon {
 790    margin-right: 16px;
 791  }
 792  
 793  .edit-widgets-notices__snackbar {
 794    position: fixed;
 795    bottom: 24px;
 796    left: 0;
 797    right: 0;
 798    padding-inline: 16px;
 799    box-sizing: border-box;
 800    display: flex;
 801    flex-direction: column;
 802    pointer-events: none;
 803  }
 804  .edit-widgets-notices__snackbar .components-snackbar {
 805    margin-inline: auto;
 806  }
 807  
 808  .edit-widgets-layout__inserter-panel {
 809    height: 100%;
 810    display: flex;
 811    flex-direction: column;
 812  }
 813  .edit-widgets-layout__inserter-panel .block-editor-inserter__menu {
 814    overflow: hidden;
 815  }
 816  
 817  .edit-widgets-layout__inserter-panel-content {
 818    height: calc(100% - 36px - 8px);
 819  }
 820  .edit-widgets-layout__inserter-panel-content .block-editor-inserter__tablist-and-close {
 821    display: none;
 822  }
 823  @media (min-width: 782px) {
 824    .edit-widgets-layout__inserter-panel-content {
 825      height: 100%;
 826    }
 827  }
 828  
 829  .components-popover.more-menu-dropdown__content {
 830    z-index: 99998;
 831  }
 832  
 833  .edit-widgets-welcome-guide {
 834    width: 312px;
 835  }
 836  .edit-widgets-welcome-guide__image {
 837    background: #00a0d2;
 838    margin: 0 0 16px;
 839  }
 840  .edit-widgets-welcome-guide__image > img {
 841    display: block;
 842    max-width: 100%;
 843    -o-object-fit: cover;
 844       object-fit: cover;
 845  }
 846  .edit-widgets-welcome-guide__heading {
 847    font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 848    font-size: 24px;
 849    line-height: 1.4;
 850    margin: 16px 0 16px 0;
 851    padding: 0 32px;
 852  }
 853  .edit-widgets-welcome-guide__text {
 854    font-size: 13px;
 855    line-height: 1.4;
 856    margin: 0 0 24px 0;
 857    padding: 0 32px;
 858  }
 859  .edit-widgets-welcome-guide__inserter-icon {
 860    margin: 0 4px;
 861    vertical-align: text-top;
 862  }
 863  .edit-widgets-welcome-guide .components-button:hover svg {
 864    fill: #fff;
 865  }
 866  
 867  .edit-widgets-block-editor {
 868    position: relative;
 869    font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 870    display: flex;
 871    flex-direction: column;
 872    flex-grow: 1;
 873  }
 874  .edit-widgets-block-editor > div:last-of-type,
 875  .edit-widgets-block-editor .block-editor-writing-flow {
 876    display: flex;
 877    flex-direction: column;
 878    flex-grow: 1;
 879  }
 880  .edit-widgets-block-editor .edit-widgets-main-block-list {
 881    height: 100%;
 882  }
 883  .edit-widgets-block-editor .components-button {
 884    font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 885    font-size: 13px;
 886  }
 887  .edit-widgets-block-editor .components-button.is-tertiary, .edit-widgets-block-editor .components-button.has-icon {
 888    padding: 6px;
 889  }
 890  
 891  .edit-widgets-editor__list-view-panel {
 892    height: 100%;
 893    display: flex;
 894    flex-direction: column;
 895    min-width: 350px;
 896  }
 897  
 898  .edit-widgets-editor__list-view-panel-content {
 899    height: calc(100% - 36px - 8px);
 900    overflow-y: auto;
 901    padding: 8px;
 902  }
 903  
 904  .edit-widgets-editor__list-view-panel-header {
 905    align-items: center;
 906    border-bottom: 1px solid #ddd;
 907    display: flex;
 908    justify-content: space-between;
 909    height: 48px;
 910    padding-left: 16px;
 911    padding-right: 8px;
 912  }
 913  
 914  body.js.appearance_page_gutenberg-widgets,
 915  body.js.widgets-php {
 916    background: #fff;
 917  }
 918  body.js.appearance_page_gutenberg-widgets #wpcontent,
 919  body.js.widgets-php #wpcontent {
 920    padding-left: 0;
 921  }
 922  body.js.appearance_page_gutenberg-widgets #wpbody-content,
 923  body.js.widgets-php #wpbody-content {
 924    padding-bottom: 0;
 925  }
 926  body.js.appearance_page_gutenberg-widgets,
 927  body.js.widgets-php {
 928    /* We hide legacy notices in Gutenberg Based Pages, because they were not designed in a way that scaled well.
 929       Plugins can use Gutenberg notices if they need to pass on information to the user when they are editing. */
 930  }
 931  body.js.appearance_page_gutenberg-widgets #wpbody-content > div:not(.blocks-widgets-container):not(#screen-meta),
 932  body.js.widgets-php #wpbody-content > div:not(.blocks-widgets-container):not(#screen-meta) {
 933    display: none;
 934  }
 935  body.js.appearance_page_gutenberg-widgets #wpfooter,
 936  body.js.widgets-php #wpfooter {
 937    display: none;
 938  }
 939  body.js.appearance_page_gutenberg-widgets .a11y-speak-region,
 940  body.js.widgets-php .a11y-speak-region {
 941    left: -1px;
 942    top: -1px;
 943  }
 944  body.js.appearance_page_gutenberg-widgets ul#adminmenu a.wp-has-current-submenu::after,
 945  body.js.appearance_page_gutenberg-widgets ul#adminmenu > li.current > a.current::after,
 946  body.js.widgets-php ul#adminmenu a.wp-has-current-submenu::after,
 947  body.js.widgets-php ul#adminmenu > li.current > a.current::after {
 948    border-right-color: #fff;
 949  }
 950  body.js.appearance_page_gutenberg-widgets .media-frame select.attachment-filters:last-of-type,
 951  body.js.widgets-php .media-frame select.attachment-filters:last-of-type {
 952    width: auto;
 953    max-width: 100%;
 954  }
 955  
 956  .blocks-widgets-container {
 957    box-sizing: border-box;
 958  }
 959  .blocks-widgets-container *,
 960  .blocks-widgets-container *::before,
 961  .blocks-widgets-container *::after {
 962    box-sizing: inherit;
 963  }
 964  @media (min-width: 600px) {
 965    .blocks-widgets-container {
 966      position: absolute;
 967      top: 0;
 968      right: 0;
 969      bottom: 0;
 970      left: 0;
 971      min-height: calc(100vh - 46px);
 972    }
 973  }
 974  @media (min-width: 782px) {
 975    .blocks-widgets-container {
 976      min-height: calc(100vh - 32px);
 977    }
 978  }
 979  .blocks-widgets-container .interface-interface-skeleton__content {
 980    background-color: #f0f0f0;
 981  }
 982  
 983  .blocks-widgets-container .editor-styles-wrapper {
 984    max-width: 700px;
 985    margin: auto;
 986  }
 987  
 988  .edit-widgets-sidebar .components-button.interface-complementary-area__pin-unpin-item {
 989    display: none;
 990  }
 991  
 992  .js .widgets-php .notice {
 993    display: none !important;
 994  }