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