Guilds

Unread guild styles

Working on 01/05/19

DEFAULT	DOT LEFT	DOT RIGHT

/* DOT LEFT */
.item-2hkk8m {
    border: none;
    background: var(--main-color);
    width: 12px;
    height: 12px !important;
    left: 0;
    z-index: 10;
}

/* DOT RIGHT */
.item-2hkk8m {
    border: none;
    background: var(--main-color);
    width: 12px;
    height: 12px !important;
    z-index: 10;
}

Unread server animations

Working on 26/04/19

DEFAULT	BOUNCE	PULSE	SHAKE

/* some posibilities */
.item-2hkk8m {
  animation: rainbow/bounce/pulse/shake 1s/2s/3s linear infinite;
}

Bounce

/* RECOMMENDED: 2s animation*/
.item-2hkk8m {
  animation: bounce 2s linear infinite !important;
}

.wrapper-sa6paO{height:58px;}.pill-31IEus{top:-6px;}.item-2hkk8m{top: 6px;}

/* BOUNCE EFFECT */
@keyframes bounce {
  from,
  20%,
  53%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -3px, 0);
    transform: translate3d(0, -3px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -1px, 0);
    transform: translate3d(0, -1px, 0);
  }
}

Pulse

/* RECOMMENDED: 1s animation*/
.item-2hkk8m {
  animation: pulse 1s linear infinite !important;
}

/* PULSE EFFECT */
@keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.2, 1.2, 1.2);
    transform: scale3d(1.2, 1.2, 1.2);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

Shake

/* RECOMMENDED: 2s animation*/
.item-2hkk8m {
  animation: shake 2s linear infinite !important;
}

/* SHAKE EFFECT */
@keyframes shake {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-2px, 0, 0);
    transform: translate3d(-2px, 0, 0);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(2px, 0, 0);
    transform: translate3d(2px, 0, 0);
  }
}