Лёгкая модернизация информера репутации.

В этой версии информера постарался сделать его максимально живым и подвижным, сохраняя при этом аккуратный и современный вид.

Что нового:

Цветная полоска слева: теперь у каждого сообщения есть вертикальная полоска, окрашенная в цвета флага Германии. При желании можно заменить на любые другие цвета по вашему вкусу.

Эффекты при наведении на рейтинг: блок рейтинга слегка вдавливается, создавая ощущение кнопки. Это не просто визуальная фишка , это мягкая анимация, имитирующая живое взаимодействие.

Эффекты на стрелке: при наведении стрелка меняет цвет в тон цветной полоске, делая интерфейс более интерактивным.

Общее ощущение: модернизация направлена на то, чтобы информер выглядел оживлённым, динамичным, но при этом не нарушал общую структуру форума. Эффекты служат только средством оживления визуальных элементов, а не самоцелью.

Итог: информер теперь не просто статичный блок, а аккуратно анимированный элемент, который привлекает внимание пользователя, оставаясь лёгким и ненавязчивым.

CSS

Код

<style>
/* Контейнер сообщения */
.spa {
  position: relative;
  padding: 6px 46px 6px 10px;
  display: flex;
  align-items: center;
  background: #fff;
  margin-bottom: 3px;
  border-radius: 8px;
  border: 1px solid #ddd;
  --stripe-color: #000;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.spa::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 5px;
  height: 100%;
  border-radius: 4px 0 0 4px;
  background-color: var(--stripe-color);
  transition: box-shadow 0.3s ease;
}

.spa:hover::before {
  box-shadow: 0 0 8px var(--stripe-color);
}

/* Блок с аватаркой и текстом */
.informer-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.infsimg1 {
  border-radius: 50%;
  width: 36px;
  height: 36px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.infsimg1:hover {
  transform: scale(1.1);
  box-shadow: 0 3px 10px rgba(0,0,0,0.2);
}

.informer-text { display: flex; flex-direction: column; }

.username-link {
  font-weight: 600;
  font-size: 12.5px;
  color: #4b2c82;
  text-decoration: none;
  transition: color 0.3s ease;
}
.username-link:hover { color: #a569bd; }

.user-role { font-size: 11px; color: #777; margin-top: 2px; }

/* Репутация — весь блок ведет себя как кнопка */
.positive {
  position: absolute;
  right: 30px;
  top: 50%;
  transform: translateY(-50%) scale(1); /* стартовый размер */
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 10px;
  font-weight: 500;
  color: #fff;
  border-radius: 12px;
  background: linear-gradient(135deg, #4b0082, #7d3c98);
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  cursor: pointer;
}
.positive::before { content: "⭐"; font-size: 11px; }

/* Эффект нажатия */
.positive:hover {
  transform: translateY(-50%) scale(0.92); /* уменьшаем размер, эффект «вдавливания» */
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.4); /* тень внутрь */
}
  

/* Стрелка */
.informer-arrow {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: #9b59b6;
  opacity: 0;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.spa:hover .informer-arrow {
  transform: translateY(-50%) translateX(3px) scale(1.1);
  opacity: 1;
}
</style>

Html Пример блока

Код

<div class="spa">
  <div class="informer-left">
    <img class="infsimg1" src="$AVATAR_URL$" alt="$USERNAME$" width="36" height="36">
    <div class="informer-text">
      <a href="$PROFILE_URL$" class="username-link" title="$USERNAME$">$USERNAME$</a>
      <span class="user-role">Автор</span>
    </div>
  </div>
  <span class="positive">$REPUTATION$</span>
  <a href="$PROFILE_URL$" class="informer-arrow">➜</a>
</div>

Информер

Код

<style>
/* Контейнер сообщения */
.spa {
  position: relative;
  padding: 6px 46px 6px 10px;
  display: flex;
  align-items: center;
  background: #fff;
  margin-bottom: 3px;
  border-radius: 8px;
  border: 1px solid #ddd;
  --stripe-color: #000;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.spa::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 5px;
  height: 100%;
  border-radius: 4px 0 0 4px;
  background-color: var(--stripe-color);
  transition: box-shadow 0.3s ease;
}

.spa:hover::before {
  box-shadow: 0 0 8px var(--stripe-color);
}

/* Блок с аватаркой и текстом */
.informer-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.infsimg1 {
  border-radius: 50%;
  width: 36px;
  height: 36px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.infsimg1:hover {
  transform: scale(1.1);
  box-shadow: 0 3px 10px rgba(0,0,0,0.2);
}

.informer-text { display: flex; flex-direction: column; }

.username-link {
  font-weight: 600;
  font-size: 12.5px;
  color: #4b2c82;
  text-decoration: none;
  transition: color 0.3s ease;
}
.username-link:hover { color: #a569bd; }

.user-role { font-size: 11px; color: #777; margin-top: 2px; }

/* Репутация — весь блок ведет себя как кнопка */
.positive {
  position: absolute;
  right: 30px;
  top: 50%;
  transform: translateY(-50%) scale(1); /* стартовый размер */
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 10px;
  font-weight: 500;
  color: #fff;
  border-radius: 12px;
  background: linear-gradient(135deg, #4b0082, #7d3c98);
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  cursor: pointer;
}
.positive::before { content: "⭐"; font-size: 11px; }

/* Эффект нажатия */
.positive:hover {
  transform: translateY(-50%) scale(0.92); /* уменьшаем размер, эффект «вдавливания» */
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.4); /* тень внутрь */
}
  

/* Стрелка */
.informer-arrow {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: #9b59b6;
  opacity: 0;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.spa:hover .informer-arrow {
  transform: translateY(-50%) translateX(3px) scale(1.1);
  opacity: 1;
}
</style>

<!-- Пример блока -->
<div class="spa">
  <div class="informer-left">
    <img class="infsimg1" src="$AVATAR_URL$" alt="$USERNAME$" width="36" height="36">
    <div class="informer-text">
      <a href="$PROFILE_URL$" class="username-link" title="$USERNAME$">$USERNAME$</a>
      <span class="user-role">Автор</span>
    </div>
  </div>
  <span class="positive">$REPUTATION$</span>
  <a href="$PROFILE_URL$" class="informer-arrow">➜</a>
</div>

Нужно понимать два момента:

Информер - это динамический элемент форума, и движок может блокировать скрипты, если они вставлены прямо в HTML блока. Поэтому любые эффекты (цветные полоски, анимации, стрелка с переходом на профиль и проч.) не должны быть внутри кода информера, если он обрабатывается сервером или системой форума.

Решение через скрипт на главной странице:

Код

Скрипт нужно вставлять после всех тегов </body>, тогда он будет выполняться уже после того, как все элементы страницы прогрузились.

Скрипт сможет находить все блоки информеров, динамически назначать цвета, эффекты, обработчики событий (hover, клик и т.д.).

Так движок форума не блокирует JS, а браузер спокойно его обрабатывает.

Скрипт:

Код

<script>
document.addEventListener("DOMContentLoaded", () => {
  // цвета немецкого флага
  const colors = ["#000000","#ff0000","#ffcc00"];
  const blocks = document.querySelectorAll('.spa');

  blocks.forEach((block, index) => {
    block.style.setProperty('--stripe-color', colors[index % colors.length]);
  });
});
</script>

Повторяю

Скрипт необходимо вставлять в конце шаблона главной страницы форума, перед закрывающим тегом . Это важно, чтобы все эффекты работали корректно. Не стоит помещать скрипт внутрь информера, так как движок форума может его блокировать, и браузер просто не сможет его обработать.

Мурчанн

1