pyth-network_pyth-crosschain/apps/insights/src/components/Publishers/index.module.scss

@use "@pythnetwork/component-library/theme";
@use "../Root/index.module.scss" as root;

.publishers {
  @include theme.max-width;

  .header {
    @include theme.h3;

    color: theme.color("heading");
    font-weight: theme.font-weight("semibold");
    margin: theme.spacing(6) 0;
  }

  .body {
    display: flex;
    flex-flow: row nowrap;
    gap: theme.spacing(12);
    align-items: flex-start;

    .stats {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: theme.spacing(4);
      align-items: center;
      width: 40%;
      position: sticky;
      top: root.$header-height;

      .oisCard {
        grid-column: span 2 / span 2;

        .oisPool {
          width: 100%;
          height: theme.spacing(72);
          overflow: hidden;
          display: grid;
          place-content: center;
          position: relative;

          .oisPoolChart {
            position: relative;
            top: theme.spacing(8);

            .bar {
              fill: theme.color("button", "primary", "background", "normal");
            }

            .background {
              fill: theme.color("button", "disabled", "background");
            }
          }

          .legend {
            text-align: center;
            position: absolute;
            top: theme.spacing(30);
            display: flex;
            width: 100%;
            flex-flow: column nowrap;
            align-items: center;
            gap: theme.spacing(1.5);

            .title {
              font-size: theme.font-size("sm");
              font-weight: theme.font-weight("normal");
              color: theme.color("heading");
              margin: 0;
            }

            .poolUsed {
              margin: 0;
              color: theme.color("heading");

              @include theme.h3;
            }

            .poolTotal {
              margin: 0;
              color: theme.color("muted");
              font-size: theme.font-size("sm");
              font-weight: theme.font-weight("normal");
            }
          }
        }

        .oisStats {
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: theme.spacing(1);
        }
      }
    }

    .publishersCard {
      width: 60%;
    }
  }
}

.ranking,
.rankingLoader {
  height: theme.spacing(6);
  border-radius: theme.border-radius("md");
  width: 100%;
}

.ranking {
  display: inline-block;
  text-align: center;
  font-size: theme.font-size("sm");
  font-weight: theme.font-weight("medium");
  line-height: theme.spacing(6);
  color: light-dark(
    theme.pallette-color("steel", 800),
    theme.pallette-color("steel", 300)
  );
  background: light-dark(
    theme.pallette-color("steel", 200),
    theme.pallette-color("steel", 700)
  );
}

.publisherName {
  display: flex;
  flex-flow: row nowrap;
  gap: theme.spacing(4);
  align-items: center;

  .publisherIcon {
    width: theme.spacing(9);
    height: theme.spacing(9);
  }

  &.publisherNamePlaceholder .publisherIcon {
    border-radius: theme.border-radius("full");
  }

  .nameAndKey {
    display: flex;
    flex-flow: column nowrap;
    gap: theme.spacing(1);
    align-items: flex-start;

    .publisherKey {
      color: theme.color("link", "normal");
      font-weight: theme.font-weight("medium");
      font-size: theme.font-size("xxs");
    }
  }

  .name {
    color: theme.color("heading");
  }

  &[data-is-undisclosed] {
    .undisclosedIconWrapper {
      background: theme.color("button", "disabled", "background");
      border-radius: theme.border-radius("full");
      display: grid;
      place-content: center;

      .undisclosedIcon {
        width: theme.spacing(4);
        height: theme.spacing(4);
        color: theme.color("button", "disabled", "foreground");
      }
    }
  }
}