Мигающая онлайн точка

[Jdatiko]

Линк на пациента, где там чего мигает

Форум закрыт от простых игроков, не моу открыть. Круг зеленый - мигает как надо, я делаю надпись обводки в шапке "команда проекта". Она как раз зеленая, видно. Второй скрин - сам код. Получается, что у меня обводка и сама надпись "команда проекта" вместе мигают. Я же хочу сделать, что мигалка лишь обводка шапки и не более.

 

[azmg]

ну надо просто "команда проекта" использовать другой класс.
Либо обводке назначить дополнительный класс, и вот этому дополнительному классу уже присвоить пульсацию

 

[Jdatiko]

ну надо просто "команда проекта" использовать другой класс.
Либо обводке назначить дополнительный класс, и вот этому дополнительному классу уже присвоить пульсацию

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

 

[DreamTails]

Jdatiko, а в чем проблема выдать доступ в лс?

OFFTOP

не мне, желательно тс, или знающим людям

 

[Jdatiko]

Jdatiko, а в чем проблема выдать доступ в лс?

OFFTOP

не мне, желательно тс, или знающим людям

можно в принципе, но человек оффлайн тот, а вдруг кто-то сейчас уже подскажет решение проблемы.

 

[azmg]

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

Ну...
из класса style-com
Убрать все border-anima*
Обводке дать класс pulse_online
и для этого класса (pulse_online) закинуть все border-anima*

 

[Jdatiko]

Ну...
из класса style-com
Убрать все border-anima*
Обводке дать класс pulse_online
и для этого класса (pulse_online) закинуть все border-anima*

В итоге пропала заливка шапки и все равно мигает вместе с текстом :D

 

[azmg]

Это шо? )))
Дай текстовку из первого скрина, и дай текстовку из этого скрина ))

 

[Jdatiko]

Посмотреть вложение 123141
Это шо? )))
Дай текстовку из первого скрина, и дай текстовку из этого скрина ))

Второй скрин

.style-com {
    color: white;
    font-weight: bold;
    background-color: #B8860B;
    border: 3px solid #B8860B;
}
.pulse-online {
    animation-name: pulse;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    border-left-color: #7fb90087;
    border-top-color: #7fb90087;
    border-right-color: #7fb90087;
    border-bottom-color: #7fb90087;
    box-shadow: 0px 0px 10px 3px hsla(79, 99%, 36%, 0.16862745098039217);
    border-left-radius: 3px solid #B8860B;
    border-right-radius: 3px solid #B8860B;
}

Первый скрин текст

.style-com {
    color: white;
    font-weight: bold;
    background-color: #B8860B;
    border: 3px solid #B8860B;
    border-left-color: #7fb90087;
    border-top-color: #7fb90087;
    border-right-color: #7fb90087;
    border-bottom-color: #7fb90087;
    box-shadow: 0px 0px 10px 3px hsla(79, 99%, 36%, 0.16862745098039217);
    animation-name: pulse;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    border-left-radius: 3px solid #B8860B;
    border-right-radius: 3px solid #B8860B;
}

 

[azmg]

Вот

.style-com {
color: white;
font-weight: bold;
background-color: #B8860B;
border: 3px solid #B8860B;
border-left-color: #7fb90087;
border-top-color: #7fb90087;
border-right-color: #7fb90087;
border-bottom-color: #7fb90087;
box-shadow: 0px 0px 10px 3px hsla(79, 99%, 36%, 0.16862745098039217);
border-left-radius: 3px solid #B8860B;
border-right-radius: 3px solid #B8860B;
}

.pulse-online {
border-animation-name: pulse;
border-animation-duration: 1.5s;
border-animation-iteration-count: infinite;
border-left-color: #7fb90087;
border-top-color: #7fb90087;
border-right-color: #7fb90087;
border-bottom-color: #7fb90087;
box-shadow: 0px 0px 10px 3px hsla(79, 99%, 36%, 0.16862745098039217);
border-left-radius: 3px solid #B8860B;
border-right-radius: 3px solid #B8860B;
}

 

[Jdatiko]

Вот

.style-com {
color: white;
font-weight: bold;
background-color: #B8860B;
border: 3px solid #B8860B;
border-left-color: #7fb90087;
border-top-color: #7fb90087;
border-right-color: #7fb90087;
border-bottom-color: #7fb90087;
box-shadow: 0px 0px 10px 3px hsla(79, 99%, 36%, 0.16862745098039217);
border-left-radius: 3px solid #B8860B;
border-right-radius: 3px solid #B8860B;
}

.pulse-online {
border-animation-name: pulse;
border-animation-duration: 1.5s;
border-animation-iteration-count: infinite;
border-left-color: #7fb90087;
border-top-color: #7fb90087;
border-right-color: #7fb90087;
border-bottom-color: #7fb90087;
box-shadow: 0px 0px 10px 3px hsla(79, 99%, 36%, 0.16862745098039217);
border-left-radius: 3px solid #B8860B;
border-right-radius: 3px solid #B8860B;
}

теперь не мигает) (круг работает как надо). тут тоже вроде как надо, оба стиля прописал

 

[azmg]

Так, вот теперь я не понял)))
Мигать должна только обводка?

 

[Jdatiko]

Так, вот теперь я не понял)))
Мигать должна только обводка?

смотри. у меня было команда проекта и овал имел закрас "bold" и имеет жирную обводку. Чтоб видеть изменения, я обводку сделал зеленым. Сначала я смог сделать, что мигал весь овал с обводкой (краска овала не пропала, выше есть скрины). Мне нужно, чтоб у овала "команды проекта", лишь обводка мигала, а сам овал оставался статичным.

Так, вот теперь я не понял)))
Мигать должна только обводка?

border-animation неправильная команда. просто Animation, но у меня все мигает.

Если делать два класса - то пропадает овал и его закраска, это нужно сделать как-то в одном классе =)

Так, вот теперь я не понял)))
Мигать должна только обводка?

в общем я создам отдельную тему и подробно распишу, а то мой вопрос не совсем относится к этому =)

 

[MrOne]

Так должно быть для XF2.1.

Как сделать, чтобы у точки был backgraund из 7px белого круга. (вокруг точки был 3px border).
Так как на зеленом аватаре не заметна сама точка.

 

[Mirovinger]

Можно попробовать добавить.
box-shadow: 10px 10px 10px 0px rgb(255,253,253);
И поиграть со значениями, как вариант.

 

[MrOne]

Mirovinger, не получается. Стиль весь такой -

.message-avatar-wrapper {
    .message-avatar-online {
        position: absolute;
        bottom: 2px;
        right: 2px;
        top: unset;
        left: unset;
        border: 4px solid #1d9e4b;
        border-radius: 50%;
        animation-name: pulse;
        animation-duration: 1.5s;
        animation-iteration-count: infinite;
        box-shadow: 10px 10px 10px 0px rgb(255,253,253);
      
        &:before {
            content: none;
        }
    }
}

@keyframes pulse {
    0% {
        transform: scale(0.9);
        opacity: 0.5;
    }
    50% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(0.9);
        opacity: 0.5;
    }
}

 

[Mirovinger]

Я же сказал, параметры меняйте и цвет, экстрасенсорные способности сегодня отдыхают, строку я как пример дал.

 

[Heyter32]

Mirovinger, не получается. Стиль весь такой -

.message-avatar-wrapper {
    .message-avatar-online {
        position: absolute;
        bottom: 2px;
        right: 2px;
        top: unset;
        left: unset;
        border: 4px solid #1d9e4b;
        border-radius: 50%;
        animation-name: pulse;
        animation-duration: 1.5s;
        animation-iteration-count: infinite;
        box-shadow: 10px 10px 10px 0px rgb(255,253,253);
     
        &:before {
            content: none;
        }
    }
}

@keyframes pulse {
    0% {
        transform: scale(0.9);
        opacity: 0.5;
    }
    50% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(0.9);
        opacity: 0.5;
    }
}

А если цвет подсветки менять нужно код цвета сюда вставлять?
border: 4px solid #1d9e4b;

 

[Heyter32]

По той причине, что всё должно выглядеть как-то так.

Добавляем в extra.less.

.message-avatar-wrapper {
    .message-avatar-online {
        position: absolute;
        bottom: 2px;
        right: 2px;
        top: unset;
        left: unset;
        border: 4px solid #1d9e4b;
        border-radius: 50%;
        animation-name: pulse;
        animation-duration: 1.5s;
        animation-iteration-count: infinite;
    }
}

@keyframes pulse {
    0% {
        transform: scale(0.9);
        opacity: 0.5;
    }
    50% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(0.9);
        opacity: 0.5;
    }
}

Посмотреть вложение 90658

Отлично получилось. Но на версии 2.2.8 значок слетел вправо. Как решить?

 

[dimka1510]

Swino-Rylo, в right: 2px; поменяй под себя чтобы было по центру.