Einzigartiges benutzerdefiniertes Symbol nur für die Bewertungsseite

[Don]

Hallo,

Ich schreibe auch eine CSS-Lösung.

Sie wird das Standard-Häkchen-Symbol ausblenden und das benutzerdefinierte Symbol über eine ::before-Pseudoklasse hinzufügen.

1. Erstellen Sie eine neue Theme-Komponente.

2. Laden Sie das Symbol in den Abschnitt Uploads hoch und fügen Sie den SCSS-Variablennamen hinzu: review-approved-icon
   

   

3. Klicken Sie auf die Schaltfläche CSS/HTML bearbeiten und fügen Sie den folgenden Code in den Abschnitt Common / CSS ein.

Verwenden Sie dies, wenn Sie var(--success) verwenden möchten, um dem benutzerdefinierten Symbol Farbe zu verleihen

.reviewable {
  .status span.approved {
    position: relative;
    &:before {
      content: url($review-approved-icon);
      width: 13px;
      height: 13px;
      top: 0px;
      position: absolute;
      // var(--success) light scheme color #090 (custom icon color)
      // you can calculate new light color filter here: https://codepen.io/sosuke/pen/Pjoqqp
      filter: invert(35%) sepia(92%) saturate(1240%) hue-rotate(91deg) brightness(89%) contrast(104%);
      @media (prefers-color-scheme: dark) {
        // var(--success) dark scheme color #1ca551 (custom icon color)
        // you can calculate new dark color filter here: https://codepen.io/sosuke/pen/Pjoqqp
        filter: invert(52%) sepia(26%) saturate(1605%) hue-rotate(93deg) brightness(91%) contrast(78%);
      }
    }
    .d-icon {
      visibility: hidden;
    }
  }
}

---

Verwenden Sie dies, wenn Ihr Symbol bereits die gewünschte Farbe hat

.reviewable {
  .status span.approved {
    position: relative;
    &:before {
      content: url($review-approved-icon);
      width: 13px;
      height: 13px;
      top: 0px;
      position: absolute;
    }
    .d-icon {
      visibility: hidden;
    }
  }
}

---

Verwenden Sie dies, wenn Sie ein anderes Symbol für helle und dunkle Farbschemata verwenden möchten

Wenn Sie diese Option wählen, müssen Sie zwei verschiedene Symbole mit unterschiedlichen Farben hochladen.

SCSS-Variablenname: review-approved-icon-light und review-approved-icon-dark

.reviewable {
  .status span.approved {
    position: relative;
    &:before {
      content: url($review-approved-icon-light);
      @media (prefers-color-scheme: dark) {
        content: url($review-approved-icon-dark);
      }
      width: 13px;
      height: 13px;
      top: 0px;
      position: absolute;
    }
    .d-icon {
      visibility: hidden;
    }
  }
}

---