[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  .edit-post-fullscreen-mode-close__view-mode-toggle {
 110    top: 0;
 111    right: 0;
 112    height: 64px;
 113    width: 64px;
 114    z-index: 100;
 115  }
 116  .edit-post-fullscreen-mode-close__view-mode-toggle .components-button {
 117    color: #fff;
 118    height: 100%;
 119    width: 100%;
 120    border-radius: 0;
 121    overflow: hidden;
 122    padding: 0;
 123    display: flex;
 124    align-items: center;
 125    justify-content: center;
 126  }
 127  .edit-post-fullscreen-mode-close__view-mode-toggle .components-button:hover, .edit-post-fullscreen-mode-close__view-mode-toggle .components-button:active {
 128    color: #fff;
 129  }
 130  .edit-post-fullscreen-mode-close__view-mode-toggle .components-button:focus {
 131    box-shadow: none;
 132  }
 133  .edit-post-fullscreen-mode-close__view-mode-toggle .edit-post-fullscreen-mode-close__view-mode-toggle-icon svg,
 134  .edit-post-fullscreen-mode-close__view-mode-toggle .edit-post-fullscreen-mode-close__view-mode-toggle-icon img {
 135    background: #1e1e1e;
 136    display: block;
 137  }
 138  
 139  .edit-post-fullscreen-mode-close-site-icon__icon {
 140    fill: currentColor;
 141    width: 100%;
 142    height: 100%;
 143    padding: 12px;
 144  }
 145  
 146  .edit-post-fullscreen-mode-close-site-icon__image {
 147    width: 100%;
 148    height: 100%;
 149    -o-object-fit: cover;
 150       object-fit: cover;
 151    background: #333;
 152    aspect-ratio: 1/1;
 153  }
 154  
 155  .edit-post-fullscreen-mode-close.components-button:focus {
 156    position: relative;
 157  }
 158  .edit-post-fullscreen-mode-close.components-button:focus::before {
 159    content: "";
 160    display: block;
 161    position: absolute;
 162    z-index: 1;
 163    top: 0;
 164    left: 0;
 165    bottom: 0;
 166    right: 0;
 167    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;
 168  }
 169  
 170  .edit-post-fullscreen-mode-close__back-icon {
 171    position: absolute;
 172    top: 0;
 173    right: 0;
 174    width: 64px;
 175    height: 64px;
 176    display: flex;
 177    align-items: center;
 178    justify-content: center;
 179    background-color: hsl(0, 0%, 80%);
 180    pointer-events: none;
 181  }
 182  .edit-post-fullscreen-mode-close__back-icon svg {
 183    fill: currentColor;
 184  }
 185  .edit-post-fullscreen-mode-close__back-icon.has-site-icon {
 186    background-color: hsla(0, 0%, 100%, 0.6);
 187    backdrop-filter: saturate(180%) blur(15px);
 188  }
 189  
 190  /**
 191   *  Show icon label overrides.
 192   */
 193  .show-icon-labels .editor-header .edit-post-fullscreen-mode-close.has-icon {
 194    width: 64px;
 195  }
 196  .show-icon-labels .editor-header .edit-post-fullscreen-mode-close.has-icon svg {
 197    display: block;
 198  }
 199  .show-icon-labels .editor-header .edit-post-fullscreen-mode-close.has-icon::after {
 200    content: none;
 201  }
 202  
 203  .edit-post-meta-boxes-main {
 204    filter: drop-shadow(0 -1px rgba(0, 0, 0, 0.133));
 205    outline: 1px solid transparent;
 206    background-color: #fff;
 207    display: flex;
 208    flex-direction: column;
 209    overflow: hidden;
 210  }
 211  
 212  .edit-post-meta-boxes-main__presenter {
 213    flex-shrink: 0;
 214    display: flex;
 215    justify-content: center;
 216    box-shadow: 0 1px #ddd;
 217    outline: 1px solid transparent;
 218    position: relative;
 219    z-index: 1;
 220    height: 32px;
 221  }
 222  @media (pointer: coarse) {
 223    .edit-post-meta-boxes-main__presenter {
 224      height: 36px;
 225    }
 226  }
 227  .edit-post-meta-boxes-main__presenter > button {
 228    -webkit-appearance: none;
 229       -moz-appearance: none;
 230            appearance: none;
 231    padding: 0;
 232    border: none;
 233    outline: none;
 234    background-color: transparent;
 235    touch-action: none;
 236  }
 237  .edit-post-meta-boxes-main__presenter > button[aria-expanded] {
 238    cursor: var(--wpds-cursor-control, pointer);
 239    width: 100%;
 240    display: flex;
 241    justify-content: space-between;
 242    align-items: center;
 243    padding-inline: 24px 12px;
 244  }
 245  .edit-post-meta-boxes-main__presenter > button[aria-expanded]:is(:hover, :focus-visible) {
 246    color: var(--wp-admin-theme-color);
 247  }
 248  .edit-post-meta-boxes-main__presenter > button[aria-expanded]:focus-visible::after {
 249    content: "";
 250    position: absolute;
 251    inset: var(--wp-admin-border-width-focus);
 252    box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 253    outline: 2px solid transparent;
 254  }
 255  .edit-post-meta-boxes-main__presenter > button[aria-expanded] > svg {
 256    fill: currentColor;
 257  }
 258  .edit-post-meta-boxes-main__presenter > button[role=separator] {
 259    cursor: row-resize;
 260    position: absolute;
 261    width: 64px;
 262    height: inherit;
 263  }
 264  .edit-post-meta-boxes-main__presenter > button[role=separator]::before {
 265    content: "";
 266    background-color: #ddd;
 267    outline: 2px solid transparent;
 268    outline-offset: -2px;
 269    position: absolute;
 270    inset-block: calc(50% - 4px / 2) auto;
 271    transform: translateX(50%);
 272    width: inherit;
 273    height: 4px;
 274    border-radius: 2px;
 275  }
 276  @media not (prefers-reduced-motion) {
 277    .edit-post-meta-boxes-main__presenter > button[role=separator]::before {
 278      transition: width 0.3s ease-out;
 279    }
 280  }
 281  .edit-post-meta-boxes-main__presenter > button[role=separator]:is(:hover, :focus)::before {
 282    background-color: var(--wp-admin-theme-color);
 283    width: 80px;
 284  }
 285  
 286  .edit-post-meta-boxes-main .edit-post-meta-boxes-main__liner {
 287    overflow: auto;
 288  }
 289  .edit-post-meta-boxes-main__liner {
 290    isolation: isolate;
 291  }
 292  .is-resizing.edit-post-meta-boxes-main .edit-post-meta-boxes-main__liner {
 293    display: unset;
 294  }
 295  
 296  .edit-post-layout__metaboxes {
 297    clear: both;
 298  }
 299  
 300  .has-metaboxes .interface-interface-skeleton__content:has(.edit-post-meta-boxes-main) .editor-visual-editor {
 301    flex-shrink: 1;
 302    flex-basis: 0%;
 303    overflow: hidden;
 304    isolation: isolate;
 305  }
 306  
 307  .edit-post-layout__snackbar {
 308    position: fixed;
 309    bottom: 24px;
 310    right: 0;
 311    left: 0;
 312    padding-inline: 16px;
 313    box-sizing: border-box;
 314    display: flex;
 315    flex-direction: column;
 316    pointer-events: none;
 317  }
 318  .edit-post-layout__snackbar .components-snackbar {
 319    margin-inline: auto;
 320  }
 321  
 322  .edit-post-meta-boxes-area {
 323    position: relative;
 324    /**
 325     * The wordpress default for most meta-box elements is content-box. Some
 326     * elements such as textarea and input are set to border-box in forms.css.
 327     * These elements therefore specifically set back to border-box here, while
 328     * other elements (such as .button) are unaffected by Gutenberg's style
 329     * because of their higher specificity.
 330     */
 331  }
 332  .edit-post-meta-boxes-area__container,
 333  .edit-post-meta-boxes-area .inside {
 334    box-sizing: content-box;
 335  }
 336  .edit-post-meta-boxes-area textarea,
 337  .edit-post-meta-boxes-area input {
 338    box-sizing: border-box;
 339  }
 340  .edit-post-meta-boxes-area .postbox-header {
 341    border-top: 1px solid #ddd;
 342    border-bottom: 0;
 343  }
 344  .edit-post-meta-boxes-area {
 345    /* Match width and positioning of the meta boxes. Override default styles. */
 346  }
 347  .edit-post-meta-boxes-area #poststuff {
 348    margin: 0 auto;
 349    padding-top: 0;
 350    min-width: auto;
 351  }
 352  .edit-post-meta-boxes-area {
 353    /* Override Default meta box stylings */
 354  }
 355  .edit-post-meta-boxes-area #poststuff h3.hndle,
 356  .edit-post-meta-boxes-area #poststuff .stuffbox > h3,
 357  .edit-post-meta-boxes-area #poststuff h2.hndle { /* WordPress selectors yolo */
 358    box-sizing: border-box;
 359    color: inherit;
 360    font-weight: 600;
 361    outline: none;
 362    padding: 0 24px;
 363    position: relative;
 364    width: 100%;
 365  }
 366  .edit-post-meta-boxes-area .postbox {
 367    border: 0;
 368    color: inherit;
 369    margin-bottom: 0;
 370  }
 371  .edit-post-meta-boxes-area .postbox > .inside {
 372    color: inherit;
 373    padding: 0 24px 24px;
 374    margin: 0;
 375  }
 376  .edit-post-meta-boxes-area .postbox .handlediv {
 377    height: 44px;
 378    width: 44px;
 379  }
 380  .edit-post-meta-boxes-area.is-loading::before {
 381    position: absolute;
 382    top: 0;
 383    right: 0;
 384    left: 0;
 385    bottom: 0;
 386    content: "";
 387    background: transparent;
 388    z-index: 1;
 389  }
 390  .edit-post-meta-boxes-area .edit-post-meta-boxes-area__spinner {
 391    position: absolute;
 392    top: 10px;
 393    left: 20px;
 394    z-index: 2;
 395  }
 396  .edit-post-meta-boxes-area .is-hidden {
 397    display: none;
 398  }
 399  
 400  .edit-post-meta-boxes-area__clear {
 401    clear: both;
 402  }
 403  
 404  .edit-post-welcome-guide,
 405  .edit-template-welcome-guide {
 406    width: 312px;
 407  }
 408  .edit-post-welcome-guide__image,
 409  .edit-template-welcome-guide__image {
 410    background: #00a0d2;
 411    margin: 0 0 16px;
 412  }
 413  .edit-post-welcome-guide__image > img,
 414  .edit-template-welcome-guide__image > img {
 415    display: block;
 416    max-width: 100%;
 417    -o-object-fit: cover;
 418       object-fit: cover;
 419  }
 420  .edit-post-welcome-guide__heading,
 421  .edit-template-welcome-guide__heading {
 422    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 423    font-size: 24px;
 424    line-height: 1.4;
 425    margin: 16px 0 16px 0;
 426    padding: 0 24px;
 427  }
 428  .edit-post-welcome-guide__text,
 429  .edit-template-welcome-guide__text {
 430    font-size: 13px;
 431    line-height: 1.4;
 432    margin: 0 0 24px 0;
 433    padding: 0 24px;
 434  }
 435  .edit-post-welcome-guide__inserter-icon,
 436  .edit-template-welcome-guide__inserter-icon {
 437    margin: 0 4px;
 438    vertical-align: text-top;
 439  }
 440  .edit-post-welcome-guide .components-button:hover svg,
 441  .edit-template-welcome-guide .components-button:hover svg {
 442    fill: #fff;
 443  }
 444  
 445  .edit-template-welcome-guide .components-button svg {
 446    fill: #fff;
 447  }
 448  
 449  body.has-admin-bar-in-editor .edit-post-fullscreen-mode-close__view-mode-toggle {
 450    display: flex;
 451    align-items: center;
 452    justify-content: center;
 453    width: 32px;
 454    height: 32px;
 455  }
 456  body.has-admin-bar-in-editor .edit-post-fullscreen-mode-close__view-mode-toggle .edit-post-fullscreen-mode-close__back-icon {
 457    top: auto;
 458    right: auto;
 459    width: 32px;
 460    height: 32px;
 461    background: transparent;
 462  }
 463  body.has-admin-bar-in-editor .edit-post-fullscreen-mode-close__view-mode-toggle:hover .edit-post-fullscreen-mode-close__back-icon {
 464    color: var(--wp-admin-theme-color);
 465  }
 466  body.has-admin-bar-in-editor.is-fullscreen-mode .editor-header:has(> .editor-header__back-button) {
 467    grid-template-columns: 32px minmax(0, max-content) minmax(min-content, 1fr) 64px;
 468  }
 469  body.has-admin-bar-in-editor.is-fullscreen-mode .editor-header:has(> .editor-header__back-button):has(> .editor-header__center) {
 470    grid-template-columns: 32px min-content 1fr min-content 64px;
 471  }
 472  body.has-admin-bar-in-editor.is-fullscreen-mode .editor-header__back-button {
 473    padding-right: 8px;
 474  }
 475  @media (min-width: 782px) {
 476    body.has-admin-bar-in-editor.is-fullscreen-mode {
 477      margin-top: 0;
 478      height: 100%;
 479    }
 480    body.has-admin-bar-in-editor.is-fullscreen-mode #wpadminbar {
 481      display: block;
 482    }
 483    body.has-admin-bar-in-editor.is-fullscreen-mode .interface-interface-skeleton,
 484    body.has-admin-bar-in-editor.is-fullscreen-mode .editor-post-publish-panel,
 485    body.has-admin-bar-in-editor.is-fullscreen-mode .is-entity-save-view-open .interface-interface-skeleton__actions:focus,
 486    body.has-admin-bar-in-editor.is-fullscreen-mode .is-entity-save-view-open .interface-interface-skeleton__actions:focus-within {
 487      top: var(--wp-admin--admin-bar--height, 0);
 488    }
 489    body.has-admin-bar-in-editor.is-fullscreen-mode .block-editor__container {
 490      min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0));
 491    }
 492    body.has-admin-bar-in-editor.is-fullscreen-mode:has(.editor-editor-interface.is-distraction-free) {
 493      --wp-admin--admin-bar--height: 0;
 494    }
 495    body.has-admin-bar-in-editor.is-fullscreen-mode:has(.editor-editor-interface.is-distraction-free) #wpadminbar {
 496      display: none;
 497    }
 498  }
 499  
 500  body.js.block-editor-page {
 501    background: #fff;
 502  }
 503  body.js.block-editor-page #wpcontent {
 504    padding-right: 0;
 505  }
 506  body.js.block-editor-page #wpbody-content {
 507    padding-bottom: 0;
 508  }
 509  body.js.block-editor-page {
 510    /* We hide legacy notices in Gutenberg Based Pages, because they were not designed in a way that scaled well.
 511       Plugins can use Gutenberg notices if they need to pass on information to the user when they are editing. */
 512  }
 513  body.js.block-editor-page #wpbody-content > div:not(.block-editor):not(#screen-meta) {
 514    display: none;
 515  }
 516  body.js.block-editor-page #wpfooter {
 517    display: none;
 518  }
 519  body.js.block-editor-page .a11y-speak-region {
 520    right: -1px;
 521    top: -1px;
 522  }
 523  body.js.block-editor-page ul#adminmenu a.wp-has-current-submenu::after,
 524  body.js.block-editor-page ul#adminmenu > li.current > a.current::after {
 525    border-left-color: #fff;
 526  }
 527  body.js.block-editor-page .media-frame select.attachment-filters:last-of-type {
 528    width: auto;
 529    max-width: 100%;
 530  }
 531  
 532  .block-editor-page #wpwrap {
 533    overflow-y: auto;
 534  }
 535  @media (min-width: 782px) {
 536    .block-editor-page #wpwrap {
 537      overflow-y: initial;
 538    }
 539  }
 540  
 541  .edit-post-visual-editor.is-iframed {
 542    box-sizing: border-box;
 543  }
 544  .edit-post-visual-editor.is-iframed *,
 545  .edit-post-visual-editor.is-iframed *::before,
 546  .edit-post-visual-editor.is-iframed *::after {
 547    box-sizing: inherit;
 548  }
 549  
 550  @media (min-width: 600px) {
 551    .block-editor__container {
 552      position: absolute;
 553      top: 0;
 554      left: 0;
 555      bottom: 0;
 556      right: 0;
 557      min-height: calc(100vh - 46px);
 558    }
 559  }
 560  @media (min-width: 782px) {
 561    .block-editor__container {
 562      min-height: calc(100vh - 32px);
 563    }
 564    body.is-fullscreen-mode .block-editor__container {
 565      min-height: 100vh;
 566    }
 567  }
 568  .block-editor__container img {
 569    max-width: 100%;
 570    height: auto;
 571  }