OOKNET                             [ /  search the index  ]  
──────────────────────────────────────────────────────────────────────────────────────
[ KB ]    [ GIT ]    [ PROJECTS ]    [ ABOUT ]                                      EN
══════════════════════════════════════════════════════════════════════════════════════
OOKNET   [ /  search  ]  
────────────────────────────────────────────────
[ KB ] [ GIT ] [ PROJECTS ] [ ABOUT ]
════════════════════════════════════════════════
 
 
master @ 104 LINES
 
[ HISTORY ]  [ UP ]
 

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

.player-header-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;
  align-items: stretch;
}

// Identity card uses its own internal layout (avatar + body); the ranks
// cards style themselves via RanksCard.scss. Both share the .player-card
// chrome via this base class.
.player-card {
  flex: 1 1 360px;
  min-width: 0;
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 16px 20px;
}

.player-card--identity {
  flex: 1 1 320px;
}

.player-identity {
  display: flex;
  gap: 16px;
  align-items: flex-start;

  &__avatar {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    border: 2px solid var(--border-color);
    flex-shrink: 0;
  }

  &__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1;
  }

  &__name-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
  }

  &__name {
    font-size: 1.6em;
    font-weight: bold;
    margin: 0;
    line-height: 1.1;
  }

  &__guild {
    color: var(--text-secondary);
    font-size: 0.9em;
  }

  &__details {
    color: var(--text-secondary);
    font-size: 0.9em;
  }

  &__ilvl {
    color: var(--text-tertiary);
    font-size: $font-size-sm;
  }
}

// Empty-state account card: same chrome as the data card so the row stays
// balanced when a character isn't grouped to an account.
.player-card--account-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.player-card__placeholder {
  color: var(--text-tertiary);

  &-title {
    margin: 0 0 6px;
    font-size: 0.85em;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-secondary);
    letter-spacing: 0.05em;
  }

  p {
    margin: 0;
    font-size: $font-size-sm;
  }
}


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

.player-header-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;
  align-items: stretch;
}

// Identity card uses its own internal layou
t (avatar + body); the ranks
// cards style themselves via RanksCard.scss
. Both share the .player-card
// chrome via this base class.
.player-card {
  flex: 1 1 360px;
  min-width: 0;
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 16px 20px;
}

.player-card--identity {
  flex: 1 1 320px;
}

.player-identity {
  display: flex;
  gap: 16px;
  align-items: flex-start;

  &__avatar {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    border: 2px solid var(--border-color);
    flex-shrink: 0;
  }

  &__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1;
  }

  &__name-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
  }

  &__name {
    font-size: 1.6em;
    font-weight: bold;
    margin: 0;
    line-height: 1.1;
  }

  &__guild {
    color: var(--text-secondary);
    font-size: 0.9em;
  }

  &__details {
    color: var(--text-secondary);
    font-size: 0.9em;
  }

  &__ilvl {
    color: var(--text-tertiary);
    font-size: $font-size-sm;
  }
}

// Empty-state account card: same chrome as 
the data card so the row stays
// balanced when a character isn't grouped t
o an account.
.player-card--account-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.player-card__placeholder {
  color: var(--text-tertiary);

  &-title {
    margin: 0 0 6px;
    font-size: 0.85em;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-secondary);
    letter-spacing: 0.05em;
  }

  p {
    margin: 0;
    font-size: $font-size-sm;
  }
}

 
──────────────────────────────────────────────────────────────────────────────────────
OOKNET
────────────────────────────────────────────────
OOKNET