Светящиеся баннеры с иконками FontAwesome

Скачать Светящиеся баннеры с иконками FontAwesome

Itnull

Команда форума
Администратор
Регистрация
22.05.13
Сообщения
26.745
Реакции
11.346
Веб-сайт
itnull.me
  • Автор темы
  • Администратор
  • Модер.
  • Команда форума
  • #1
Данное решение подойдет, как для префиксов тем, так и для баннеров пользователей.
Добавьте в extra.less:
Less:
@svgPrefixBorderRadius: @xf-borderRadiusSmall; // Радиус префиксов
@svgPrefixColorGradient: rgba(0,0,0,0);       // Цвет градиента прификса (не используется)
@svgPrefixTextShadow: rgba(0,0,0,0);          // Цвет тени префикса (не используется)

.svgLabelPrefix(@prefix-name, @prefix-color, @prefix-icon: "none") {
    .svgPrefix,
    .label.svgPrefix {
        font-size: 80%;
        font-weight: 400;
        text-align: center;
        align-items: center;
        padding: 1px 6px;
        border: 1px solid @prefix-color; /* Оставляем цветной бордер */
        border-radius: 10px;
        font-style: normal;
        position: relative;
        white-space: nowrap;
        background: transparent; /* Убираем фон */

        .fsp & {
            margin-right: 5px;
        }

        .menuPrefix& {
            display: inline-block;
            font-size: 1.3em;
            width: 100%;
            padding: .333em;

            a& {
                text-decoration: none;
            }
        }

        .p-title-value & {
            .p-title & {
                font-size: 70%;
            }
        }

        &:before {
            position: absolute;
            top: .25em;  /* Базовое положение */
            bottom: 0;
            left: .333em;
        }

        &.@{prefix-name} {
            color: @prefix-color; /* Цвет текста как у бордера */
            text-shadow: none; /* Отключаем тень */
            border-color: @prefix-color; /* Явно указываем цвет бордера */

            /* Добавляем подсветку через box-shadow */
            box-shadow: 0 0 10px fade(@prefix-color, 90%);

            &when not (@prefix-icon = "none") {
                padding: .25em .5em .25em 1.75em;

                &:before {
                    .m-faBase();
                    .m-faContent(@prefix-icon);
                    /* Смещаем иконку чуть ниже */
                    top: .35em;  /* Увеличиваем значение для смещения вниз */
                }
            }
        }
    }
}

.svgLabelPrefix(player, rgb(255, 199, 0), @fa-var-gamepad);

.svgLabelPrefix(tex, rgb(55, 63, 215), @fa-var-code);
.svgLabelPrefix(pod, rgb(247, 75, 180), @fa-var-user-headset);

Для новичков:
Less:
.svgLabelPrefix(УКАЗАТЬ НАЗВАНИЕ ПРЕФИКСА/ГРУППЫ, rgb(УКАЗАТЬ ЦВЕТ), @fa-var-УКАЗАТЬ ИКОНКУ FONT AWESOME);

В настройках стиля отображения баннера / префикса укажите svgPrefix player
Где player используйте заданное Вами название префикса / группы.

032101.webp
 
1617e249c16fc0 1617e249c16fc0
Назад
Сверху Снизу