mirror-web/_src/styles/status.scss

table.flat {
  &>tbody>tr {
    border-bottom-width: var(--bs-border-width);
  }

  &>thead>tr {
    border-bottom-width: calc(var(--bs-border-width) * 2);
    border-bottom-style: solid;
    border-bottom-color: currentColor;
  }
}


// Scrolling columns in status page
.tuna-roll {
  position: relative;
  overflow: hidden;

  >div {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;

    animation-timing-function: ease;
    animation-duration: 1s;
    animation-iteration-count: 1;

    /* Tooltip text */
    >.tooltiptext {
      visibility: hidden;
      width: auto;
      background-color: #555;
      color: #fff;
      text-align: center;
      border-radius: 5px;

      /* Position the tooltip text - see examples below! */
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
    }

    &:hover>.tooltiptext {
      visibility: visible;
    }
  }

  @keyframes tuna-roll-enter {
    0% {
      transform: translateY(100%);
    }

    100% {
      transform: none;
    }
  }

  @keyframes tuna-roll-leave {
    0% {
      transform: none;
    }

    100% {
      transform: translateY(-100%);
    }
  }
}

@each $attrib in ("[data-tuna-roll-cur", ".row[data-tuna-roll-freeze") {
  @for $i from 0 to 7 {
    #{$attrib}="#{$i}"] {
      .tuna-roll>div {
        animation-name: tuna-roll-leave;
        transform: translateY(100%);
      }

      .tuna-roll>div[data-tuna-roll-seq~="#{$i}"] {
        animation-name: tuna-roll-enter;
        transform: none;
      }
    }
  }

  #{$attrib}="-1"] {
    .tuna-roll>div {
      transform: translateY(100%);
      animation-name: tuna-roll-leave;
      animation-duration: 0s;
    }

    .tuna-roll>div[data-tuna-roll-seq~="0"] {
      transform: none;
      animation-name: tuna-roll-enter;
      animation-duration: 0s;
    }
  }
}