[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-right: 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-right: 4px;
 102  }
 103  .interface-complementary-area-header .components-button.has-icon {
 104    display: none;
 105    margin-left: auto;
 106  }
 107  .interface-complementary-area-header .components-button.has-icon ~ .components-button {
 108    margin-left: 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    right: 10px;
 174    bottom: 10px;
 175    left: 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-left: 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    left: 0;
 212    right: 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    left: 0;
 234  }
 235  @media (min-width: 783px) {
 236    .interface-interface-skeleton {
 237      left: 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      left: 36px;
 247    }
 248  }
 249  @media (min-width: 961px) {
 250    .auto-fold .interface-interface-skeleton {
 251      left: 160px;
 252    }
 253  }
 254  
 255  /* Sidebar manually collapsed. */
 256  .folded .interface-interface-skeleton {
 257    left: 0;
 258  }
 259  @media (min-width: 783px) {
 260    .folded .interface-interface-skeleton {
 261      left: 36px;
 262    }
 263  }
 264  
 265  body.is-fullscreen-mode .interface-interface-skeleton {
 266    left: 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    right: 0;
 297    bottom: 0;
 298    left: 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-left: 1px solid #e0e0e0;
 317    }
 318  }
 319  
 320  @media (min-width: 782px) {
 321    .interface-interface-skeleton__secondary-sidebar {
 322      border-right: 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    left: 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    left: auto;
 368    right: 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-left: 4px;
 390  }
 391  .interface-pinned-items .components-button svg {
 392    max-width: 24px;
 393    max-height: 24px;
 394  }
 395  
 396  .edit-post-header {
 397    height: 60px;
 398    background: #fff;
 399    display: flex;
 400    flex-wrap: wrap;
 401    align-items: center;
 402    max-width: 100vw;
 403  }
 404  @media (min-width: 280px) {
 405    .edit-post-header {
 406      flex-wrap: nowrap;
 407    }
 408  }
 409  .edit-post-header > .edit-post-header__settings {
 410    order: 1;
 411  }
 412  @supports (position: sticky) {
 413    .edit-post-header > .edit-post-header__settings {
 414      order: initial;
 415    }
 416  }
 417  
 418  .edit-post-header__toolbar {
 419    display: flex;
 420    flex-grow: 1;
 421  }
 422  .edit-post-header__toolbar .table-of-contents {
 423    display: none;
 424  }
 425  @media (min-width: 600px) {
 426    .edit-post-header__toolbar .table-of-contents {
 427      display: block;
 428    }
 429  }
 430  
 431  .edit-post-header__settings {
 432    display: inline-flex;
 433    align-items: center;
 434    flex-wrap: wrap;
 435    padding-right: 4px;
 436    /**
 437     * Buttons in the Toolbar
 438         */
 439  }
 440  @media (min-width: 600px) {
 441    .edit-post-header__settings {
 442      padding-right: 16px;
 443    }
 444  }
 445  .edit-post-header__settings .editor-post-saved-state,
 446  .edit-post-header__settings .components-button.components-button {
 447    margin-right: 4px;
 448  }
 449  @media (min-width: 600px) {
 450    .edit-post-header__settings .editor-post-saved-state,
 451  .edit-post-header__settings .components-button.components-button {
 452      margin-right: 12px;
 453    }
 454  }
 455  .edit-post-header__settings .editor-post-saved-state,
 456  .edit-post-header__settings .components-button.is-tertiary {
 457    padding: 0 6px;
 458  }
 459  .edit-post-header__settings .edit-post-more-menu .components-button,
 460  .edit-post-header__settings .interface-pinned-items .components-button {
 461    margin-right: 0;
 462  }
 463  
 464  .edit-post-header-preview__grouping-external {
 465    display: flex;
 466    position: relative;
 467    padding-bottom: 0;
 468  }
 469  
 470  .edit-post-header-preview__button-external {
 471    padding-left: 8px;
 472    margin-right: auto;
 473    width: 100%;
 474    display: flex;
 475    justify-content: flex-start;
 476  }
 477  .edit-post-header-preview__button-external svg {
 478    margin-left: auto;
 479  }
 480  
 481  .edit-post-post-preview-dropdown .components-popover__content > div {
 482    padding-bottom: 0;
 483  }
 484  
 485  .show-icon-labels.interface-pinned-items .components-button.has-icon,
 486  .show-icon-labels .edit-post-header .components-button.has-icon,
 487  .edit-post-header__dropdown .components-button.has-icon {
 488    width: auto;
 489  }
 490  .show-icon-labels.interface-pinned-items .components-button.has-icon svg,
 491  .show-icon-labels .edit-post-header .components-button.has-icon svg,
 492  .edit-post-header__dropdown .components-button.has-icon svg {
 493    display: none;
 494  }
 495  .show-icon-labels.interface-pinned-items .components-button.has-icon::after,
 496  .show-icon-labels .edit-post-header .components-button.has-icon::after,
 497  .edit-post-header__dropdown .components-button.has-icon::after {
 498    content: attr(aria-label);
 499  }
 500  .show-icon-labels.interface-pinned-items .components-button.has-icon[aria-disabled=true],
 501  .show-icon-labels .edit-post-header .components-button.has-icon[aria-disabled=true],
 502  .edit-post-header__dropdown .components-button.has-icon[aria-disabled=true] {
 503    background-color: transparent;
 504  }
 505  .show-icon-labels.interface-pinned-items .is-tertiary:active,
 506  .show-icon-labels .edit-post-header .is-tertiary:active,
 507  .edit-post-header__dropdown .is-tertiary:active {
 508    box-shadow: 0 0 0 1.5px var(--wp-admin-theme-color);
 509    background-color: transparent;
 510  }
 511  .show-icon-labels.interface-pinned-items .edit-post-fullscreen-mode-close.has-icon svg,
 512  .show-icon-labels.interface-pinned-items .components-button.has-icon.button-toggle svg,
 513  .show-icon-labels .edit-post-header .edit-post-fullscreen-mode-close.has-icon svg,
 514  .show-icon-labels .edit-post-header .components-button.has-icon.button-toggle svg,
 515  .edit-post-header__dropdown .edit-post-fullscreen-mode-close.has-icon svg,
 516  .edit-post-header__dropdown .components-button.has-icon.button-toggle svg {
 517    display: block;
 518  }
 519  .show-icon-labels.interface-pinned-items .edit-post-fullscreen-mode-close.has-icon::after,
 520  .show-icon-labels.interface-pinned-items .components-button.has-icon.button-toggle::after,
 521  .show-icon-labels .edit-post-header .edit-post-fullscreen-mode-close.has-icon::after,
 522  .show-icon-labels .edit-post-header .components-button.has-icon.button-toggle::after,
 523  .edit-post-header__dropdown .edit-post-fullscreen-mode-close.has-icon::after,
 524  .edit-post-header__dropdown .components-button.has-icon.button-toggle::after {
 525    content: none;
 526  }
 527  .show-icon-labels.interface-pinned-items .edit-post-fullscreen-mode-close.has-icon,
 528  .show-icon-labels .edit-post-header .edit-post-fullscreen-mode-close.has-icon,
 529  .edit-post-header__dropdown .edit-post-fullscreen-mode-close.has-icon {
 530    width: 60px;
 531  }
 532  .show-icon-labels.interface-pinned-items .components-menu-items-choice .components-menu-items__item-icon.components-menu-items__item-icon,
 533  .show-icon-labels .edit-post-header .components-menu-items-choice .components-menu-items__item-icon.components-menu-items__item-icon,
 534  .edit-post-header__dropdown .components-menu-items-choice .components-menu-items__item-icon.components-menu-items__item-icon {
 535    display: block;
 536  }
 537  .show-icon-labels.interface-pinned-items .edit-post-header-toolbar__inserter-toggle.edit-post-header-toolbar__inserter-toggle,
 538  .show-icon-labels.interface-pinned-items .interface-pinned-items .components-button,
 539  .show-icon-labels .edit-post-header .edit-post-header-toolbar__inserter-toggle.edit-post-header-toolbar__inserter-toggle,
 540  .show-icon-labels .edit-post-header .interface-pinned-items .components-button,
 541  .edit-post-header__dropdown .edit-post-header-toolbar__inserter-toggle.edit-post-header-toolbar__inserter-toggle,
 542  .edit-post-header__dropdown .interface-pinned-items .components-button {
 543    padding-left: 8px;
 544    padding-right: 8px;
 545  }
 546  @media (min-width: 600px) {
 547    .show-icon-labels.interface-pinned-items .edit-post-header-toolbar__inserter-toggle.edit-post-header-toolbar__inserter-toggle,
 548  .show-icon-labels.interface-pinned-items .interface-pinned-items .components-button,
 549  .show-icon-labels .edit-post-header .edit-post-header-toolbar__inserter-toggle.edit-post-header-toolbar__inserter-toggle,
 550  .show-icon-labels .edit-post-header .interface-pinned-items .components-button,
 551  .edit-post-header__dropdown .edit-post-header-toolbar__inserter-toggle.edit-post-header-toolbar__inserter-toggle,
 552  .edit-post-header__dropdown .interface-pinned-items .components-button {
 553      padding-left: 12px;
 554      padding-right: 12px;
 555    }
 556  }
 557  .show-icon-labels.interface-pinned-items .components-dropdown-menu__toggle,
 558  .show-icon-labels .edit-post-header .components-dropdown-menu__toggle,
 559  .edit-post-header__dropdown .components-dropdown-menu__toggle {
 560    margin-left: 8px;
 561    padding-left: 8px;
 562    padding-right: 8px;
 563  }
 564  @media (min-width: 600px) {
 565    .show-icon-labels.interface-pinned-items .components-dropdown-menu__toggle,
 566  .show-icon-labels .edit-post-header .components-dropdown-menu__toggle,
 567  .edit-post-header__dropdown .components-dropdown-menu__toggle {
 568      margin-left: 12px;
 569      padding-left: 12px;
 570      padding-right: 12px;
 571    }
 572  }
 573  .show-icon-labels.interface-pinned-items .edit-post-header-toolbar__inserter-toggle.edit-post-header-toolbar__inserter-toggle::after,
 574  .show-icon-labels .edit-post-header .edit-post-header-toolbar__inserter-toggle.edit-post-header-toolbar__inserter-toggle::after,
 575  .edit-post-header__dropdown .edit-post-header-toolbar__inserter-toggle.edit-post-header-toolbar__inserter-toggle::after {
 576    content: none;
 577  }
 578  .show-icon-labels.interface-pinned-items .editor-post-save-draft.editor-post-save-draft::after,
 579  .show-icon-labels .edit-post-header .editor-post-save-draft.editor-post-save-draft::after,
 580  .edit-post-header__dropdown .editor-post-save-draft.editor-post-save-draft::after {
 581    content: none;
 582  }
 583  @media (min-width: 600px) {
 584    .show-icon-labels.interface-pinned-items .editor-post-save-draft.editor-post-save-draft::after,
 585  .show-icon-labels .edit-post-header .editor-post-save-draft.editor-post-save-draft::after,
 586  .edit-post-header__dropdown .editor-post-save-draft.editor-post-save-draft::after {
 587      content: attr(aria-label);
 588    }
 589  }
 590  
 591  .edit-post-header__dropdown .components-menu-item__button.components-menu-item__button,
 592  .edit-post-header__dropdown .components-button.editor-history__undo,
 593  .edit-post-header__dropdown .components-button.editor-history__redo,
 594  .edit-post-header__dropdown .table-of-contents .components-button,
 595  .edit-post-header__dropdown .components-button.block-editor-block-navigation {
 596    margin: 0;
 597    padding: 6px 6px 6px 40px;
 598    width: 14.625rem;
 599    text-align: left;
 600    justify-content: flex-start;
 601  }
 602  
 603  .show-icon-labels.interface-pinned-items {
 604    padding: 6px 12px 12px;
 605    margin-top: 0;
 606    margin-bottom: 0;
 607    margin-left: -12px;
 608    margin-right: -12px;
 609    border-bottom: 1px solid #ccc;
 610    display: block;
 611  }
 612  .show-icon-labels.interface-pinned-items > .components-button.has-icon {
 613    margin: 0;
 614    padding: 6px 6px 6px 8px;
 615    width: 14.625rem;
 616    justify-content: flex-start;
 617  }
 618  .show-icon-labels.interface-pinned-items > .components-button.has-icon[aria-expanded=true] svg {
 619    display: block;
 620    max-width: 24px;
 621  }
 622  .show-icon-labels.interface-pinned-items > .components-button.has-icon[aria-expanded=false] {
 623    padding-left: 40px;
 624  }
 625  .show-icon-labels.interface-pinned-items > .components-button.has-icon svg {
 626    margin-right: 8px;
 627  }
 628  
 629  .edit-post-fullscreen-mode-close.has-icon {
 630    display: none;
 631  }
 632  @media (min-width: 782px) {
 633    .edit-post-fullscreen-mode-close.has-icon {
 634      display: flex;
 635      align-items: center;
 636      align-self: stretch;
 637      border: none;
 638      background: #23282e;
 639      color: #fff;
 640      border-radius: 0;
 641      height: 61px;
 642      width: 60px;
 643      position: relative;
 644      margin-bottom: -1px;
 645    }
 646    .edit-post-fullscreen-mode-close.has-icon:active {
 647      color: #fff;
 648    }
 649    .edit-post-fullscreen-mode-close.has-icon:focus {
 650      box-shadow: none;
 651    }
 652    .edit-post-fullscreen-mode-close.has-icon::before {
 653      transition: box-shadow 0.1s ease;
 654      content: "";
 655      display: block;
 656      position: absolute;
 657      top: 9px;
 658      right: 9px;
 659      bottom: 9px;
 660      left: 9px;
 661      border-radius: 4px;
 662      box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) #23282e;
 663    }
 664  }
 665  @media (min-width: 782px) and (prefers-reduced-motion: reduce) {
 666    .edit-post-fullscreen-mode-close.has-icon::before {
 667      transition-duration: 0s;
 668      transition-delay: 0s;
 669    }
 670  }
 671  @media (min-width: 782px) {
 672    .edit-post-fullscreen-mode-close.has-icon:hover::before {
 673      box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) #757575;
 674    }
 675  }
 676  @media (min-width: 782px) {
 677    .edit-post-fullscreen-mode-close.has-icon:focus::before {
 678      box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) rgba(255, 255, 255, 0.1), inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 679    }
 680  }
 681  
 682  .edit-post-fullscreen-mode-close_site-icon {
 683    width: 36px;
 684    border-radius: 2px;
 685  }
 686  
 687  .edit-post-header-toolbar {
 688    display: inline-flex;
 689    flex-grow: 1;
 690    align-items: center;
 691    border: none;
 692  }
 693  .edit-post-header-toolbar .edit-post-header-toolbar__left > .components-button {
 694    display: none;
 695  }
 696  @media (min-width: 600px) {
 697    .edit-post-header-toolbar .edit-post-header-toolbar__left > .components-button {
 698      display: inline-flex;
 699    }
 700  }
 701  .edit-post-header-toolbar .edit-post-header-toolbar__left > .edit-post-header-toolbar__inserter-toggle {
 702    display: inline-flex;
 703  }
 704  .edit-post-header-toolbar .edit-post-header-toolbar__left > .edit-post-header-toolbar__inserter-toggle svg {
 705    transition: transform cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
 706  }
 707  @media (prefers-reduced-motion: reduce) {
 708    .edit-post-header-toolbar .edit-post-header-toolbar__left > .edit-post-header-toolbar__inserter-toggle svg {
 709      transition-duration: 0s;
 710      transition-delay: 0s;
 711    }
 712  }
 713  .edit-post-header-toolbar .edit-post-header-toolbar__left > .edit-post-header-toolbar__inserter-toggle.is-pressed svg {
 714    transform: rotate(45deg);
 715  }
 716  .edit-post-header-toolbar .block-editor-block-navigation {
 717    display: none;
 718  }
 719  @media (min-width: 600px) {
 720    .edit-post-header-toolbar .block-editor-block-navigation {
 721      display: flex;
 722    }
 723  }
 724  .edit-post-header-toolbar .edit-post-header-toolbar__left > .components-button.has-icon,
 725  .edit-post-header-toolbar .edit-post-header-toolbar__left > .components-dropdown > .components-button.has-icon {
 726    height: 36px;
 727    min-width: 36px;
 728    padding: 6px;
 729  }
 730  .edit-post-header-toolbar .edit-post-header-toolbar__left > .components-button.has-icon.is-pressed,
 731  .edit-post-header-toolbar .edit-post-header-toolbar__left > .components-dropdown > .components-button.has-icon.is-pressed {
 732    background: #1e1e1e;
 733  }
 734  .edit-post-header-toolbar .edit-post-header-toolbar__left > .components-button.has-icon:focus:not(:disabled),
 735  .edit-post-header-toolbar .edit-post-header-toolbar__left > .components-dropdown > .components-button.has-icon:focus:not(:disabled) {
 736    box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 1px #fff;
 737    outline: 1px solid transparent;
 738  }
 739  .edit-post-header-toolbar .edit-post-header-toolbar__left > .components-button.has-icon::before,
 740  .edit-post-header-toolbar .edit-post-header-toolbar__left > .components-dropdown > .components-button.has-icon::before {
 741    display: none;
 742  }
 743  
 744  @media (min-width: 600px) {
 745    .edit-post-header.has-reduced-ui .edit-post-header-toolbar__left > * + .components-button,
 746  .edit-post-header.has-reduced-ui .edit-post-header-toolbar__left > * + .components-dropdown > [aria-expanded=false] {
 747      transition: opacity 0.1s linear;
 748    }
 749  }
 750  @media (min-width: 600px) and (prefers-reduced-motion: reduce) {
 751    .edit-post-header.has-reduced-ui .edit-post-header-toolbar__left > * + .components-button,
 752  .edit-post-header.has-reduced-ui .edit-post-header-toolbar__left > * + .components-dropdown > [aria-expanded=false] {
 753      transition-duration: 0s;
 754      transition-delay: 0s;
 755    }
 756  }
 757  @media (min-width: 600px) {
 758    .edit-post-header.has-reduced-ui:not(:hover) .edit-post-header-toolbar__left > * + .components-button, .edit-post-header.has-reduced-ui:not(:hover) .edit-post-header-toolbar__left > * + .components-dropdown > [aria-expanded=false] {
 759      opacity: 0;
 760    }
 761  }
 762  
 763  .edit-post-header-toolbar__left {
 764    display: inline-flex;
 765    align-items: center;
 766    padding-left: 8px;
 767  }
 768  @media (min-width: 600px) {
 769    .edit-post-header-toolbar__left {
 770      padding-left: 24px;
 771    }
 772  }
 773  @media (min-width: 1280px) {
 774    .edit-post-header-toolbar__left {
 775      padding-right: 8px;
 776    }
 777  }
 778  
 779  .edit-post-header-toolbar .edit-post-header-toolbar__left > .edit-post-header-toolbar__inserter-toggle.has-icon {
 780    margin-right: 8px;
 781    min-width: 32px;
 782    width: 32px;
 783    height: 32px;
 784    padding: 0;
 785  }
 786  .show-icon-labels .edit-post-header-toolbar .edit-post-header-toolbar__left > .edit-post-header-toolbar__inserter-toggle.has-icon {
 787    height: 36px;
 788  }
 789  
 790  .edit-post-header-toolbar .edit-post-header-toolbar__left > .edit-post-header-toolbar__inserter-toggle.has-text.has-icon {
 791    width: auto;
 792    padding: 0 8px;
 793  }
 794  
 795  .show-icon-labels .edit-post-header-toolbar__left > * + * {
 796    margin-left: 8px;
 797  }
 798  
 799  .edit-post-more-menu {
 800    margin-left: -4px;
 801  }
 802  .edit-post-more-menu .components-button {
 803    width: auto;
 804    padding: 0 2px;
 805  }
 806  @media (min-width: 600px) {
 807    .edit-post-more-menu {
 808      margin-left: 0;
 809    }
 810    .edit-post-more-menu .components-button {
 811      padding: 0 4px;
 812    }
 813  }
 814  
 815  .edit-post-more-menu__content .components-popover__content {
 816    min-width: 280px;
 817  }
 818  @media (min-width: 480px) {
 819    .edit-post-more-menu__content .components-popover__content {
 820      width: auto;
 821      max-width: 480px;
 822    }
 823  }
 824  .edit-post-more-menu__content .components-popover__content .components-dropdown-menu__menu {
 825    padding: 0;
 826  }
 827  
 828  .components-popover.edit-post-more-menu__content {
 829    z-index: 99998;
 830  }
 831  
 832  .edit-post-template-top-area {
 833    display: flex;
 834    flex-direction: column;
 835    align-content: space-between;
 836    width: 100%;
 837    align-items: center;
 838  }
 839  .edit-post-template-top-area .edit-post-template-title,
 840  .edit-post-template-top-area .edit-post-template-post-title {
 841    padding: 0;
 842    text-decoration: none;
 843    height: auto;
 844  }
 845  .edit-post-template-top-area .edit-post-template-title::before,
 846  .edit-post-template-top-area .edit-post-template-post-title::before {
 847    height: 100%;
 848  }
 849  .edit-post-template-top-area .edit-post-template-title.has-icon svg,
 850  .edit-post-template-top-area .edit-post-template-post-title.has-icon svg {
 851    order: 1;
 852    margin-right: 0;
 853  }
 854  .edit-post-template-top-area .edit-post-template-title {
 855    color: #1e1e1e;
 856  }
 857  .edit-post-template-top-area .edit-post-template-post-title {
 858    margin-top: 4px;
 859    max-width: 160px;
 860    white-space: nowrap;
 861    overflow: hidden;
 862    text-overflow: ellipsis;
 863    display: block;
 864  }
 865  .edit-post-template-top-area .edit-post-template-post-title::before {
 866    left: 0;
 867    right: 0;
 868  }
 869  @media (min-width: 1080px) {
 870    .edit-post-template-top-area .edit-post-template-post-title {
 871      max-width: none;
 872    }
 873  }
 874  
 875  .edit-post-template-top-area__popover .components-popover__content {
 876    min-width: 280px;
 877  }
 878  
 879  .edit-post-template-top-area__second-menu-group {
 880    margin-left: -12px;
 881    margin-right: -12px;
 882    padding: 12px;
 883    padding-bottom: 0;
 884    border-top: 1px solid #ddd;
 885  }
 886  .edit-post-template-top-area__second-menu-group .edit-post-template-top-area__delete-template-button {
 887    display: flex;
 888    justify-content: center;
 889  }
 890  .edit-post-template-top-area__second-menu-group .edit-post-template-top-area__delete-template-button .components-menu-item__item {
 891    margin-right: 0;
 892  }
 893  
 894  .edit-post-keyboard-shortcut-help-modal__section {
 895    margin: 0 0 2rem 0;
 896  }
 897  .edit-post-keyboard-shortcut-help-modal__main-shortcuts .edit-post-keyboard-shortcut-help-modal__shortcut-list {
 898    margin-top: -25px;
 899  }
 900  .edit-post-keyboard-shortcut-help-modal__section-title {
 901    font-size: 0.9rem;
 902    font-weight: 600;
 903  }
 904  .edit-post-keyboard-shortcut-help-modal__shortcut {
 905    display: flex;
 906    align-items: baseline;
 907    padding: 0.6rem 0;
 908    border-top: 1px solid #ddd;
 909    margin-bottom: 0;
 910  }
 911  .edit-post-keyboard-shortcut-help-modal__shortcut:last-child {
 912    border-bottom: 1px solid #ddd;
 913  }
 914  .edit-post-keyboard-shortcut-help-modal__shortcut:empty {
 915    display: none;
 916  }
 917  .edit-post-keyboard-shortcut-help-modal__shortcut-term {
 918    font-weight: 600;
 919    margin: 0 0 0 1rem;
 920    text-align: right;
 921  }
 922  .edit-post-keyboard-shortcut-help-modal__shortcut-description {
 923    flex: 1;
 924    margin: 0;
 925    flex-basis: auto;
 926  }
 927  .edit-post-keyboard-shortcut-help-modal__shortcut-key-combination {
 928    display: block;
 929    background: none;
 930    margin: 0;
 931    padding: 0;
 932  }
 933  .edit-post-keyboard-shortcut-help-modal__shortcut-key-combination + .edit-post-keyboard-shortcut-help-modal__shortcut-key-combination {
 934    margin-top: 10px;
 935  }
 936  .edit-post-keyboard-shortcut-help-modal__shortcut-key {
 937    padding: 0.25rem 0.5rem;
 938    border-radius: 8%;
 939    margin: 0 0.2rem 0 0.2rem;
 940  }
 941  .edit-post-keyboard-shortcut-help-modal__shortcut-key:last-child {
 942    margin: 0 0 0 0.2rem;
 943  }
 944  
 945  .edit-post-layout__metaboxes {
 946    flex-shrink: 0;
 947  }
 948  
 949  .edit-post-layout__metaboxes:not(:empty) {
 950    border-top: 1px solid #ddd;
 951    padding: 10px 0 10px;
 952    clear: both;
 953  }
 954  .edit-post-layout__metaboxes:not(:empty) .edit-post-meta-boxes-area {
 955    margin: auto 20px;
 956  }
 957  
 958  .edit-post-layout .components-editor-notices__snackbar {
 959    position: fixed;
 960    right: 0;
 961    bottom: 40px;
 962    padding-left: 16px;
 963    padding-right: 16px;
 964  }
 965  
 966  .edit-post-layout .components-editor-notices__snackbar {
 967    /* Set left position when auto-fold is not on the body element. */
 968    left: 0;
 969  }
 970  @media (min-width: 783px) {
 971    .edit-post-layout .components-editor-notices__snackbar {
 972      left: 160px;
 973    }
 974  }
 975  
 976  .auto-fold .edit-post-layout .components-editor-notices__snackbar {
 977    /* Auto fold is when on smaller breakpoints, nav menu auto collapses. */
 978  }
 979  @media (min-width: 783px) {
 980    .auto-fold .edit-post-layout .components-editor-notices__snackbar {
 981      left: 36px;
 982    }
 983  }
 984  @media (min-width: 961px) {
 985    .auto-fold .edit-post-layout .components-editor-notices__snackbar {
 986      left: 160px;
 987    }
 988  }
 989  
 990  /* Sidebar manually collapsed. */
 991  .folded .edit-post-layout .components-editor-notices__snackbar {
 992    left: 0;
 993  }
 994  @media (min-width: 783px) {
 995    .folded .edit-post-layout .components-editor-notices__snackbar {
 996      left: 36px;
 997    }
 998  }
 999  
1000  body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar {
1001    left: 0 !important;
1002  }
1003  
1004  .edit-post-layout .editor-post-publish-panel {
1005    position: fixed;
1006    z-index: 100001;
1007    top: 46px;
1008    bottom: 0;
1009    right: 0;
1010    left: 0;
1011    overflow: auto;
1012  }
1013  @media (min-width: 782px) {
1014    .edit-post-layout .editor-post-publish-panel {
1015      z-index: 99998;
1016      top: 32px;
1017      left: auto;
1018      width: 281px;
1019      border-left: 1px solid #ddd;
1020      transform: translateX(100%);
1021      animation: edit-post-post-publish-panel__slide-in-animation 0.1s forwards;
1022    }
1023  }
1024  @media (min-width: 782px) and (prefers-reduced-motion: reduce) {
1025    .edit-post-layout .editor-post-publish-panel {
1026      animation-duration: 1ms;
1027      animation-delay: 0s;
1028    }
1029  }
1030  @media (min-width: 782px) {
1031    body.is-fullscreen-mode .edit-post-layout .editor-post-publish-panel {
1032      top: 0;
1033    }
1034  }
1035  @media (min-width: 782px) {
1036    [role=region]:focus .edit-post-layout .editor-post-publish-panel {
1037      transform: translateX(0%);
1038    }
1039  }
1040  
1041  @keyframes edit-post-post-publish-panel__slide-in-animation {
1042    100% {
1043      transform: translateX(0%);
1044    }
1045  }
1046  .edit-post-layout .editor-post-publish-panel__header-publish-button {
1047    justify-content: center;
1048  }
1049  
1050  .edit-post-layout__toggle-publish-panel,
1051  .edit-post-layout__toggle-sidebar-panel,
1052  .edit-post-layout__toggle-entities-saved-states-panel {
1053    z-index: 100000;
1054    position: fixed !important;
1055    top: -9999em;
1056    bottom: auto;
1057    left: auto;
1058    right: 0;
1059    width: 280px;
1060    background-color: #fff;
1061    border: 1px dotted #ddd;
1062    height: auto !important;
1063    padding: 24px;
1064    display: flex;
1065    justify-content: center;
1066  }
1067  .interface-interface-skeleton__actions:focus .edit-post-layout__toggle-publish-panel, .interface-interface-skeleton__actions:focus-within .edit-post-layout__toggle-publish-panel,
1068  .interface-interface-skeleton__actions:focus .edit-post-layout__toggle-sidebar-panel,
1069  .interface-interface-skeleton__actions:focus-within .edit-post-layout__toggle-sidebar-panel,
1070  .interface-interface-skeleton__actions:focus .edit-post-layout__toggle-entities-saved-states-panel,
1071  .interface-interface-skeleton__actions:focus-within .edit-post-layout__toggle-entities-saved-states-panel {
1072    top: auto;
1073    bottom: 0;
1074  }
1075  
1076  @media (min-width: 600px) {
1077    .edit-post-manage-blocks-modal {
1078      height: calc(100% - 60px - 60px);
1079    }
1080  }
1081  
1082  .edit-post-manage-blocks-modal .components-modal__content {
1083    padding-bottom: 0;
1084    display: flex;
1085    flex-direction: column;
1086  }
1087  
1088  .edit-post-manage-blocks-modal .components-modal__header {
1089    flex-shrink: 0;
1090    margin-bottom: 0;
1091  }
1092  
1093  .edit-post-manage-blocks-modal__content {
1094    display: flex;
1095    flex-direction: column;
1096    flex: 0 1 100%;
1097    min-height: 0;
1098  }
1099  
1100  .edit-post-manage-blocks-modal__no-results {
1101    font-style: italic;
1102    padding: 24px 0;
1103    text-align: center;
1104  }
1105  
1106  .edit-post-manage-blocks-modal__search {
1107    margin: 16px 0;
1108  }
1109  .edit-post-manage-blocks-modal__search .components-base-control__field {
1110    margin-bottom: 0;
1111  }
1112  .edit-post-manage-blocks-modal__search .components-base-control__label {
1113    margin-top: -4px;
1114  }
1115  .edit-post-manage-blocks-modal__search input[type=search].components-text-control__input {
1116    padding: 8px;
1117    border-radius: 2px;
1118  }
1119  
1120  .edit-post-manage-blocks-modal__disabled-blocks-count {
1121    border-top: 1px solid #ddd;
1122    margin-left: -24px;
1123    margin-right: -24px;
1124    padding-top: 0.6rem;
1125    padding-bottom: 0.6rem;
1126    padding-left: 24px;
1127    padding-right: 24px;
1128    background-color: #f0f0f0;
1129  }
1130  
1131  .edit-post-manage-blocks-modal__category {
1132    margin: 0 0 2rem 0;
1133  }
1134  
1135  .edit-post-manage-blocks-modal__category-title {
1136    position: sticky;
1137    top: 0;
1138    padding: 16px 0;
1139    background-color: #fff;
1140    z-index: 1;
1141  }
1142  .edit-post-manage-blocks-modal__category-title .components-base-control__field {
1143    margin-bottom: 0;
1144  }
1145  .edit-post-manage-blocks-modal__category-title .components-checkbox-control__label {
1146    font-size: 0.9rem;
1147    font-weight: 600;
1148  }
1149  
1150  .edit-post-manage-blocks-modal__show-all {
1151    margin-right: 8px;
1152  }
1153  
1154  .edit-post-manage-blocks-modal__checklist {
1155    margin-top: 0;
1156  }
1157  
1158  .edit-post-manage-blocks-modal__checklist-item {
1159    margin-bottom: 0;
1160    padding-left: 16px;
1161    border-top: 1px solid #ddd;
1162  }
1163  .edit-post-manage-blocks-modal__checklist-item:last-child {
1164    border-bottom: 1px solid #ddd;
1165  }
1166  .edit-post-manage-blocks-modal__checklist-item .components-base-control__field {
1167    align-items: center;
1168    display: flex;
1169    margin: 0;
1170  }
1171  .components-modal__content .edit-post-manage-blocks-modal__checklist-item.components-checkbox-control__input-container {
1172    margin: 0 8px;
1173  }
1174  .edit-post-manage-blocks-modal__checklist-item .components-checkbox-control__label {
1175    display: flex;
1176    align-items: center;
1177    justify-content: space-between;
1178    flex-grow: 1;
1179    padding: 0.6rem 0 0.6rem 10px;
1180  }
1181  .edit-post-manage-blocks-modal__checklist-item .block-editor-block-icon {
1182    margin-right: 10px;
1183    fill: #1e1e1e;
1184  }
1185  
1186  .edit-post-manage-blocks-modal__results {
1187    height: 100%;
1188    overflow: auto;
1189    margin-left: -32px;
1190    margin-right: -32px;
1191    padding-left: 32px;
1192    padding-right: 32px;
1193    border-top: 1px solid #ddd;
1194  }
1195  
1196  .edit-post-meta-boxes-area {
1197    position: relative;
1198    /**
1199     * The wordpress default for most meta-box elements is content-box. Some
1200     * elements such as textarea and input are set to border-box in forms.css.
1201     * These elements therefore specifically set back to border-box here, while
1202     * other elements (such as .button) are unaffected by Gutenberg's style
1203     * because of their higher specificity.
1204     */
1205    /* Match width and positioning of the meta boxes. Override default styles. */
1206    /* Override Default meta box stylings */
1207  }
1208  .edit-post-meta-boxes-area__container,
1209  .edit-post-meta-boxes-area .inside {
1210    box-sizing: content-box;
1211  }
1212  .edit-post-meta-boxes-area textarea,
1213  .edit-post-meta-boxes-area input {
1214    box-sizing: border-box;
1215  }
1216  .edit-post-meta-boxes-area #poststuff {
1217    margin: 0 auto;
1218    padding-top: 0;
1219    min-width: auto;
1220  }
1221  .edit-post-meta-boxes-area #poststuff h3.hndle,
1222  .edit-post-meta-boxes-area #poststuff .stuffbox > h3,
1223  .edit-post-meta-boxes-area #poststuff h2.hndle {
1224    /* WordPress selectors yolo */
1225    box-sizing: border-box;
1226    color: inherit;
1227    font-weight: 600;
1228    outline: none;
1229    padding: 15px;
1230    position: relative;
1231    width: 100%;
1232  }
1233  .edit-post-meta-boxes-area .postbox {
1234    border: 0;
1235    color: inherit;
1236    margin-bottom: 0;
1237  }
1238  .edit-post-meta-boxes-area .postbox > .inside {
1239    border-bottom: 1px solid #ddd;
1240    color: inherit;
1241    padding: 0 14px 14px;
1242    margin: 0;
1243  }
1244  .edit-post-meta-boxes-area .postbox .handlediv {
1245    height: 44px;
1246    width: 44px;
1247  }
1248  .edit-post-meta-boxes-area.is-loading::before {
1249    position: absolute;
1250    top: 0;
1251    left: 0;
1252    right: 0;
1253    bottom: 0;
1254    content: "";
1255    background: transparent;
1256    z-index: 1;
1257  }
1258  .edit-post-meta-boxes-area .components-spinner {
1259    position: absolute;
1260    top: 10px;
1261    right: 20px;
1262    z-index: 5;
1263  }
1264  .edit-post-meta-boxes-area .is-hidden {
1265    display: none;
1266  }
1267  .edit-post-meta-boxes-area .metabox-location-side .postbox input[type=checkbox] {
1268    border: 1px solid #757575;
1269  }
1270  .edit-post-meta-boxes-area .metabox-location-side .postbox input[type=checkbox]:checked {
1271    background: #fff;
1272    border-color: #757575;
1273  }
1274  .edit-post-meta-boxes-area .metabox-location-side .postbox input[type=checkbox]::before {
1275    margin: -3px -4px;
1276  }
1277  
1278  .edit-post-meta-boxes-area__clear {
1279    clear: both;
1280  }
1281  
1282  .edit-post-preferences-modal {
1283    min-width: 360px;
1284    width: 100%;
1285  }
1286  @media (min-width: 782px) {
1287    .edit-post-preferences-modal {
1288      width: auto;
1289    }
1290  }
1291  @media (min-width: 600px) {
1292    .edit-post-preferences-modal {
1293      height: calc(100% - 60px - 60px);
1294    }
1295  }
1296  .edit-post-preferences-modal .components-navigation {
1297    background-color: #fff;
1298    margin: -8px;
1299    padding: 8px;
1300  }
1301  .edit-post-preferences-modal .components-navigation .components-navigation__menu {
1302    margin: 0;
1303    color: #1e1e1e;
1304  }
1305  .edit-post-preferences-modal .components-navigation .components-navigation__menu .components-navigation__item {
1306    color: #1e1e1e;
1307  }
1308  .edit-post-preferences-modal .components-navigation .components-navigation__menu .components-navigation__item > button {
1309    color: inherit;
1310    padding: 3px 16px;
1311    height: 48px;
1312  }
1313  .edit-post-preferences-modal .components-navigation .components-navigation__menu .components-navigation__item > button:focus {
1314    background: #f0f0f0;
1315    font-weight: 500;
1316  }
1317  .edit-post-preferences-modal .components-navigation .components-navigation__menu .components-navigation__item > button:hover {
1318    color: var(--wp-admin-theme-color);
1319  }
1320  .edit-post-preferences-modal .components-navigation .components-navigation__menu .components-navigation__item .components-toggle-control__label {
1321    color: inherit;
1322  }
1323  .edit-post-preferences-modal .components-navigation .components-navigation__menu .components-navigation__menu-title-heading {
1324    color: inherit;
1325    border-bottom: 1px solid #ddd;
1326    padding-left: 0;
1327    padding-right: 0;
1328  }
1329  .edit-post-preferences-modal .components-navigation .components-navigation__menu .components-navigation__back-button {
1330    color: inherit;
1331    padding-left: 0;
1332  }
1333  .edit-post-preferences-modal .components-navigation .components-navigation__menu .components-navigation__back-button:hover {
1334    color: var(--wp-admin-theme-color);
1335  }
1336  .edit-post-preferences-modal .components-navigation .components-navigation__menu .edit-post-preferences-modal__custom-fields-confirmation-button {
1337    width: auto;
1338  }
1339  .edit-post-preferences-modal .edit-post-preferences__tabs {
1340    display: flex;
1341    flex-direction: row;
1342  }
1343  .edit-post-preferences-modal .edit-post-preferences__tabs .components-tab-panel__tabs {
1344    width: 160px;
1345  }
1346  .edit-post-preferences-modal .edit-post-preferences__tabs .components-tab-panel__tabs .components-tab-panel__tabs-item {
1347    border-radius: 2px;
1348    font-weight: 400;
1349  }
1350  .edit-post-preferences-modal .edit-post-preferences__tabs .components-tab-panel__tabs .components-tab-panel__tabs-item.is-active {
1351    background: #f0f0f0;
1352    box-shadow: none;
1353    font-weight: 500;
1354  }
1355  .edit-post-preferences-modal .edit-post-preferences__tabs .components-tab-panel__tabs .components-tab-panel__tabs-item:focus:not(:disabled) {
1356    box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
1357  }
1358  .edit-post-preferences-modal .edit-post-preferences__tabs .components-tab-panel__tab-content {
1359    width: 500px;
1360    padding-left: 24px;
1361  }
1362  .edit-post-preferences-modal__section {
1363    margin: 0 0 2.5rem 0;
1364  }
1365  .edit-post-preferences-modal__section-title {
1366    font-size: 0.9rem;
1367    font-weight: 600;
1368  }
1369  .edit-post-preferences-modal__option .components-base-control .components-base-control__field {
1370    align-items: center;
1371    display: flex;
1372    margin-bottom: 0;
1373  }
1374  .edit-post-preferences-modal__option .components-base-control .components-base-control__field > label {
1375    flex-grow: 1;
1376    padding: 0.6rem 0 0.6rem 10px;
1377  }
1378  .edit-post-preferences-modal__custom-fields-confirmation-message, .edit-post-preferences-modal__custom-fields-confirmation-button {
1379    margin: 0 0 0.6rem 48px;
1380  }
1381  @media (min-width: 782px) {
1382    .edit-post-preferences-modal__custom-fields-confirmation-message, .edit-post-preferences-modal__custom-fields-confirmation-button {
1383      margin-left: 38px;
1384    }
1385  }
1386  @media (min-width: 600px) {
1387    .edit-post-preferences-modal__custom-fields-confirmation-message, .edit-post-preferences-modal__custom-fields-confirmation-button {
1388      max-width: 300px;
1389    }
1390  }
1391  .edit-post-preferences-modal .components-base-control__help {
1392    margin: -8px 0 8px 58px;
1393    font-size: 12px;
1394    font-style: normal;
1395    color: #757575;
1396  }
1397  .edit-post-preferences-modal .edit-post-preferences-modal__section-description {
1398    margin: -8px 0 8px 0;
1399    font-size: 12px;
1400    font-style: normal;
1401    color: #757575;
1402  }
1403  
1404  .edit-post-editor__inserter-panel,
1405  .edit-post-editor__list-view-panel {
1406    height: 100%;
1407    display: flex;
1408    flex-direction: column;
1409  }
1410  
1411  .edit-post-editor__list-view-panel {
1412    min-width: 350px;
1413  }
1414  
1415  .edit-post-editor__inserter-panel-header {
1416    padding-top: 8px;
1417    padding-right: 8px;
1418    display: flex;
1419    justify-content: flex-end;
1420  }
1421  @media (min-width: 782px) {
1422    .edit-post-editor__inserter-panel-header {
1423      display: none;
1424    }
1425  }
1426  
1427  .edit-post-editor__inserter-panel-content,
1428  .edit-post-editor__list-view-panel-content {
1429    height: calc(100% - 36px - 8px);
1430  }
1431  
1432  @media (min-width: 782px) {
1433    .edit-post-editor__inserter-panel-content {
1434      height: 100%;
1435    }
1436  }
1437  
1438  .edit-post-editor__list-view-panel-header {
1439    align-items: center;
1440    border-bottom: 1px solid #ddd;
1441    display: flex;
1442    justify-content: space-between;
1443    height: 48px;
1444    padding-left: 16px;
1445    padding-right: 4px;
1446  }
1447  
1448  .edit-post-editor__list-view-panel-content {
1449    overflow-y: auto;
1450    padding: 8px;
1451  }
1452  
1453  .components-panel__header.edit-post-sidebar__panel-tabs {
1454    justify-content: flex-start;
1455    padding-left: 0;
1456    padding-right: 16px;
1457    border-top: 0;
1458    margin-top: 0;
1459  }
1460  .components-panel__header.edit-post-sidebar__panel-tabs ul {
1461    display: flex;
1462  }
1463  .components-panel__header.edit-post-sidebar__panel-tabs li {
1464    margin: 0;
1465  }
1466  .components-panel__header.edit-post-sidebar__panel-tabs .components-button.has-icon {
1467    display: none;
1468    margin: 0 0 0 auto;
1469    padding: 0;
1470    min-width: 24px;
1471    height: 24px;
1472  }
1473  @media (min-width: 782px) {
1474    .components-panel__header.edit-post-sidebar__panel-tabs .components-button.has-icon {
1475      display: flex;
1476    }
1477  }
1478  
1479  .components-panel__body.is-opened.edit-post-last-revision__panel {
1480    padding: 0;
1481    height: 48px;
1482  }
1483  
1484  .editor-post-last-revision__title.components-button {
1485    padding: 16px;
1486  }
1487  
1488  .editor-post-author__select {
1489    margin: -5px 0;
1490    width: 100%;
1491  }
1492  @supports (position: sticky) {
1493    .editor-post-author__select {
1494      width: auto;
1495    }
1496  }
1497  
1498  .edit-post-post-link__link-post-name {
1499    font-weight: 600;
1500  }
1501  
1502  .edit-post-post-link__preview-label {
1503    font-weight: 400;
1504    margin: 0;
1505  }
1506  
1507  .edit-post-post-link__link {
1508    text-align: left;
1509    word-wrap: break-word;
1510    display: block;
1511  }
1512  
1513  /* rtl:begin:ignore */
1514  .edit-post-post-link__preview-link-container {
1515    direction: ltr;
1516  }
1517  
1518  /* rtl:end:ignore */
1519  .edit-post-post-schedule {
1520    width: 100%;
1521    position: relative;
1522    justify-content: left;
1523  }
1524  .edit-post-post-schedule span {
1525    display: block;
1526    width: 45%;
1527  }
1528  
1529  .components-button.edit-post-post-schedule__toggle {
1530    text-align: right;
1531  }
1532  
1533  .edit-post-post-schedule__dialog .components-popover__content > div {
1534    padding: 0;
1535  }
1536  
1537  .editor-post-slug__input {
1538    margin: -5px 0;
1539    padding: 2px;
1540  }
1541  
1542  .edit-post-post-status .edit-post-post-publish-dropdown__switch-to-draft {
1543    margin-top: 15px;
1544    width: 100%;
1545    text-align: center;
1546  }
1547  
1548  .edit-post-post-visibility {
1549    width: 100%;
1550    justify-content: left;
1551  }
1552  .edit-post-post-visibility span {
1553    display: block;
1554    width: 45%;
1555  }
1556  
1557  @media (min-width: 782px) {
1558    .edit-post-post-visibility__dialog .components-popover__content {
1559      width: 257px;
1560    }
1561  }
1562  
1563  .edit-post-post-visibility__dialog-legend {
1564    font-weight: 600;
1565  }
1566  
1567  .edit-post-post-visibility__choice {
1568    margin: 10px 0;
1569  }
1570  
1571  .edit-post-post-visibility__dialog-radio,
1572  .edit-post-post-visibility__dialog-label {
1573    vertical-align: top;
1574  }
1575  
1576  .edit-post-post-visibility__dialog-password-input {
1577    width: calc(100% - 20px);
1578    margin-left: 20px;
1579  }
1580  
1581  .edit-post-post-visibility__dialog-info {
1582    color: #757575;
1583    padding-left: 20px;
1584    font-style: italic;
1585    margin: 4px 0 0;
1586    line-height: 1.4;
1587  }
1588  
1589  .components-button.edit-post-sidebar__panel-tab {
1590    border-radius: 0;
1591    height: 48px;
1592    background: transparent;
1593    border: none;
1594    box-shadow: none;
1595    cursor: pointer;
1596    display: inline-block;
1597    padding: 3px 15px;
1598    margin-left: 0;
1599    font-weight: 500;
1600  }
1601  .components-button.edit-post-sidebar__panel-tab::after {
1602    content: attr(data-label);
1603    display: block;
1604    font-weight: 600;
1605    height: 0;
1606    overflow: hidden;
1607    speak: none;
1608    visibility: hidden;
1609  }
1610  .components-button.edit-post-sidebar__panel-tab.is-active {
1611    box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) transparent, inset 0 -4px 0 0 var(--wp-admin-theme-color);
1612    position: relative;
1613    z-index: 1;
1614  }
1615  .components-button.edit-post-sidebar__panel-tab.is-active::before {
1616    content: "";
1617    position: absolute;
1618    top: 0;
1619    bottom: 1px;
1620    right: 0;
1621    left: 0;
1622    border-bottom: 4px solid transparent;
1623  }
1624  .components-button.edit-post-sidebar__panel-tab:focus {
1625    box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
1626    position: relative;
1627    z-index: 1;
1628  }
1629  .components-button.edit-post-sidebar__panel-tab.is-active:focus {
1630    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);
1631  }
1632  
1633  @media (min-width: 782px) {
1634    .edit-post-template__modal .components-base-control {
1635      width: 320px;
1636    }
1637  }
1638  .edit-post-template__modal .components-modal__header {
1639    border-bottom: none;
1640  }
1641  .edit-post-template__modal .components-modal__content::before {
1642    margin-bottom: 4px;
1643  }
1644  
1645  .edit-post-template__modal-actions {
1646    margin-top: 12px;
1647  }
1648  
1649  .edit-post-template-modal__tip {
1650    padding: 16px 24px;
1651    background: #f0f0f0;
1652    border-radius: 2px;
1653  }
1654  @media (min-width: 782px) {
1655    .edit-post-template-modal__tip {
1656      width: 240px;
1657    }
1658  }
1659  
1660  .edit-post-template__actions button:not(:last-child) {
1661    margin-right: 8px;
1662  }
1663  
1664  h2.edit-post-template-summary__title {
1665    margin: 0;
1666    line-height: 24px;
1667  }
1668  
1669  .edit-post-text-editor {
1670    position: relative;
1671    width: 100%;
1672    background-color: #fff;
1673    flex-grow: 1;
1674  }
1675  .edit-post-text-editor .editor-post-title.editor-post-title__block {
1676    max-width: none;
1677    line-height: 1.4;
1678  }
1679  .edit-post-text-editor .editor-post-title.editor-post-title__block .editor-post-title__input.editor-post-title__input.editor-post-title__input {
1680    font-family: Menlo, Consolas, monaco, monospace;
1681    font-size: 2.5em;
1682    font-weight: normal;
1683  }
1684  .edit-post-text-editor .editor-post-title.editor-post-title__block .editor-post-title__input {
1685    border: 1px solid #949494;
1686    margin-bottom: -1px;
1687    padding: 16px;
1688  }
1689  @media (min-width: 600px) {
1690    .edit-post-text-editor .editor-post-title.editor-post-title__block .editor-post-title__input {
1691      padding: 24px;
1692    }
1693  }
1694  .edit-post-text-editor .editor-post-title.editor-post-title__block .editor-post-title__input:focus {
1695    border-color: var(--wp-admin-theme-color);
1696    box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
1697  }
1698  @media (min-width: 600px) {
1699    .edit-post-text-editor .editor-post-title.editor-post-title__block {
1700      padding: 0;
1701    }
1702  }
1703  
1704  .edit-post-text-editor__body {
1705    width: 100%;
1706    padding: 0 12px 12px 12px;
1707    max-width: 1080px;
1708    margin-left: auto;
1709    margin-right: auto;
1710  }
1711  @media (min-width: 960px) {
1712    .edit-post-text-editor__body {
1713      padding: 16px 24px 96px 24px;
1714      padding: 0 24px 24px 24px;
1715    }
1716  }
1717  
1718  .edit-post-text-editor__toolbar {
1719    position: sticky;
1720    z-index: 1;
1721    top: 0;
1722    left: 0;
1723    right: 0;
1724    display: flex;
1725    background: rgba(255, 255, 255, 0.8);
1726    padding: 4px 12px;
1727  }
1728  @media (min-width: 600px) {
1729    .edit-post-text-editor__toolbar {
1730      padding: 12px;
1731    }
1732  }
1733  @media (min-width: 960px) {
1734    .edit-post-text-editor__toolbar {
1735      padding: 12px 24px;
1736    }
1737  }
1738  .edit-post-text-editor__toolbar h2 {
1739    line-height: 36px;
1740    margin: 0 auto 0 0;
1741    font-size: 13px;
1742    color: #1e1e1e;
1743  }
1744  .edit-post-text-editor__toolbar .components-button svg {
1745    order: 1;
1746  }
1747  
1748  .edit-post-visual-editor {
1749    position: relative;
1750    display: flex;
1751    flex-flow: column;
1752    background-color: #2f2f2f;
1753    flex: 1 1 auto;
1754  }
1755  .edit-post-visual-editor .components-button {
1756    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
1757    font-size: 13px;
1758    padding: 6px 12px;
1759  }
1760  .edit-post-visual-editor .components-button.is-tertiary, .edit-post-visual-editor .components-button.has-icon {
1761    padding: 6px;
1762  }
1763  @supports (position: sticky) {
1764    .edit-post-visual-editor {
1765      flex-basis: 100%;
1766    }
1767  }
1768  
1769  .edit-post-visual-editor__post-title-wrapper .editor-post-title {
1770    margin-top: 2em;
1771    margin-left: auto;
1772    margin-right: auto;
1773    margin-bottom: 0;
1774  }
1775  
1776  .edit-post-visual-editor__exit-template-mode {
1777    position: absolute;
1778    top: 8px;
1779    left: 8px;
1780    color: #fff;
1781  }
1782  .edit-post-visual-editor__exit-template-mode:active:not([aria-disabled=true]), .edit-post-visual-editor__exit-template-mode:focus:not([aria-disabled=true]), .edit-post-visual-editor__exit-template-mode:hover {
1783    color: #f0f0f0;
1784  }
1785  
1786  .edit-post-visual-editor__content-area {
1787    width: 100%;
1788    height: 100%;
1789    position: relative;
1790    display: flex;
1791  }
1792  
1793  .edit-post-welcome-guide {
1794    width: 312px;
1795  }
1796  .edit-post-welcome-guide__image {
1797    background: #00a0d2;
1798    margin: 0 0 16px;
1799  }
1800  .edit-post-welcome-guide__heading {
1801    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
1802    font-size: 24px;
1803    line-height: 1.4;
1804    margin: 16px 0 16px 0;
1805    padding: 0 32px;
1806  }
1807  .edit-post-welcome-guide__text {
1808    font-size: 13px;
1809    line-height: 1.4;
1810    margin: 0 0 24px 0;
1811    padding: 0 32px;
1812  }
1813  .edit-post-welcome-guide__inserter-icon {
1814    margin: 0 4px;
1815    vertical-align: text-top;
1816  }
1817  
1818  /**
1819   * Animations
1820   */
1821  @keyframes edit-post__fade-in-animation {
1822    from {
1823      opacity: 0;
1824    }
1825    to {
1826      opacity: 1;
1827    }
1828  }
1829  html.wp-toolbar {
1830    background: #fff;
1831  }
1832  
1833  body.block-editor-page {
1834    background: #fff;
1835    /* We hide legacy notices in Gutenberg Based Pages, because they were not designed in a way that scaled well.
1836       Plugins can use Gutenberg notices if they need to pass on information to the user when they are editing. */
1837  }
1838  body.block-editor-page #wpcontent {
1839    padding-left: 0;
1840  }
1841  body.block-editor-page #wpbody-content {
1842    padding-bottom: 0;
1843  }
1844  body.block-editor-page #wpbody-content > div:not(.block-editor):not(#screen-meta) {
1845    display: none;
1846  }
1847  body.block-editor-page #wpfooter {
1848    display: none;
1849  }
1850  body.block-editor-page .a11y-speak-region {
1851    left: -1px;
1852    top: -1px;
1853  }
1854  body.block-editor-page ul#adminmenu a.wp-has-current-submenu::after,
1855  body.block-editor-page ul#adminmenu > li.current > a.current::after {
1856    border-right-color: #fff;
1857  }
1858  body.block-editor-page .media-frame select.attachment-filters:last-of-type {
1859    width: auto;
1860    max-width: 100%;
1861  }
1862  
1863  .block-editor-page #wpwrap {
1864    overflow-y: auto;
1865  }
1866  @media (min-width: 782px) {
1867    .block-editor-page #wpwrap {
1868      overflow-y: initial;
1869    }
1870  }
1871  
1872  .edit-post-header,
1873  .edit-post-visual-editor,
1874  .edit-post-text-editor,
1875  .edit-post-sidebar,
1876  .editor-post-publish-panel,
1877  .components-popover,
1878  .components-modal__frame,
1879  .edit-post-editor__inserter-panel {
1880    box-sizing: border-box;
1881  }
1882  .edit-post-header *,
1883  .edit-post-header *::before,
1884  .edit-post-header *::after,
1885  .edit-post-visual-editor *,
1886  .edit-post-visual-editor *::before,
1887  .edit-post-visual-editor *::after,
1888  .edit-post-text-editor *,
1889  .edit-post-text-editor *::before,
1890  .edit-post-text-editor *::after,
1891  .edit-post-sidebar *,
1892  .edit-post-sidebar *::before,
1893  .edit-post-sidebar *::after,
1894  .editor-post-publish-panel *,
1895  .editor-post-publish-panel *::before,
1896  .editor-post-publish-panel *::after,
1897  .components-popover *,
1898  .components-popover *::before,
1899  .components-popover *::after,
1900  .components-modal__frame *,
1901  .components-modal__frame *::before,
1902  .components-modal__frame *::after,
1903  .edit-post-editor__inserter-panel *,
1904  .edit-post-editor__inserter-panel *::before,
1905  .edit-post-editor__inserter-panel *::after {
1906    box-sizing: inherit;
1907  }
1908  
1909  @media (min-width: 600px) {
1910    .block-editor__container {
1911      position: absolute;
1912      top: 0;
1913      right: 0;
1914      bottom: 0;
1915      left: 0;
1916      min-height: calc(100vh - 46px);
1917    }
1918  }
1919  @media (min-width: 782px) {
1920    .block-editor__container {
1921      min-height: calc(100vh - 32px);
1922    }
1923    body.is-fullscreen-mode .block-editor__container {
1924      min-height: 100vh;
1925    }
1926  }
1927  .block-editor__container img {
1928    max-width: 100%;
1929    height: auto;
1930  }
1931  .block-editor__container iframe {
1932    width: 100%;
1933  }
1934  
1935  body.admin-color-light {
1936    --wp-admin-theme-color: #0085ba;
1937    --wp-admin-theme-color-darker-10: #0073a1;
1938    --wp-admin-theme-color-darker-20: #006187;
1939    --wp-admin-border-width-focus: 2px;
1940  }
1941  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
1942    body.admin-color-light {
1943      --wp-admin-border-width-focus: 1.5px;
1944    }
1945  }
1946  
1947  body.admin-color-modern {
1948    --wp-admin-theme-color: #3858e9;
1949    --wp-admin-theme-color-darker-10: #2145e6;
1950    --wp-admin-theme-color-darker-20: #183ad6;
1951    --wp-admin-border-width-focus: 2px;
1952  }
1953  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
1954    body.admin-color-modern {
1955      --wp-admin-border-width-focus: 1.5px;
1956    }
1957  }
1958  
1959  body.admin-color-blue {
1960    --wp-admin-theme-color: #096484;
1961    --wp-admin-theme-color-darker-10: #07526c;
1962    --wp-admin-theme-color-darker-20: #064054;
1963    --wp-admin-border-width-focus: 2px;
1964  }
1965  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
1966    body.admin-color-blue {
1967      --wp-admin-border-width-focus: 1.5px;
1968    }
1969  }
1970  
1971  body.admin-color-coffee {
1972    --wp-admin-theme-color: #46403c;
1973    --wp-admin-theme-color-darker-10: #383330;
1974    --wp-admin-theme-color-darker-20: #2b2724;
1975    --wp-admin-border-width-focus: 2px;
1976  }
1977  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
1978    body.admin-color-coffee {
1979      --wp-admin-border-width-focus: 1.5px;
1980    }
1981  }
1982  
1983  body.admin-color-ectoplasm {
1984    --wp-admin-theme-color: #523f6d;
1985    --wp-admin-theme-color-darker-10: #46365d;
1986    --wp-admin-theme-color-darker-20: #3a2c4d;
1987    --wp-admin-border-width-focus: 2px;
1988  }
1989  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
1990    body.admin-color-ectoplasm {
1991      --wp-admin-border-width-focus: 1.5px;
1992    }
1993  }
1994  
1995  body.admin-color-midnight {
1996    --wp-admin-theme-color: #e14d43;
1997    --wp-admin-theme-color-darker-10: #dd382d;
1998    --wp-admin-theme-color-darker-20: #d02c21;
1999    --wp-admin-border-width-focus: 2px;
2000  }
2001  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
2002    body.admin-color-midnight {
2003      --wp-admin-border-width-focus: 1.5px;
2004    }
2005  }
2006  
2007  body.admin-color-ocean {
2008    --wp-admin-theme-color: #627c83;
2009    --wp-admin-theme-color-darker-10: #576e74;
2010    --wp-admin-theme-color-darker-20: #4c6066;
2011    --wp-admin-border-width-focus: 2px;
2012  }
2013  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
2014    body.admin-color-ocean {
2015      --wp-admin-border-width-focus: 1.5px;
2016    }
2017  }
2018  
2019  body.admin-color-sunrise {
2020    --wp-admin-theme-color: #dd823b;
2021    --wp-admin-theme-color-darker-10: #d97426;
2022    --wp-admin-theme-color-darker-20: #c36922;
2023    --wp-admin-border-width-focus: 2px;
2024  }
2025  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
2026    body.admin-color-sunrise {
2027      --wp-admin-border-width-focus: 1.5px;
2028    }
2029  }