Changer le texte "En ligne (x)" en un point vert clignotant

[Don]

Bonjour,

J’ai apporté une petite modification avec le plugin Qui est en ligne. Cela remplacera le texte En ligne (x) par un point vert pulsant.

Original

Personnalisé

1. Modifiez le texte par défaut En ligne ({{count}}) de js.whos_online.title en /admin/customize/site_texts pour qu’il devienne {{count}}
2. Ajoutez du CSS…

Dans /admin/customize/themes/

#whos-online {
  display: inline-flex;
  align-items: center;
  color: var(--primary-high);
  padding: 0.75em 2em 0.75em 1em;
  &.collapsed { 
    a {
      margin-left: 0.35em;
    }
    &:hover a {
      margin-left: 0.35em;
      &:first-of-type {
        margin-left: 0.35em;
      }
    }
  }
  a {
    margin-left: 0.35em;
  }
  span {
    display: inline-flex;
    align-items: center;
    margin-left: 1em;
    margin-right: 0.15em;
    font-weight: 600;
    &:before {
      content: '';
      width: 15px;
      height: 15px;
      margin-left: -1.4em;
      margin-right: 0.5em;
      background-color: #62bd19;
      border-radius: 50%;
      animation: online 1s ease-out;
      -moz-animation: online 1s ease-out;
      -webkit-animation: online 1s ease-out;
      animation-iteration-count: infinite;
      -moz-animation-iteration-count: infinite;
      -webkit-animation-iteration-count: infinite;
    }
  }
}
@keyframes online {
  0% {transform: scale(0.1, 0.1); opacity: 0.0;}
  50% {opacity: 1.0;}
  100% {transform: scale(1.2, 1.2); opacity: 0.0;}
}
@-moz-keyframes online {
  0% {-moz-transform: scale(0.1, 0.1); opacity: 0.0;}
  50% {opacity: 1.0;}
  100% {-moz-transform: scale(1.2, 1.2); opacity: 0.0;}
}
@-webkit-keyframes online {
  0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
  50% {opacity: 1.0;}
  100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
}