تغيير نص Online (x) إلى نقطة خضراء نابضة

تخصيص إضافات
1

مرحبًا،

لقد قمت بإجراء تعديل بسيط باستخدام إضافة من هم متصلون الآن. سيؤدي هذا إلى استبدال النص متصلون (x) بنقطة خضراء نابضة.

الأصل
Screenshot 2021-07-17 at 21.59.08

المخصص
Jul-17-2021 22-05-29

  1. غيّر النص الافتراضي متصلون ({{count}}) في js.whos_online.title من /admin/customize/site_texts إلى {{count}}
  2. أضف كود CSS… :arrow_down:

إلى /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;}
}
13 إعجابًا