<style>
/* === Стили для информера === */
/* .informer-link — ссылка-обертка вокруг всего блока информера */
.informer-link {
text-decoration: none; /* убираем подчеркивание у ссылки */
}
/* .informer-container — главный контейнер информера (карточка) */
.informer-container {
display: flex; /* располагаем элементы в строку */
align-items: center; /* выравнивание по центру по вертикали */
justify-content: space-between; /* пространство между левым и правым блоком */
padding: 6px 12px; /* внутренние отступы */
border-radius: 14px; /* скругление углов */
background: linear-gradient(145deg, #fefefe, #f3f0f8); /* фон — плавный градиент */
box-shadow: 0 4px 12px rgba(91,44,130,0.25), 0 0 8px rgba(125,60,152,0.15); /* тени */
transition: transform 0.35s ease, box-shadow 0.35s ease, background 0.35s ease; /* плавные анимации */
max-width: 320px; /* ограничиваем ширину */
cursor: pointer; /* курсор как у ссылки */
margin-bottom: 5px; /* отступ снизу */
position: relative; /* для псевдоэлемента ::before */
overflow: hidden; /* обрезаем все, что вылезает за границы */
}
/* .informer-container::before — подсветка при наведении (полупрозрачный слой сверху) */
.informer-container::before {
content: "";
position: absolute;
inset: 0; /* растягиваем по всему контейнеру */
background: linear-gradient(120deg, rgba(155,89,182,0.15), rgba(142,68,173,0.15));
opacity: 0; /* по умолчанию не видно */
transition: opacity 0.4s ease; /* плавное появление */
border-radius: 14px;
}
/* Ховер на контейнере */
.informer-container:hover {
transform: translateX(8px) scale(1.02); /* смещение + увеличение */
box-shadow: 0 8px 20px rgba(91,44,130,0.35), 0 0 14px rgba(125,60,152,0.3); /* усиливаем тени */
}
/* Подсветка появляется при наведении */
.informer-container:hover::before {
opacity: 1;
}
/* .informer-left — блок слева (аватар + инфо о пользователе) */
.informer-left {
display: flex; /* расположение в строку */
align-items: center; /* выравнивание по центру */
gap: 12px; /* расстояние между аватаром и текстом */
}
/* .avatar — картинка пользователя */
.avatar {
width: 38px;
height: 38px;
border-radius: 50%; /* круглый аватар */
border: 2px solid #7d3c98; /* рамка */
box-shadow: 0 2px 8px rgba(0,0,0,0.2); /* тень */
transition: transform 0.35s ease, box-shadow 0.35s ease, filter 0.35s ease; /* плавные эффекты */
}
/* Ховер на аватаре */
.avatar:hover {
transform: scale(1.25) rotate(-3deg); /* увеличиваем и чуть поворачиваем */
box-shadow: 0 4px 14px rgba(125,60,152,0.6), 0 0 12px rgba(91,44,130,0.45);
filter: drop-shadow(0 0 8px rgba(155,89,182,0.6)); /* светящееся свечение */
}
/* .user-info — текстовая часть (имя и инфо) */
.user-info {
display: flex;
flex-direction: column; /* текст в колонку */
justify-content: center; /* выравнивание по центру */
font-family: "Segoe UI", Geneva, Tahoma, Verdana, sans-serif; /* шрифт */
font-size: 14px;
font-weight: 600; /* жирность */
color: #2c2c2c; /* тёмный цвет текста */
}
/* .username-link — ссылка с именем пользователя */
.username-link {
color: #5b2c82;
text-decoration: none; /* убираем подчеркивание */
background: linear-gradient(90deg, #5b2c82, #9b59b6); /* градиент на тексте */
-webkit-background-clip: text;
-webkit-text-fill-color: transparent; /* делаем текст градиентным */
transition: background 0.4s ease;
}
/* Ховер на имени */
.username-link:hover {
background: linear-gradient(90deg, #7d3c98, #af7ac5);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* .positive — индикатор справа (например, репутация) */
.positive {
display: inline-block;
padding: 5px 14px;
font-size: 12px;
font-weight: 600;
color: #fff; /* белый текст */
border-radius: 16px; /* скругленные края */
background: linear-gradient(135deg, #4b0082, #7d3c98, #9b59b6); /* красивый фон */
box-shadow: 0 3px 8px rgba(0,0,0,0.2), 0 0 8px rgba(125,60,152,0.35);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* Ховер на индикаторе */
.positive:hover {
transform: scale(1.15); /* увеличиваем */
box-shadow: 0 4px 14px rgba(91,44,130,0.5), 0 0 14px rgba(155,89,182,0.5);
}
</style>
<!-- HTML часть -->
<!-- Ссылка, внутри которой лежит блок информера -->
<a href="$PROFILE_URL$" class="informer-link">
<!-- Основной контейнер информера -->
<div class="informer-container">
<!-- Левая часть (аватар + имя) -->
<div class="informer-left">
<!-- Аватар -->
<img class="avatar" src="$AVATAR_URL$" alt="$USERNAME$">
<!-- Информация о пользователе -->
<div class="user-info">
<span class="username-link">$USERNAME$</span>
</div>
</div>
<!-- Правая часть (репутация или рейтинг) -->
<span class="positive">$REPUTATION$</span>
</div>
</a>
