[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  .wp-block-image > a,
  91  .wp-block-image > figure > a {
  92    display: inline-block;
  93  }
  94  .wp-block-image img {
  95    height: auto;
  96    max-width: 100%;
  97    vertical-align: bottom;
  98    box-sizing: border-box;
  99  }
 100  @media not (prefers-reduced-motion) {
 101    .wp-block-image img.hide {
 102      visibility: hidden;
 103    }
 104    .wp-block-image img.show {
 105      animation: show-content-image 0.4s;
 106    }
 107  }
 108  .wp-block-image[style*=border-radius] > a,
 109  .wp-block-image[style*=border-radius] img {
 110    border-radius: inherit;
 111  }
 112  .wp-block-image.has-custom-border img {
 113    box-sizing: border-box;
 114  }
 115  .wp-block-image.aligncenter {
 116    text-align: center;
 117  }
 118  .wp-block-image.alignfull > a, .wp-block-image.alignwide > a {
 119    width: 100%;
 120  }
 121  .wp-block-image.alignfull img, .wp-block-image.alignwide img {
 122    height: auto;
 123    width: 100%;
 124  }
 125  .wp-block-image.alignleft, .wp-block-image.alignright, .wp-block-image.aligncenter,
 126  .wp-block-image .alignleft,
 127  .wp-block-image .alignright,
 128  .wp-block-image .aligncenter {
 129    display: table;
 130  }
 131  .wp-block-image.alignleft > figcaption, .wp-block-image.alignright > figcaption, .wp-block-image.aligncenter > figcaption,
 132  .wp-block-image .alignleft > figcaption,
 133  .wp-block-image .alignright > figcaption,
 134  .wp-block-image .aligncenter > figcaption {
 135    display: table-caption;
 136    caption-side: bottom;
 137  }
 138  .wp-block-image .alignleft {
 139    /*rtl:ignore*/
 140    float: left;
 141    /*rtl:ignore*/
 142    margin-left: 0;
 143    /*rtl:ignore*/
 144    margin-right: 1em;
 145    margin-top: 0.5em;
 146    margin-bottom: 0.5em;
 147  }
 148  .wp-block-image .alignright {
 149    /*rtl:ignore*/
 150    float: right;
 151    /*rtl:ignore*/
 152    margin-right: 0;
 153    /*rtl:ignore*/
 154    margin-left: 1em;
 155    margin-top: 0.5em;
 156    margin-bottom: 0.5em;
 157  }
 158  .wp-block-image .aligncenter {
 159    margin-left: auto;
 160    margin-right: auto;
 161  }
 162  .wp-block-image :where(figcaption) {
 163    margin-top: 0.5em;
 164    margin-bottom: 1em;
 165  }
 166  .wp-block-image.is-style-circle-mask img {
 167    border-radius: 9999px;
 168  }
 169  @supports ((-webkit-mask-image: none) or (mask-image: none)) or (-webkit-mask-image: none) {
 170    .wp-block-image.is-style-circle-mask img {
 171      /* stylelint-disable-next-line function-url-quotes -- We need quotes for the data URL to use the SVG inline. */
 172      -webkit-mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50"/></svg>');
 173              mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50"/></svg>');
 174      mask-mode: alpha;
 175      -webkit-mask-repeat: no-repeat;
 176              mask-repeat: no-repeat;
 177      -webkit-mask-size: contain;
 178              mask-size: contain;
 179      -webkit-mask-position: center;
 180              mask-position: center;
 181      border-radius: 0;
 182    }
 183  }
 184  
 185  :root :where(.wp-block-image.is-style-rounded img, .wp-block-image .is-style-rounded img) {
 186    border-radius: 9999px;
 187  }
 188  
 189  .wp-block-image figure {
 190    margin: 0;
 191  }
 192  
 193  .wp-lightbox-container {
 194    position: relative;
 195    display: flex;
 196    flex-direction: column;
 197  }
 198  .wp-lightbox-container img {
 199    cursor: zoom-in;
 200  }
 201  .wp-lightbox-container img:hover + button {
 202    opacity: 1;
 203  }
 204  .wp-lightbox-container button {
 205    opacity: 0;
 206    border: none;
 207    background-color: rgba(90, 90, 90, 0.25);
 208    backdrop-filter: blur(16px) saturate(180%);
 209    cursor: zoom-in;
 210    display: flex;
 211    justify-content: center;
 212    align-items: center;
 213    width: 20px;
 214    height: 20px;
 215    position: absolute;
 216    z-index: 100;
 217    top: 16px;
 218    right: 16px;
 219    text-align: center;
 220    padding: 0;
 221    border-radius: 4px;
 222  }
 223  @media not (prefers-reduced-motion) {
 224    .wp-lightbox-container button {
 225      transition: opacity 0.2s ease;
 226    }
 227  }
 228  .wp-lightbox-container button:focus-visible {
 229    outline: 3px auto rgba(90, 90, 90, 0.25);
 230    outline: 3px auto -webkit-focus-ring-color;
 231    outline-offset: 3px;
 232  }
 233  .wp-lightbox-container button:hover {
 234    cursor: pointer;
 235    opacity: 1;
 236  }
 237  .wp-lightbox-container button:focus {
 238    opacity: 1;
 239  }
 240  .wp-lightbox-container button:hover, .wp-lightbox-container button:focus, .wp-lightbox-container button:not(:hover):not(:active):not(.has-background) {
 241    background-color: rgba(90, 90, 90, 0.25);
 242    border: none;
 243  }
 244  
 245  .wp-lightbox-overlay {
 246    position: fixed;
 247    top: 0;
 248    left: 0;
 249    z-index: 100000;
 250    overflow: hidden;
 251    width: 100%;
 252    height: 100vh;
 253    box-sizing: border-box;
 254    visibility: hidden;
 255    cursor: zoom-out;
 256  }
 257  .wp-lightbox-overlay .wp-lightbox-close-button {
 258    font-family: inherit;
 259    position: absolute;
 260    top: calc(env(safe-area-inset-top) + 16px);
 261    right: calc(env(safe-area-inset-right) + 16px);
 262    padding: 0 4px;
 263    cursor: pointer;
 264    z-index: 5000000;
 265    min-width: 40px;
 266    min-height: 40px;
 267    display: flex;
 268    gap: 8px;
 269    align-items: center;
 270    justify-content: center;
 271    line-height: 1;
 272  }
 273  .wp-lightbox-overlay .wp-lightbox-close-button:hover, .wp-lightbox-overlay .wp-lightbox-close-button:focus, .wp-lightbox-overlay .wp-lightbox-close-button:not(:hover):not(:active):not(.has-background) {
 274    background: none;
 275    border: none;
 276  }
 277  .wp-lightbox-overlay .wp-lightbox-close-button:has(.wp-lightbox-close-text:not([hidden])) .wp-lightbox-close-icon svg {
 278    height: 1em;
 279    width: 1em;
 280  }
 281  .wp-lightbox-overlay .wp-lightbox-close-icon svg {
 282    display: block;
 283  }
 284  .wp-lightbox-overlay .wp-lightbox-navigation-button-prev,
 285  .wp-lightbox-overlay .wp-lightbox-navigation-button-next {
 286    position: absolute;
 287    padding: 0 8px;
 288    z-index: 2000002;
 289    font-family: inherit;
 290    min-width: 40px;
 291    min-height: 40px;
 292    gap: 4px;
 293    display: flex;
 294    cursor: pointer;
 295    align-items: center;
 296    justify-content: center;
 297    bottom: 16px;
 298    line-height: 1;
 299  }
 300  .wp-lightbox-overlay .wp-lightbox-navigation-button-prev[hidden],
 301  .wp-lightbox-overlay .wp-lightbox-navigation-button-next[hidden] {
 302    display: none;
 303  }
 304  @media (min-width: 960px) {
 305    .wp-lightbox-overlay .wp-lightbox-navigation-button-prev,
 306    .wp-lightbox-overlay .wp-lightbox-navigation-button-next {
 307      bottom: 50%;
 308      transform: translateY(-50%);
 309    }
 310  }
 311  .wp-lightbox-overlay .wp-lightbox-navigation-button-prev:hover, .wp-lightbox-overlay .wp-lightbox-navigation-button-prev:focus, .wp-lightbox-overlay .wp-lightbox-navigation-button-prev:not(:hover):not(:active):not(.has-background),
 312  .wp-lightbox-overlay .wp-lightbox-navigation-button-next:hover,
 313  .wp-lightbox-overlay .wp-lightbox-navigation-button-next:focus,
 314  .wp-lightbox-overlay .wp-lightbox-navigation-button-next:not(:hover):not(:active):not(.has-background) {
 315    background: none;
 316    border: none;
 317    padding: 0 8px;
 318  }
 319  .wp-lightbox-overlay .wp-lightbox-navigation-button-prev:has(.wp-lightbox-navigation-text:not([hidden])) .wp-lightbox-navigation-icon svg,
 320  .wp-lightbox-overlay .wp-lightbox-navigation-button-next:has(.wp-lightbox-navigation-text:not([hidden])) .wp-lightbox-navigation-icon svg {
 321    width: 1.5em;
 322    height: 1.5em;
 323    display: block;
 324  }
 325  .wp-lightbox-overlay .wp-lightbox-navigation-button-prev {
 326    left: calc(env(safe-area-inset-left) + 16px);
 327  }
 328  .wp-lightbox-overlay .wp-lightbox-navigation-button-next {
 329    right: calc(env(safe-area-inset-right) + 16px);
 330  }
 331  .wp-lightbox-overlay .wp-lightbox-navigation-icon svg {
 332    vertical-align: middle;
 333  }
 334  .wp-lightbox-overlay .lightbox-image-container {
 335    position: absolute;
 336    overflow: hidden;
 337    top: 50%;
 338    left: 50%;
 339    transform-origin: top left;
 340    transform: translate(-50%, -50%);
 341    width: var(--wp--lightbox-container-width);
 342    height: var(--wp--lightbox-container-height);
 343    z-index: 2000001;
 344  }
 345  .wp-lightbox-overlay .wp-block-image {
 346    position: relative;
 347    transform-origin: 0 0;
 348    display: flex;
 349    width: 100%;
 350    height: 100%;
 351    justify-content: center;
 352    align-items: center;
 353    box-sizing: border-box;
 354    z-index: 3000000;
 355    margin: 0;
 356  }
 357  .wp-lightbox-overlay .wp-block-image img {
 358    min-width: var(--wp--lightbox-image-width);
 359    min-height: var(--wp--lightbox-image-height);
 360    width: var(--wp--lightbox-image-width);
 361    height: var(--wp--lightbox-image-height);
 362  }
 363  .wp-lightbox-overlay .wp-block-image figcaption {
 364    display: none;
 365  }
 366  .wp-lightbox-overlay button {
 367    border: none;
 368    background: none;
 369  }
 370  .wp-lightbox-overlay .scrim {
 371    width: 100%;
 372    height: 100%;
 373    position: absolute;
 374    z-index: 2000000;
 375    background-color: rgb(255, 255, 255);
 376    opacity: 0.9;
 377  }
 378  .wp-lightbox-overlay.active {
 379    visibility: visible;
 380  }
 381  @media not (prefers-reduced-motion) {
 382    .wp-lightbox-overlay.active {
 383      animation: both turn-on-visibility 0.25s;
 384    }
 385  }
 386  @media not (prefers-reduced-motion) {
 387    .wp-lightbox-overlay.active img {
 388      animation: both turn-on-visibility 0.35s;
 389    }
 390  }
 391  @media not (prefers-reduced-motion) {
 392    .wp-lightbox-overlay.show-closing-animation:not(.active) {
 393      animation: both turn-off-visibility 0.35s;
 394    }
 395  }
 396  @media not (prefers-reduced-motion) {
 397    .wp-lightbox-overlay.show-closing-animation:not(.active) img {
 398      animation: both turn-off-visibility 0.25s;
 399    }
 400  }
 401  @media not (prefers-reduced-motion) {
 402    .wp-lightbox-overlay.zoom.active {
 403      opacity: 1;
 404      visibility: visible;
 405      animation: none;
 406    }
 407    .wp-lightbox-overlay.zoom.active .lightbox-image-container {
 408      animation: lightbox-zoom-in 0.4s;
 409    }
 410    .wp-lightbox-overlay.zoom.active .lightbox-image-container img {
 411      animation: none;
 412    }
 413    .wp-lightbox-overlay.zoom.active .scrim {
 414      animation: turn-on-visibility 0.4s forwards;
 415    }
 416    .wp-lightbox-overlay.zoom.show-closing-animation:not(.active) {
 417      animation: none;
 418    }
 419    .wp-lightbox-overlay.zoom.show-closing-animation:not(.active) .lightbox-image-container {
 420      animation: lightbox-zoom-out 0.4s;
 421    }
 422    .wp-lightbox-overlay.zoom.show-closing-animation:not(.active) .lightbox-image-container img {
 423      animation: none;
 424    }
 425    .wp-lightbox-overlay.zoom.show-closing-animation:not(.active) .scrim {
 426      animation: turn-off-visibility 0.4s forwards;
 427    }
 428  }
 429  
 430  @keyframes show-content-image {
 431    0% {
 432      visibility: hidden;
 433    }
 434    99% {
 435      visibility: hidden;
 436    }
 437    100% {
 438      visibility: visible;
 439    }
 440  }
 441  @keyframes turn-on-visibility {
 442    0% {
 443      opacity: 0;
 444    }
 445    100% {
 446      opacity: 1;
 447    }
 448  }
 449  @keyframes turn-off-visibility {
 450    0% {
 451      opacity: 1;
 452      visibility: visible;
 453    }
 454    99% {
 455      opacity: 0;
 456      visibility: visible;
 457    }
 458    100% {
 459      opacity: 0;
 460      visibility: hidden;
 461    }
 462  }
 463  @keyframes lightbox-zoom-in {
 464    0% {
 465      transform: translate(calc((-100vw + var(--wp--lightbox-scrollbar-width)) / 2 + var(--wp--lightbox-initial-left-position)), calc(-50vh + var(--wp--lightbox-initial-top-position))) scale(var(--wp--lightbox-scale));
 466    }
 467    100% {
 468      transform: translate(-50%, -50%) scale(1, 1);
 469    }
 470  }
 471  @keyframes lightbox-zoom-out {
 472    0% {
 473      visibility: visible;
 474      transform: translate(-50%, -50%) scale(1, 1);
 475    }
 476    99% {
 477      visibility: visible;
 478    }
 479    100% {
 480      visibility: hidden;
 481      transform: translate(calc((-100vw + var(--wp--lightbox-scrollbar-width)) / 2 + var(--wp--lightbox-initial-left-position)), calc(-50vh + var(--wp--lightbox-initial-top-position))) scale(var(--wp--lightbox-scale));
 482    }
 483  }