OOKNET                             [ /  search the index  ]  
──────────────────────────────────────────────────────────────────────────────────────
══════════════════════════════════════════════════════════════════════════════════════
OOKNET   [ /  search  ]  
────────────────────────────────────────────────
════════════════════════════════════════════════
 
 
master @ 92 LINES
 
[ HISTORY ]  [ UP ]
 

@use "../../../styles/core/tokens" as *;

.challenge-run {
  display: flex;
  align-items: center;
  gap: $spacing-sm;
  padding: $spacing-xs $spacing-sm;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: $radius-sm;
  font-size: $font-size-sm;

  &__dungeon {
    flex: 0 0 auto;
    display: block;
    width: 28px;
    height: 28px;
    border-radius: $radius-sm;
    overflow: hidden;
    border: 1px solid var(--border-color);

    img {
      width: 100%;
      height: 100%;
      display: block;
    }

    &:hover {
      border-color: var(--highlight-color);
    }
  }

  &__rank {
    flex: 0 0 auto;
    font-weight: $font-weight-bold;
    font-size: $font-size-base;
    min-width: 2.2em;
    text-align: center;
    line-height: 1.4;
    // colors come from .ranking-number .bracket-{name} (global ranking-utils conv
ention)
  }

  &__dungeon-name {
    flex: 0 0 auto;
    color: var(--text-primary);
    font-weight: $font-weight-semibold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 18ch;
  }

  &__team {
    flex: 1 1 auto;
    min-width: 0;

    // Tighten TeamComposition's default 12px gap for the dense home page rows.
    // Scoped override; doesn't affect leaderboard pages where 12px is appropriate
.
    .team-composition {
      gap: 4px $spacing-sm;

      // override TeamComposition's mobile full-width bubbles (designed for
      // leaderboard rows) so they don't collide with rank/time/date here
      @media (max-width: 720px) {
        flex-direction: row;

        .team-member {
          width: auto;
          background: transparent;
          padding: 0;
          border-radius: 0;
        }
      }
    }
  }

  // no `color` here so the global `.time--*` tier classes win
  &__duration {
    flex: 0 0 auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: $font-weight-semibold;
    font-size: $font-size-base;
  }

  &__date {
    flex: 0 0 auto;
    color: var(--text-tertiary);
    font-size: $font-size-xs;
    white-space: nowrap;
  }
}

@use "../../../styles/core/tokens" as *;

.challenge-run {
  display: flex;
  align-items: center;
  gap: $spacing-sm;
  padding: $spacing-xs $spacing-sm;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: $radius-sm;
  font-size: $font-size-sm;

  &__dungeon {
    flex: 0 0 auto;
    display: block;
    width: 28px;
    height: 28px;
    border-radius: $radius-sm;
    overflow: hidden;
    border: 1px solid var(--border-color);

    img {
      width: 100%;
      height: 100%;
      display: block;
    }

    &:hover {
      border-color: var(--highlight-color);
    }
  }

  &__rank {
    flex: 0 0 auto;
    font-weight: $font-weight-bold;
    font-size: $font-size-base;
    min-width: 2.2em;
    text-align: center;
    line-height: 1.4;
    // colors come from .ranking-number .bra
cket-{name} (global ranking-utils convention
)
  }

  &__dungeon-name {
    flex: 0 0 auto;
    color: var(--text-primary);
    font-weight: $font-weight-semibold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 18ch;
  }

  &__team {
    flex: 1 1 auto;
    min-width: 0;

    // Tighten TeamComposition's default 12p
x gap for the dense home page rows.
    // Scoped override; doesn't affect leade
rboard pages where 12px is appropriate.
    .team-composition {
      gap: 4px $spacing-sm;

      // override TeamComposition's mobile f
ull-width bubbles (designed for
      // leaderboard rows) so they don't col
lide with rank/time/date here
      @media (max-width: 720px) {
        flex-direction: row;

        .team-member {
          width: auto;
          background: transparent;
          padding: 0;
          border-radius: 0;
        }
      }
    }
  }

  // no `color` here so the global `.time--*
` tier classes win
  &__duration {
    flex: 0 0 auto;
    font-family: ui-monospace, SFMono-Regula
r, Menlo, monospace;
    font-weight: $font-weight-semibold;
    font-size: $font-size-base;
  }

  &__date {
    flex: 0 0 auto;
    color: var(--text-tertiary);
    font-size: $font-size-xs;
    white-space: nowrap;
  }
}
 
──────────────────────────────────────────────────────────────────────────────────────
OOKNET
────────────────────────────────────────────────
OOKNET