brk/website/styles/panes/explorer.css

#explorer {
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;
  transition: opacity 200ms ease;

  /* Held invisible while the chain rebuilds and scrolls to the target,
     then faded in so the layout settling isn't visible. */
  &.loading {
    opacity: 0;
  }

  .dim {
    opacity: 0.5;
  }

  @container aside (max-width: 767px) {
    overflow-y: auto;
    padding: var(--main-padding) 0;
    flex-direction: column;
  }

  /*> * {
    padding: 0 var(--main-padding);

    @container aside (min-width: 768px) {
      padding: var(--main-padding);
    }
  }*/

  /*#chain {
    flex-shrink: 0;
    position: relative;
    padding: 0;

    @container aside (min-width: 768px) {
      height: 100%;
    }

    .chain-scroll {
      padding: 0 var(--main-padding);

      @container aside (max-width: 767px) {
        padding-bottom: 1rem;
        overflow-x: auto;
      }

      @container aside (min-width: 768px) {
        padding: var(--main-padding);
        padding-right: calc(var(--main-padding) / 2);
        height: 100%;
        overflow-y: auto;
      }
    }

    .chain-edge {
      position: absolute;
      font-size: var(--font-size-xs);
      text-transform: uppercase;
      letter-spacing: 0.1em;
      font-weight: 500;

      @container aside (max-width: 767px) {
        display: flex;
        height: 100%;
        width: var(--main-padding);
        justify-content: center;
        align-items: center;
        writing-mode: vertical-lr;
        text-orientation: upright;
        text-decoration: none;
      }

      @container aside (min-width: 768px) {
        display: flex;
        width: 100%;
        height: var(--main-padding);
        justify-content: center;
        align-items: center;
        padding-left: calc(var(--main-padding) / 2);
      }
    }

    .tip {
      @container aside (min-width: 768px) {
        top: 0;
      }
      @container aside (max-width: 767px) {
        left: 0;
      }
    }

    .gen {
      @container aside (min-width: 768px) {
        bottom: 0;
      }
      @container aside (max-width: 767px) {
        top: 0;
        right: 0;
      }
    }

    .blocks {
      display: flex;
      flex-direction: column-reverse;
      --min-gap: calc(var(--cube) * -1);
      --max-gap: calc(var(--cube) * 6);
      --min-dt: 0;
      --max-dt: 10800;

      @container aside (max-width: 767px) {
        --min-gap: 0rem;
        flex-direction: row-reverse;
        width: max-content;
      }

      @container aside (min-width: 768px) {
        padding-bottom: 6rem;
      }
    }

    .cube {
      --t: pow(
        clamp(
          0,
          (var(--dt, 600) - var(--min-dt)) / (var(--max-dt) - var(--min-dt)),
          1
        ),
        0.7
      );
      --block-gap: calc(
        var(--min-gap) + var(--t) * (var(--max-gap) - var(--min-gap))
      );
      --empty-alpha: 0.4;

      --face-right: var(--cube-neutral-right);
      --face-left: var(--cube-neutral-left);
      --face-top: var(--cube-neutral-top);
      --face-bottom: var(--cube-neutral-bottom);

      --liquid-y: calc(var(--iso-scale) * var(--fill));
      --glass-y: calc(var(--iso-scale) * (1 - var(--fill)));
      --is-full: round(down, var(--fill), 1);
      --is-empty: round(down, calc(1 - var(--fill)), 1);

      flex-shrink: 0;
      position: relative;
      cursor: pointer;
      width: var(--cube-w);
      height: var(--cube-h);
      overflow: visible;
      text-decoration: none;
      --state-ease: 50ms cubic-bezier(0.4, 0, 0.2, 1);
      color: var(--color);
      transition: color var(--state-ease);
      user-select: none;
      pointer-events: none;

      &:hover {
        color: var(--background-color);
        --face-right: var(--cube-hover-right);
        --face-left: var(--cube-hover-left);
        --face-top: var(--cube-hover-top);
        --face-bottom: var(--cube-hover-bottom);
      }

      &:active,
      &.selected {
        color: var(--black);
        --face-right: var(--cube-selected-right);
        --face-left: var(--cube-selected-left);
        --face-top: var(--cube-selected-top);
        --face-bottom: var(--cube-selected-bottom);
      }

      &.skeleton .face-text {
        visibility: hidden;
      }

      .face {
        position: absolute;
        transform-origin: 0 0;
        box-sizing: border-box;
        width: var(--cube);
        height: var(--cube);
        transform: translateY(50%) var(--orient)
          translate(calc(var(--cube) * var(--x)), calc(var(--cube) * var(--y)))
          scale(var(--sx, 1), var(--sy));
        pointer-events: auto;
      }

      .liquid,
      .glass {
        will-change: background-color;
        transition: background-color var(--state-ease);
      }
      .liquid {
        background: var(--fc);
        opacity: calc(1 - var(--is-empty));
        --sy: var(--liquid-y);
        --y-offset: var(--glass-y);
      }
      .glass {
        background: oklch(from var(--fc) l c h / var(--empty-alpha));
        --sy: var(--glass-y);
        --y-offset: 0;
      }
      .glass.top {
        opacity: calc(1 - var(--is-full));
      }

      .face-text {
        --sy: var(--iso-scale);
        --y-offset: 0;
        pointer-events: none;
        padding: 0.1rem;
        font-family: var(--font-mono);
        font-size: var(--font-size-xs);
        font-weight: 450;
      }
      .face-text.top,
      .face-text.right {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
      }
      .face-text.top {
        justify-content: center;
        text-transform: uppercase;
      }
      .face-text.right {
        justify-content: space-between;
      }
      .face-text p {
        margin: 0;
      }
      .face-text .height {
        font-size: var(--font-size-sm);
        font-weight: normal;
      }
      .face-text .fees {
        display: flex;
        flex-direction: column;
        height: 100%;
        justify-content: center;
        align-items: center;
      }
      .face-text .pool {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.1em;
        width: 100%;
      }
      .face-text .pool img {
        width: 1.25em;
        height: 1.25em;
        flex-shrink: 0;
      }
      .face-text .pool span {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        line-height: 1;
      }

      .top,
      .bottom {
        --orient: rotate(30deg) skewX(-30deg);
        --sy: var(--iso-scale);
      }
      .right,
      .rear-left {
        --orient: rotate(-30deg) skewX(-30deg);
      }
      .left,
      .rear-right {
        --orient: rotate(30deg) skewX(30deg);
      }

      .top,
      .rear-right {
        --y: calc(var(--y-offset) - var(--iso-scale));
      }
      .left,
      .rear-left {
        --y: var(--y-offset);
      }
      .right {
        --y: calc(var(--y-offset) + var(--iso-scale));
      }
      .bottom {
        --y: 0;
      }

      .top {
        --fc: var(--face-top);
        --x: var(--top-x-shift, 0);
      }
      .bottom {
        --fc: var(--face-bottom);
        --x: 1;
      }
      .right {
        --fc: var(--face-right);
        --x: 1;
      }
      .left {
        --fc: var(--face-left);
        --x: 0;
      }
      .rear-right {
        --fc: var(--face-left);
        --x: 1;
      }
      .rear-left {
        --fc: var(--face-top);
        --x: 1;
        --sx: -1;
      }
      .liquid.top {
        --top-x-shift: calc(1 - var(--fill));
      }

      & + & {
        margin-bottom: var(--block-gap);

        &::before {
          content: "";
          position: absolute;
          top: 100%;
          left: 50%;
          width: 1px;
          height: var(--block-gap);
          background: var(--border-color);
          z-index: -1;
        }

        @container aside (max-width: 767px) {
          margin-bottom: 0;
          margin-right: var(--block-gap);

          &::before {
            bottom: auto;
            left: auto;
            right: calc(-1 * var(--block-gap));
            top: 50%;
            width: var(--block-gap);
            height: 1px;
          }
        }
      }
    }
  }*/

  #block-details,
  #tx-details,
  #addr-details {
    flex: 1;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);

    /* #explorer supplies only vertical padding on mobile. */
    @container aside (max-width: 767px) {
      padding: 0 var(--main-padding);
    }

    /* Full padding, halved on the side facing the chain so its halved
       right padding and this halved left padding form one gutter. */
    @container aside (min-width: 768px) {
      overflow-y: auto;
      padding: var(--main-padding);
      padding-left: calc(var(--main-padding) / 2);
    }

    h1 {
      margin-bottom: 1rem;

      code {
        font-size: 1.5rem;
        font-weight: 300;
        font-family: Lilex;
        color: var(--off-color);
        letter-spacing: -0.05rem;
      }
    }

    .row {
      display: flex;
      justify-content: space-between;
      gap: 1rem;
      padding: 0.25rem 0;
      border-bottom: 1px solid var(--border-color);
    }

    .label {
      color: var(--off-color);
      white-space: nowrap;
    }

    .value {
      text-align: right;
      word-break: break-all;
    }

    .transactions {
      margin-top: 1rem;

      .tx-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.5rem;

        h2 {
          font-size: var(--font-size-sm);
          line-height: var(--line-height-sm);
        }
      }

      .pagination {
        display: flex;
        align-items: center;
        gap: 0.5rem;

        button {
          color: var(--off-color);

          &:disabled {
            opacity: 0.25;
            pointer-events: none;
          }
        }
      }

      .tx {
        border: 1px solid var(--border-color);
        padding: 0.5rem;
        margin-bottom: 0.5rem;
        content-visibility: auto;
        contain-intrinsic-block-size: auto 8rem;

        .tx-head {
          display: flex;
          justify-content: space-between;
          gap: 0.5rem;
          margin-bottom: 0.5rem;
          padding-bottom: 0.5rem;
          border-bottom: 1px solid var(--border-color);

          .txid {
            font-family: Lilex;
            font-size: var(--font-size-xs);
            line-height: var(--line-height-xs);
            color: var(--off-color);
            overflow: hidden;
            text-overflow: ellipsis;
          }

          .tx-time {
            flex-shrink: 0;
            color: var(--off-color);
          }
        }

        .tx-body {
          display: flex;
          gap: 0.5rem;
          font-size: var(--font-size-xs);
          line-height: var(--line-height-xs);
        }

        .tx-inputs,
        .tx-outputs {
          flex: 1;
          min-width: 0;
          display: flex;
          flex-direction: column;
          gap: 0.125rem;
        }

        .tx-outputs {
          padding-left: 0.5rem;
          border-left: 1px solid var(--border-color);
        }

        .tx-io {
          display: flex;
          justify-content: space-between;
          gap: 0.5rem;

          .addr {
            display: flex;
            min-width: 0;
            white-space: nowrap;
            color: var(--off-color);

            a {
              display: flex;
              min-width: 0;
            }

            .addr-head {
              overflow: hidden;
              text-overflow: ellipsis;
            }

            .addr-tail {
              flex-shrink: 0;
            }

            &.coinbase {
              color: var(--orange);
            }

            .coinbase-sig {
              font-family: Lilex;
              font-size: var(--font-size-xs);
              color: var(--off-color);
              display: block;
              overflow: hidden;
              text-overflow: ellipsis;
            }

            &.op-return {
              color: var(--off-color);
            }
          }

          .amount {
            flex-shrink: 0;
            text-align: right;
          }
        }

        .show-more {
          color: var(--off-color);
          font-size: var(--font-size-xs);
          padding: 0.25rem 0;
        }

        .tx-foot {
          display: flex;
          justify-content: space-between;
          gap: 0.5rem;
          margin-top: 0.5rem;
          padding-top: 0.5rem;
          border-top: 1px solid var(--border-color);
          color: var(--off-color);

          .total {
            color: var(--orange);
          }
        }
      }
    }
  }
}