[Summary view] [Print] [Text view]

   1  /*
   2   * text-underline-offset doesn't work in Chrome at all 👎
   3   * But looks nice in Safari/Firefox, so let's keep it and
   4   * maybe Chrome will support it soon.
   5   */
   6  a {
   7      cursor: pointer;
   8      color: var(--wp--style--color--link, var(--global--color-primary));
   9      text-underline-offset: 3px;
  10      text-decoration-skip-ink: all;
  11  }
  12  
  13  a:hover {
  14      text-decoration-style: dotted;
  15      text-decoration-skip-ink: none;
  16  }
  17  
  18  .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) {
  19  
  20      /* Only visible in Windows High Contrast mode */
  21      outline: 2px solid transparent;
  22  
  23      text-decoration: underline 1px dotted currentColor;
  24      text-decoration-skip-ink: none;
  25      background: rgba(255, 255, 255, .9);
  26  
  27      // Change text color when the body background is dark.
  28      .is-dark-theme & {
  29          background: var(--global--color-black);
  30          color: var(--global--color-white);
  31          text-decoration: none;
  32  
  33          .meta-nav {
  34              color: var(--wp--style--color--link, var(--global--color-white));
  35          }
  36      }
  37  
  38      // Change colors when the body background is white.
  39      .has-background-white & {
  40          background: rgba(0, 0, 0, .9);
  41          color: var(--wp--style--color--link, var(--global--color-white));
  42  
  43          .meta-nav {
  44              color: var(--wp--style--color--link, var(--global--color-white));
  45          }
  46      }
  47  
  48      &.skip-link {
  49  
  50          /* Only visible in Windows High Contrast mode */
  51          outline: 2px solid transparent;
  52          outline-offset: -2px;
  53  
  54          &:focus {
  55              color: #21759b;
  56              background-color: #f1f1f1;
  57          }
  58      }
  59  
  60      &.custom-logo-link {
  61          background: none;
  62      }
  63  
  64      img {
  65          outline: 2px dotted var(--wp--style--color--link, var(--global--color-primary));
  66      }
  67  }
  68  
  69  // Enforce the custom link color even if a custom background color has been set.
  70  // The extra specificity here is required to override the background color styles.
  71  .has-background {
  72      // Target both current level and nested block.
  73      .has-link-color a,
  74      &.has-link-color a {
  75          color: var(--wp--style--color--link, var(--global--color-primary));
  76      }
  77  }