Icona personalizzata unica solo per la pagina di revisione

[Don]

Ciao,

Scrivo anche una soluzione CSS.

Nasconderà l’icona di spunta predefinita e aggiungerà l’icona personalizzata a uno pseudo ::before.

1. Crea un nuovo componente tema.

2. Carica l’icona nella sezione Upload e aggiungi il nome della variabile SCSS: review-approved-icon
   

   

3. Fai clic sul pulsante Modifica CSS/HTML e incolla il seguente codice nella sezione Common / CSS.

Usalo se vuoi usare var(--success) per aggiungere colore all'icona personalizzata

.reviewable {
  .status span.approved {
    position: relative;
    &:before {
      content: url($review-approved-icon);
      width: 13px;
      height: 13px;
      top: 0px;
      position: absolute;
      // Colore schema chiaro var(--success) #090 (colore icona personalizzata)
      // puoi calcolare il nuovo filtro colore chiaro qui: 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) {
        // Colore schema scuro var(--success) #1ca551 (colore icona personalizzata)
        // puoi calcolare il nuovo filtro colore scuro qui: https://codepen.io/sosuke/pen/Pjoqqp
        filter: invert(52%) sepia(26%) saturate(1605%) hue-rotate(93deg) brightness(91%) contrast(78%);
      }
    }
    .d-icon {
      visibility: hidden;
    }
  }
}

---

Usalo se la tua icona ha il colore che vuoi usare

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

---

Usalo se vuoi usare un'icona diversa per lo schema di colori chiaro e scuro

Se scegli questa opzione, dovrai caricare due icone diverse con colori diversi.

Nome della variabile SCSS: review-approved-icon-light e 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;
    }
  }
}

---