Индикатор онлайн 2022.12

[MrOne]

MrOne добавил(а) новый ресурс:

Индикатор онлайн 2022.12 - Уменьшаем индикатор онлайн и убираем человечка

Хотел для своего форума уменьшить индикатор и убрать человека.
Может еще кому то пригодится.

Было
Посмотреть вложение 144194
Стало
Посмотреть вложение 144195

В extra.less добавляем -

.message-avatar-wrapper {
    .message-avatar-online {
        &:before {
            .m-faContent(@fa-var-circle, .969em);
            font-size: .7rem;
            border: @xf-messageUserBlock--background-color solid 3px;
        }
    }
}

Пояснение -...

Узнать больше об этом ресурсе...

 

[MrOne]

Поправил цвет, как в фейсбук мессенджере.

Для кого-то это мелочь, но люблю доводить.
Как по мне, такой индикатор смотрится более современней.

 

[facish]

Как убрать внутреннюю обводку?

 

[dimka1510]

facish, убрать из кода строчку

border: @xf-messageUserBlock--background-color solid 3px;

 

[Eger]

Ребят, не кидайтесь тапками))) но куда это вписывать?

 

[Atikin]

Eger,

 

[Mirovinger]

Могу двумя, в extra.less.

 

[Eger]

Спасибо ребят, сделал, прикольно!

 

[Adguest]

Для xenforo 2.3.x достаточно поменять иконку на .m-faIcon(@fa-var-solid-circle, 1em);

 

[ijavokhir]

.message-avatar-online:after
{
content: '';
position: absolute;
width: 32px;
height: 32px;
margin: -18px 0 0 -34px;
box-shadow: 0 0 1px #7fb900, inset 0 0 1px #7fb900;
border: 10px solid #7fb900;
border-radius: 50%;
-webkit-transform: scale(0);
-webkit-animation: online 2.5s ease-in-out infinite;
animation: online 2.5s ease-in-out infinite;
}
@-webkit-keyframes online
{
0% {opacity: 1;-webkit-transform: scale(0)}
50% {opacity: .7}
100% {opacity: 0;-webkit-transform: scale(1)}
}
@keyframes online
{
0% {opacity: 1;transform: scale(0)}
50% {opacity: .5}
100% {opacity: 0;transform: scale(1)}
}

 

[Shumasick]

На 2.3.6 метод отображался криво. Сделал для себя вот так, делюсь с вами.

.message-avatar-wrapper {
    position: relative;

    .message-avatar-online {
        position: absolute;

        // Настройка положения:
        bottom: auto;
        top: 85px;
        left: 50px;
        
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background-color: rgb(90, 213, 57);
        border: 2px solid @xf-contentBg;
        box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);

        &:before {
            content: '';
            display: block;
            width: 100%;
            height: 100%;
            border-radius: 50%;
        }
    }
}

Демонстрация в скриншотах

---