[Summary view] [Print] [Text view]

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