[Summary view] [Print] [Text view]

   1  /**
   2   * Typography
   3   */
   4  /**
   5   * SCSS Variables.
   6   *
   7   * Please use variables from this sheet to ensure consistency across the UI.
   8   * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
   9   * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
  10   */
  11  /**
  12   * Colors
  13   */
  14  /**
  15   * Fonts & basic variables.
  16   */
  17  /**
  18   * Typography
  19   */
  20  /**
  21   * Grid System.
  22   * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
  23   */
  24  /**
  25   * Radius scale.
  26   */
  27  /**
  28   * Elevation scale.
  29   */
  30  /**
  31   * Dimensions.
  32   */
  33  /**
  34   * Mobile specific styles
  35   */
  36  /**
  37   * Editor styles.
  38   */
  39  /**
  40   * Block & Editor UI.
  41   */
  42  /**
  43   * Block paddings.
  44   */
  45  /**
  46   * React Native specific.
  47   * These variables do not appear to be used anywhere else.
  48   */
  49  /**
  50   * Breakpoints & Media Queries
  51   */
  52  /**
  53  *  Converts a hex value into the rgb equivalent.
  54  *
  55  * @param {string} hex - the hexadecimal value to convert
  56  * @return {string} comma separated rgb values
  57  */
  58  /**
  59   * Long content fade mixin
  60   *
  61   * Creates a fading overlay to signify that the content is longer
  62   * than the space allows.
  63   */
  64  /**
  65   * Breakpoint mixins
  66   */
  67  /**
  68   * Focus styles.
  69   */
  70  /**
  71   * Applies editor left position to the selector passed as argument
  72   */
  73  /**
  74   * Styles that are reused verbatim in a few places
  75   */
  76  /**
  77   * Allows users to opt-out of animations via OS-level preferences.
  78   */
  79  /**
  80   * Reset default styles for JavaScript UI based pages.
  81   * This is a WP-admin agnostic reset
  82   */
  83  /**
  84   * Reset the WP Admin page styles for Gutenberg-like pages.
  85   */
  86  /**
  87   * Creates a checkerboard pattern background to indicate transparency.
  88   * @param {String} $size - The size of the squares in the checkerboard pattern. Default is 12px.
  89   */
  90  :root {
  91    --wp-block-synced-color: #7a00df;
  92    --wp-block-synced-color--rgb: 122, 0, 223;
  93    --wp-bound-block-color: var(--wp-block-synced-color);
  94    --wp-editor-canvas-background: #ddd;
  95    --wp-admin-theme-color: #007cba;
  96    --wp-admin-theme-color--rgb: 0, 124, 186;
  97    --wp-admin-theme-color-darker-10: rgb(0, 107, 160.5);
  98    --wp-admin-theme-color-darker-10--rgb: 0, 107, 160.5;
  99    --wp-admin-theme-color-darker-20: #005a87;
 100    --wp-admin-theme-color-darker-20--rgb: 0, 90, 135;
 101    --wp-admin-border-width-focus: 2px;
 102  }
 103  @media (min-resolution: 192dpi) {
 104    :root {
 105      --wp-admin-border-width-focus: 1.5px;
 106    }
 107  }
 108  
 109  .admin-ui-page {
 110    display: flex;
 111    height: 100%;
 112    background-color: var(--wpds-color-bg-surface-neutral-strong, #ffffff);
 113    color: var(--wpds-color-fg-content-neutral, #1e1e1e);
 114    position: relative;
 115    z-index: 1;
 116    flex-flow: column;
 117    text-wrap: pretty;
 118  }
 119  
 120  .admin-ui-page__header {
 121    padding: var(--wpds-dimension-padding-lg, 16px) var(--wpds-dimension-padding-2xl, 24px);
 122    border-bottom: var(--wpds-border-width-xs, 1px) solid var(--wpds-color-stroke-surface-neutral-weak, #e0e0e0);
 123    background: var(--wpds-color-bg-surface-neutral-strong, #ffffff);
 124    position: sticky;
 125    top: 0;
 126    z-index: 1;
 127  }
 128  
 129  .admin-ui-page__header-title {
 130    font-family: var(--wpds-font-family-heading, -apple-system, system-ui, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif);
 131    font-size: var(--wpds-font-size-xl, 20px);
 132    font-weight: var(--wpds-font-weight-medium, 499);
 133    line-height: var(--wpds-font-line-height-xl, 32px);
 134    margin: 0;
 135    overflow: hidden;
 136    text-overflow: ellipsis;
 137    white-space: nowrap;
 138  }
 139  
 140  .admin-ui-page__sidebar-toggle-slot:empty {
 141    display: none;
 142  }
 143  
 144  .admin-ui-page__header-subtitle {
 145    padding-block-end: var(--wpds-dimension-padding-xs, 4px);
 146    color: var(--wpds-color-fg-content-neutral-weak, #6d6d6d);
 147    font-size: var(--wpds-font-size-md, 13px);
 148    line-height: var(--wpds-font-line-height-md, 24px);
 149    margin: 0;
 150  }
 151  
 152  .admin-ui-page__content {
 153    flex-grow: 1;
 154    overflow: auto;
 155    display: flex;
 156    flex-direction: column;
 157  }
 158  
 159  .admin-ui-page__content.has-padding {
 160    padding: var(--wpds-dimension-padding-lg, 16px) var(--wpds-dimension-padding-2xl, 24px);
 161  }
 162  
 163  .show-icon-labels .admin-ui-page__header-actions .components-button.has-icon {
 164    width: auto;
 165    padding: 0 var(--wpds-dimension-padding-xs, 4px);
 166  }
 167  
 168  .show-icon-labels .admin-ui-page__header-actions .components-button.has-icon svg {
 169    display: none;
 170  }
 171  
 172  .show-icon-labels .admin-ui-page__header-actions .components-button.has-icon::after {
 173    content: attr(aria-label);
 174    font-size: var(--wpds-font-size-sm, 12px);
 175  }
 176  
 177  /**
 178   * SCSS Variables.
 179   *
 180   * Please use variables from this sheet to ensure consistency across the UI.
 181   * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
 182   * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
 183   */
 184  /**
 185   * Colors
 186   */
 187  /**
 188   * Fonts & basic variables.
 189   */
 190  /**
 191   * Typography
 192   */
 193  /**
 194   * Grid System.
 195   * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
 196   */
 197  /**
 198   * Radius scale.
 199   */
 200  /**
 201   * Elevation scale.
 202   */
 203  /**
 204   * Dimensions.
 205   */
 206  /**
 207   * Mobile specific styles
 208   */
 209  /**
 210   * Editor styles.
 211   */
 212  /**
 213   * Block & Editor UI.
 214   */
 215  /**
 216   * Block paddings.
 217   */
 218  /**
 219   * React Native specific.
 220   * These variables do not appear to be used anywhere else.
 221   */
 222  .admin-ui-breadcrumbs__list {
 223    list-style: none;
 224    padding: 0;
 225    margin: 0;
 226    gap: 0;
 227    font-size: 15px;
 228    min-height: 32px;
 229    font-weight: 500;
 230  }
 231  
 232  .admin-ui-breadcrumbs__list li:not(:last-child)::after {
 233    content: "/";
 234    margin: 0 8px;
 235  }
 236  
 237  .admin-ui-breadcrumbs__list h1 {
 238    font-size: inherit;
 239    line-height: inherit;
 240  }
 241  
 242  .edit-post-fullscreen-mode-close__view-mode-toggle {
 243    top: 0;
 244    right: 0;
 245    height: 64px;
 246    width: 64px;
 247    z-index: 100;
 248  }
 249  .edit-post-fullscreen-mode-close__view-mode-toggle .components-button {
 250    color: #fff;
 251    height: 100%;
 252    width: 100%;
 253    border-radius: 0;
 254    overflow: hidden;
 255    padding: 0;
 256    display: flex;
 257    align-items: center;
 258    justify-content: center;
 259  }
 260  .edit-post-fullscreen-mode-close__view-mode-toggle .components-button:hover, .edit-post-fullscreen-mode-close__view-mode-toggle .components-button:active {
 261    color: #fff;
 262  }
 263  .edit-post-fullscreen-mode-close__view-mode-toggle .components-button:focus {
 264    box-shadow: none;
 265  }
 266  .edit-post-fullscreen-mode-close__view-mode-toggle .edit-post-fullscreen-mode-close__view-mode-toggle-icon svg,
 267  .edit-post-fullscreen-mode-close__view-mode-toggle .edit-post-fullscreen-mode-close__view-mode-toggle-icon img {
 268    background: #1e1e1e;
 269    display: block;
 270  }
 271  
 272  .edit-post-fullscreen-mode-close-site-icon__icon {
 273    fill: currentColor;
 274    width: 100%;
 275    height: 100%;
 276    padding: 12px;
 277  }
 278  
 279  .edit-post-fullscreen-mode-close-site-icon__image {
 280    width: 100%;
 281    height: 100%;
 282    object-fit: cover;
 283    background: #333;
 284    aspect-ratio: 1/1;
 285  }
 286  
 287  .edit-post-fullscreen-mode-close.components-button:focus {
 288    position: relative;
 289  }
 290  .edit-post-fullscreen-mode-close.components-button:focus::before {
 291    content: "";
 292    display: block;
 293    position: absolute;
 294    z-index: 1;
 295    top: 0;
 296    left: 0;
 297    bottom: 0;
 298    right: 0;
 299    box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 calc(1px + var(--wp-admin-border-width-focus)) #fff;
 300  }
 301  
 302  .edit-post-fullscreen-mode-close__back-icon {
 303    position: absolute;
 304    top: 0;
 305    right: 0;
 306    width: 64px;
 307    height: 64px;
 308    display: flex;
 309    align-items: center;
 310    justify-content: center;
 311    background-color: hsl(0, 0%, 80%);
 312    pointer-events: none;
 313  }
 314  .edit-post-fullscreen-mode-close__back-icon svg {
 315    fill: currentColor;
 316  }
 317  .edit-post-fullscreen-mode-close__back-icon.has-site-icon {
 318    background-color: hsla(0, 0%, 100%, 0.6);
 319    backdrop-filter: saturate(180%) blur(15px);
 320  }
 321  
 322  /**
 323   *  Show icon label overrides.
 324   */
 325  .show-icon-labels .editor-header .edit-post-fullscreen-mode-close.has-icon {
 326    width: 64px;
 327  }
 328  .show-icon-labels .editor-header .edit-post-fullscreen-mode-close.has-icon svg {
 329    display: block;
 330  }
 331  .show-icon-labels .editor-header .edit-post-fullscreen-mode-close.has-icon::after {
 332    content: none;
 333  }
 334  
 335  .edit-post-meta-boxes-main {
 336    filter: drop-shadow(0 -1px rgba(0, 0, 0, 0.133));
 337    outline: 1px solid transparent;
 338    background-color: #fff;
 339    display: flex;
 340    flex-direction: column;
 341    overflow: hidden;
 342  }
 343  
 344  .edit-post-meta-boxes-main__presenter {
 345    flex-shrink: 0;
 346    display: flex;
 347    justify-content: center;
 348    box-shadow: 0 1px #ddd;
 349    outline: 1px solid transparent;
 350    position: relative;
 351    z-index: 1;
 352    height: 32px;
 353  }
 354  @media (pointer: coarse) {
 355    .edit-post-meta-boxes-main__presenter {
 356      height: 36px;
 357    }
 358  }
 359  .edit-post-meta-boxes-main__presenter > button {
 360    appearance: none;
 361    padding: 0;
 362    border: none;
 363    outline: none;
 364    background-color: transparent;
 365    touch-action: none;
 366  }
 367  .edit-post-meta-boxes-main__presenter > button[aria-expanded] {
 368    cursor: pointer;
 369    width: 100%;
 370    display: flex;
 371    justify-content: space-between;
 372    align-items: center;
 373    padding-inline: 24px 12px;
 374  }
 375  .edit-post-meta-boxes-main__presenter > button[aria-expanded]:is(:hover, :focus-visible) {
 376    color: var(--wp-admin-theme-color);
 377  }
 378  .edit-post-meta-boxes-main__presenter > button[aria-expanded]:focus-visible::after {
 379    content: "";
 380    position: absolute;
 381    inset: var(--wp-admin-border-width-focus);
 382    box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 383    outline: 2px solid transparent;
 384  }
 385  .edit-post-meta-boxes-main__presenter > button[aria-expanded] > svg {
 386    fill: currentColor;
 387  }
 388  .edit-post-meta-boxes-main__presenter > button[role=separator] {
 389    cursor: row-resize;
 390    position: absolute;
 391    width: 64px;
 392    height: inherit;
 393  }
 394  .edit-post-meta-boxes-main__presenter > button[role=separator]::before {
 395    content: "";
 396    background-color: #ddd;
 397    outline: 2px solid transparent;
 398    outline-offset: -2px;
 399    position: absolute;
 400    inset-block: calc(50% - 4px / 2) auto;
 401    transform: translateX(50%);
 402    width: inherit;
 403    height: 4px;
 404    border-radius: 2px;
 405  }
 406  @media not (prefers-reduced-motion) {
 407    .edit-post-meta-boxes-main__presenter > button[role=separator]::before {
 408      transition: width 0.3s ease-out;
 409    }
 410  }
 411  .edit-post-meta-boxes-main__presenter > button[role=separator]:is(:hover, :focus)::before {
 412    background-color: var(--wp-admin-theme-color);
 413    width: 80px;
 414  }
 415  
 416  .edit-post-meta-boxes-main .edit-post-meta-boxes-main__liner {
 417    overflow: auto;
 418  }
 419  .edit-post-meta-boxes-main__liner {
 420    isolation: isolate;
 421  }
 422  .is-resizing.edit-post-meta-boxes-main .edit-post-meta-boxes-main__liner {
 423    display: unset;
 424  }
 425  
 426  .edit-post-layout__metaboxes {
 427    clear: both;
 428  }
 429  
 430  .has-metaboxes .interface-interface-skeleton__content:has(.edit-post-meta-boxes-main) .editor-visual-editor {
 431    flex-shrink: 1;
 432    flex-basis: 0%;
 433    overflow: hidden;
 434    isolation: isolate;
 435  }
 436  
 437  .edit-post-layout__snackbar {
 438    position: fixed;
 439    bottom: 24px;
 440    right: 0;
 441    left: 0;
 442    padding-inline: 16px;
 443    box-sizing: border-box;
 444    display: flex;
 445    flex-direction: column;
 446    pointer-events: none;
 447  }
 448  .edit-post-layout__snackbar .components-snackbar {
 449    margin-inline: auto;
 450  }
 451  
 452  .edit-post-meta-boxes-area {
 453    position: relative;
 454    /**
 455     * The wordpress default for most meta-box elements is content-box. Some
 456     * elements such as textarea and input are set to border-box in forms.css.
 457     * These elements therefore specifically set back to border-box here, while
 458     * other elements (such as .button) are unaffected by Gutenberg's style
 459     * because of their higher specificity.
 460     */
 461  }
 462  .edit-post-meta-boxes-area__container,
 463  .edit-post-meta-boxes-area .inside {
 464    box-sizing: content-box;
 465  }
 466  .edit-post-meta-boxes-area textarea,
 467  .edit-post-meta-boxes-area input {
 468    box-sizing: border-box;
 469  }
 470  .edit-post-meta-boxes-area .postbox-header {
 471    border-top: 1px solid #ddd;
 472    border-bottom: 0;
 473  }
 474  .edit-post-meta-boxes-area {
 475    /* Match width and positioning of the meta boxes. Override default styles. */
 476  }
 477  .edit-post-meta-boxes-area #poststuff {
 478    margin: 0 auto;
 479    padding-top: 0;
 480    min-width: auto;
 481  }
 482  .edit-post-meta-boxes-area {
 483    /* Override Default meta box stylings */
 484  }
 485  .edit-post-meta-boxes-area #poststuff h3.hndle,
 486  .edit-post-meta-boxes-area #poststuff .stuffbox > h3,
 487  .edit-post-meta-boxes-area #poststuff h2.hndle { /* WordPress selectors yolo */
 488    box-sizing: border-box;
 489    color: inherit;
 490    font-weight: 600;
 491    outline: none;
 492    padding: 0 24px;
 493    position: relative;
 494    width: 100%;
 495  }
 496  .edit-post-meta-boxes-area .postbox {
 497    border: 0;
 498    color: inherit;
 499    margin-bottom: 0;
 500  }
 501  .edit-post-meta-boxes-area .postbox > .inside {
 502    color: inherit;
 503    padding: 0 24px 24px;
 504    margin: 0;
 505  }
 506  .edit-post-meta-boxes-area .postbox .handlediv {
 507    height: 44px;
 508    width: 44px;
 509  }
 510  .edit-post-meta-boxes-area.is-loading::before {
 511    position: absolute;
 512    top: 0;
 513    right: 0;
 514    left: 0;
 515    bottom: 0;
 516    content: "";
 517    background: transparent;
 518    z-index: 1;
 519  }
 520  .edit-post-meta-boxes-area .components-spinner {
 521    position: absolute;
 522    top: 10px;
 523    left: 20px;
 524    z-index: 5;
 525  }
 526  .edit-post-meta-boxes-area .is-hidden {
 527    display: none;
 528  }
 529  
 530  .edit-post-meta-boxes-area__clear {
 531    clear: both;
 532  }
 533  
 534  .edit-post-welcome-guide,
 535  .edit-template-welcome-guide {
 536    width: 312px;
 537  }
 538  .edit-post-welcome-guide__image,
 539  .edit-template-welcome-guide__image {
 540    background: #00a0d2;
 541    margin: 0 0 16px;
 542  }
 543  .edit-post-welcome-guide__image > img,
 544  .edit-template-welcome-guide__image > img {
 545    display: block;
 546    max-width: 100%;
 547    object-fit: cover;
 548  }
 549  .edit-post-welcome-guide__heading,
 550  .edit-template-welcome-guide__heading {
 551    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 552    font-size: 24px;
 553    line-height: 1.4;
 554    margin: 16px 0 16px 0;
 555    padding: 0 24px;
 556  }
 557  .edit-post-welcome-guide__text,
 558  .edit-template-welcome-guide__text {
 559    font-size: 13px;
 560    line-height: 1.4;
 561    margin: 0 0 24px 0;
 562    padding: 0 24px;
 563  }
 564  .edit-post-welcome-guide__inserter-icon,
 565  .edit-template-welcome-guide__inserter-icon {
 566    margin: 0 4px;
 567    vertical-align: text-top;
 568  }
 569  .edit-post-welcome-guide .components-button:hover svg,
 570  .edit-template-welcome-guide .components-button:hover svg {
 571    fill: #fff;
 572  }
 573  
 574  .edit-template-welcome-guide .components-button svg {
 575    fill: #fff;
 576  }
 577  
 578  body.js.block-editor-page {
 579    background: #fff;
 580  }
 581  body.js.block-editor-page #wpcontent {
 582    padding-right: 0;
 583  }
 584  body.js.block-editor-page #wpbody-content {
 585    padding-bottom: 0;
 586  }
 587  body.js.block-editor-page {
 588    /* We hide legacy notices in Gutenberg Based Pages, because they were not designed in a way that scaled well.
 589       Plugins can use Gutenberg notices if they need to pass on information to the user when they are editing. */
 590  }
 591  body.js.block-editor-page #wpbody-content > div:not(.block-editor):not(#screen-meta) {
 592    display: none;
 593  }
 594  body.js.block-editor-page #wpfooter {
 595    display: none;
 596  }
 597  body.js.block-editor-page .a11y-speak-region {
 598    right: -1px;
 599    top: -1px;
 600  }
 601  body.js.block-editor-page ul#adminmenu a.wp-has-current-submenu::after,
 602  body.js.block-editor-page ul#adminmenu > li.current > a.current::after {
 603    border-left-color: #fff;
 604  }
 605  body.js.block-editor-page .media-frame select.attachment-filters:last-of-type {
 606    width: auto;
 607    max-width: 100%;
 608  }
 609  
 610  .block-editor-page #wpwrap {
 611    overflow-y: auto;
 612  }
 613  @media (min-width: 782px) {
 614    .block-editor-page #wpwrap {
 615      overflow-y: initial;
 616    }
 617  }
 618  
 619  .edit-post-visual-editor.is-iframed {
 620    box-sizing: border-box;
 621  }
 622  .edit-post-visual-editor.is-iframed *,
 623  .edit-post-visual-editor.is-iframed *::before,
 624  .edit-post-visual-editor.is-iframed *::after {
 625    box-sizing: inherit;
 626  }
 627  
 628  @media (min-width: 600px) {
 629    .block-editor__container {
 630      position: absolute;
 631      top: 0;
 632      left: 0;
 633      bottom: 0;
 634      right: 0;
 635      min-height: calc(100vh - 46px);
 636    }
 637  }
 638  @media (min-width: 782px) {
 639    .block-editor__container {
 640      min-height: calc(100vh - 32px);
 641    }
 642    body.is-fullscreen-mode .block-editor__container {
 643      min-height: 100vh;
 644    }
 645  }
 646  .block-editor__container img {
 647    max-width: 100%;
 648    height: auto;
 649  }