XenForo Animated Online indicator after 2.3.4 upgrade

wikislo

wikislo

Registered
Good day folks tnx for :) help

CSS: 
.avatar.avatar--default.avatar--default--dynamic,
.avatar.avatar--default.avatar--default--text {
    border: 3px solid rgba(0,0,0,0.25);
    font-weight: 900;
}

.avatar.avatar--xxs.avatar--default.avatar--default--dynamic,
.avatar.avatar--xxs.avatar--default.avatar--default--text {
    border: 2px solid rgba(0,0,0,0.25);
    font-weight: 900;
}

.avatar.avatar--l.avatar--default.avatar--default--dynamic,
.avatar.avatar--l.avatar--default.avatar--default--text {
    border: 12px solid rgba(0,0,0,0.25);
    font-weight: 900;
}

.avatar.avatar--m.avatar--default.avatar--default--dynamic,
.avatar.avatar--m.avatar--default.avatar--default--text {
    border: 6px solid rgba(0,0,0,0.25);
    font-weight: 900;
}

.avatar.avatar--o.js-avatar.js-avatarCropper.avatar--default.avatar--default--dynamic {
    border: 6px solid rgba(0,0,0,0.25);
    font-weight: 900;
}

.node-subNodesFlat{
    display: block;
}


.message-avatar-wrapper
{
    position: relative;
    display: inline-block;
    vertical-align: bottom;

    .message-avatar-online
    {
        position: absolute;
        top: -1px;
        left: 6px;
        bottom: -1px;
        right: -1px;
        box-shadow: 0 0 15px rgb(70, 177, 37), inset 0 0 20px white;
        border: 2px solid transparent;
        border-top-color: rgb(70, 177, 37);
        border-left-color: rgb(70, 177, 37);
        border-bottom-color: rgb(70, 177, 37);
        border-right-color: rgb(70, 177, 37);
        border-radius: (5%);
    -webkit-transform: scale(1);
    -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(1)}
     50% {opacity: .9}
    100% {opacity: 1;-webkit-transform: scale(1)}
}

@keyframes online
{
      0% {opacity: 9;transform: scale(1)}
     50% {opacity: .1}
    100% {opacity: 9;transform: scale(1)}
}
}

.message-avatar-wrapper .message-avatar-online::before {
  display: none;
}

.message-avatar-wrapper .message-avatar-online{
  left: 6px !important;
  right: -1px !important;
}
 
AnonyEz

AnonyEz

Registered
CSS: 
.avatar.avatar--default.avatar--default--dynamic,
.avatar.avatar--default.avatar--default--text {
    border: 3px solid rgba(0, 0, 0, 0.25);
    font-weight: 900;
    overflow: visible !important;
    clip: auto !important;
    border-radius: 50%;
}

.avatar.avatar--xxs.avatar--default.avatar--default--dynamic,
.avatar.avatar--xxs.avatar--default.avatar--default--text {
    border: 2px solid rgba(0, 0, 0, 0.25);
    font-weight: 900;
    border-radius: 50%;
}

.avatar.avatar--l.avatar--default.avatar--default--dynamic,
.avatar.avatar--l.avatar--default.avatar--default--text {
    border: 12px solid rgba(0, 0, 0, 0.25);
    font-weight: 900;
    border-radius: 50%;
}

.avatar.avatar--m.avatar--default.avatar--default--dynamic,
.avatar.avatar--m.avatar--default.avatar--default--text {
    border: 6px solid rgba(0, 0, 0, 0.25);
    font-weight: 900;
    border-radius: 50%;
}

.avatar.avatar--o.js-avatar.js-avatarCropper.avatar--default.avatar--default--dynamic {
    border: 6px solid rgba(0, 0, 0, 0.25);
    font-weight: 900;
    border-radius: 50%;
}

/* Adjust for responsive design */
@media (max-width: 768px) {
    .avatar {
        border-width: 4px !important;
    }
}

@media (min-width: 769px) {
    .avatar {
        border-width: 6px !important;
    }
}

/* Node SubNodes Flat Fix */
.node-subNodesFlat {
    display: block;
}

/* Message Avatar Wrapper Fix */
.message-avatar-wrapper {
    position: relative;
    display: inline-block;
    vertical-align: bottom;
}

.message-avatar-wrapper .message-avatar-online {
    position: absolute;
    top: -1px;
    left: 6px;
    bottom: -1px;
    right: -1px;
    box-shadow: 0 0 15px rgb(70, 177, 37), inset 0 0 20px white;
    border: 2px solid transparent;
    border-top-color: rgb(70, 177, 37);
    border-left-color: rgb(70, 177, 37);
    border-bottom-color: rgb(70, 177, 37);
    border-right-color: rgb(70, 177, 37);
    border-radius: 50%;
    -webkit-transform: scale(1);
    -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(1); }
    50% { opacity: 0.5; }
    100% { opacity: 1; -webkit-transform: scale(1); }
}

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

.message-avatar-wrapper .message-avatar-online::before {
    display: none;
}

.message-avatar-wrapper .message-avatar-online {
    left: 6px !important;
    right: -1px !important;
}

I HOPE THIS WILL HELP
 
HamsterDude

HamsterDude

Registered
I tried it added a couple of things it works fine for me did not test on mobile.
CSS: 
.message--post .message-inner .avatar {
height: 48px;
width: 48px;
}

@media (max-width: 480px) {
.message--post .message-inner .avatar {
height: 48px;
width: 48px;
}
}
.avatar.avatar--default.avatar--default--dynamic,
.avatar.avatar--default.avatar--default--text {
    border: 3px solid rgba(0,0,0,0.25);
    font-weight: 900;
    
}

.avatar.avatar--xxs.avatar--default.avatar--default--dynamic,
.avatar.avatar--xxs.avatar--default.avatar--default--text {
    border: 2px solid rgba(0,0,0,0.25);
    font-weight: 900;
    
}

.avatar.avatar--l.avatar--default.avatar--default--dynamic,
.avatar.avatar--l.avatar--default.avatar--default--text {
    border: 12px solid rgba(0,0,0,0.25);
    font-weight: 900;
    
}

.avatar.avatar--m.avatar--default.avatar--default--dynamic,
.avatar.avatar--m.avatar--default.avatar--default--text {
    border: 6px solid rgba(0,0,0,0.25);
    font-weight: 900;
    
}

.avatar.avatar--o.js-avatar.js-avatarCropper.avatar--default.avatar--default--dynamic {
    border: 6px solid rgba(0,0,0,0.25);
    font-weight: 900;
    
}

.node-subNodesFlat{
    display: block;
    
}


.message-avatar-wrapper
{
    position: relative;
    display: inline-block;
    vertical-align: bottom;

    .message-avatar-online
    {
        position: absolute;
        top: -1px;
        left: 6px;
        bottom: -1px;
        right: -1px;
        height: calc(3em  + 4px);
        box-shadow: 0 0 15px rgb(70, 177, 37), inset 0 0 20px white;
        border: 2px solid transparent;
        border-top-color: rgb(70, 177, 37);
        border-left-color: rgb(70, 177, 37);
        border-bottom-color: rgb(70, 177, 37);
        border-right-color: rgb(70, 177, 37);
        border-radius: (50%);
    -webkit-transform: scale(1);
    -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(1)}
     50% {opacity: .9}
    100% {opacity: 1;-webkit-transform: scale(1)}
}

@keyframes online
{
      0% {opacity: 9;transform: scale(1)}
     50% {opacity: .1}
    100% {opacity: 9;transform: scale(1)}
}
}

.message-avatar-wrapper .message-avatar-online::before {
  display: none;
    
}

.message-avatar-wrapper .message-avatar-online{
  left: 6px !important;
  right: -1px !important;
    
}
 
You must log in or register to reply here.
Back
Top Bottom