更改 Online (x) 文本为闪烁绿点

自定义 其他
1

你好，

我对 在线用户插件 做了一点小修改。这将把 在线 (x) 替换为一个脉动的绿色圆点。

原始效果
Screenshot 2021-07-17 at 21.59.08

自定义效果
Jul-17-2021 22-05-29

  1. 在 /admin/customize/site_texts 中将 js.whos_online.title 的默认文本 Online ({{count}}) 修改为 {{count}}
  2. 添加 CSS… :arrow_down:

到 /admin/customize/themes/

#whos-online {
  display: inline-flex;
  align-items: center;
  color: var(--primary-high);
  padding: 0.75em 2em 0.75em 1em;
  &.collapsed { 
    a {
      margin-left: 0.35em;
    }
    &:hover a {
      margin-left: 0.35em;
      &:first-of-type {
        margin-left: 0.35em;
      }
    }
  }
  a {
    margin-left: 0.35em;
  }
  span {
    display: inline-flex;
    align-items: center;
    margin-left: 1em;
    margin-right: 0.15em;
    font-weight: 600;
    &:before {
      content: '';
      width: 15px;
      height: 15px;
      margin-left: -1.4em;
      margin-right: 0.5em;
      background-color: #62bd19;
      border-radius: 50%;
      animation: online 1s ease-out;
      -moz-animation: online 1s ease-out;
      -webkit-animation: online 1s ease-out;
      animation-iteration-count: infinite;
      -moz-animation-iteration-count: infinite;
      -webkit-animation-iteration-count: infinite;
    }
  }
}
@keyframes online {
  0% {transform: scale(0.1, 0.1); opacity: 0.0;}
  50% {opacity: 1.0;}
  100% {transform: scale(1.2, 1.2); opacity: 0.0;}
}
@-moz-keyframes online {
  0% {-moz-transform: scale(0.1, 0.1); opacity: 0.0;}
  50% {opacity: 1.0;}
  100% {-moz-transform: scale(1.2, 1.2); opacity: 0.0;}
}
@-webkit-keyframes online {
  0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
  50% {opacity: 1.0;}
  100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
}
13 个赞