Логика скрипта очень простая: он подсчитывает рейтинг каждого пользователя и в зависимости от него задаёт CSS-стили.

Например, если у пользователя рейтинг - 1, ему присваивается красный цвет, при рейтинге больше 5 используются более светлые тона, и так далее.

Саму логику можно изучить прямо в скрипте , она элементарная, но полностью рабочая.

Код

<!-- Карма -->
<div style="width:100%; text-align:right; margin-top:10px;">
  <?if($READ_REP_URL$)?>
  <a class="reputationDo" title="Изменить репутацию" href="$DO_REP_URL$" style="text-decoration:none;">
    <div class='reputation positiv'>
      <div class="karma-number" data-rating="$REP_RATING$">
        $REP_RATING$
      </div>
      <div class="karma-label">
        Карма
      </div>
    </div>
  </a>
  <?if($DO_REP_URL$)?>
  <?endif?>
  <?endif?>
</div>

<style>
.reputationDo .reputation {
    margin: 1px 10px;
    width: 60px;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3), 0 0 10px rgba(176,84,199,0.5);
    font-family: 'Manrope', sans-serif;
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
    padding: 5px 0;
    position: relative;
    overflow: hidden;
}

.reputationDo:hover .reputation {
    transform: translateY(-3px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.4), 0 0 15px rgba(176,84,199,0.7);
}

.karma-number {
    font-size: 16px;
    font-weight: 700;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
    position: relative;
}

.karma-label {
    text-align: center;
    background-color:#000;
    color: #fff;
    padding: 3px 0;
    border-radius: 0 0 6px 6px;
    font-size: 12px;
    line-height: normal;
}

/* Цвета кармы по диапазонам каждые +5 */
.karma-minus { background-color: #e74c3c; color: #fff; animation: slowShadow 6s infinite; } /* минус с медленной тенью */
.karma-0to5 { background-color: #555; color: #fff; }
.karma-5to10 { background-color: #777; color: #fff; }
.karma-10to15 { background-color: #4caf50; color: #fff; }
.karma-15to20 { background-color: #66bb6a; color: #fff; }
.karma-20to25 { background-color: #8bc34a; color: #fff; }
.karma-25to30 { background-color: #ff82b2; color: #fff; }
.karma-30to35 { background-color: #ff69b4; color: #fff; }
.karma-35to40 { background-color: #9b59b6; color: #fff; }
.karma-40to45 { background-color: #8e44ad; color: #fff; }
.karma-45to50 { background-color: #e67e22; color: #fff; }
.karma-50to55 { background-color: #d35400; color: #fff; }
.karma-55to60 { background-color: gold; color: #000; }
.karma-60to70 { background-color: #ffd700; color: #000; }
.karma-70to100 { background: linear-gradient(145deg, gold, #ffea00); color: #000; }
.karma-100plus { background: linear-gradient(145deg, #ffd700, #ffb700); color: #000; }

/* Медленный проход тени для отрицательной кармы */
@keyframes slowShadow {
  0% { box-shadow: 0 0 5px rgba(0,0,0,0.3); }
  50% { box-shadow: 0 0 12px rgba(0,0,0,0.6); }
  100% { box-shadow: 0 0 5px rgba(0,0,0,0.3); }
}
</style>

<script>
document.querySelectorAll('.reputationDo').forEach(block => {
    const numberDiv = block.querySelector('.karma-number');
    const value = parseInt(numberDiv.getAttribute('data-rating'));
    const repDiv = block.querySelector('.reputation');
    let className = '';

    if (value < 0) className = 'karma-minus';
    else if (value <= 5) className = 'karma-0to5';
    else if (value <= 10) className = 'karma-5to10';
    else if (value <= 15) className = 'karma-10to15';
    else if (value <= 20) className = 'karma-15to20';
    else if (value <= 25) className = 'karma-20to25';
    else if (value <= 30) className = 'karma-25to30';
    else if (value <= 35) className = 'karma-30to35';
    else if (value <= 40) className = 'karma-35to40';
    else if (value <= 45) className = 'karma-40to45';
    else if (value <= 50) className = 'karma-45to50';
    else if (value <= 55) className = 'karma-50to55';
    else if (value <= 60) className = 'karma-55to60';
    else if (value <= 70) className = 'karma-60to70';
    else if (value <= 100) className = 'karma-70to100';
    else className = 'karma-100plus';

    repDiv.classList.add(className);
});
</script>
<!-- Карма -->

Это при - 100

Немного в гору

Предел , скрипт больше 100 не реагирует.

Мурчанн

1