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

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

.spec-distribution-chart {
  margin: 0;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: $radius-md;
  padding: $spacing-md;
  display: flex;
  flex-direction: column;
  gap: $spacing-sm;

  // Controls row: bucket tabs on the left, role dropdown on the right.
  // Sharing one row keeps the chart compact and lets the underline-style
  // tabs sit on the same baseline as the dropdown.
  &__controls {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: $spacing-md;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: $spacing-xs;
  }

  &__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: $spacing-xs;
  }

  // Group of dropdowns (metric + role) on the right of the controls row.
  &__selects {
    display: flex;
    flex-wrap: wrap;
    gap: $spacing-md;
    // sits flush with the bucket tabs on the row's baseline.
    margin-bottom: $spacing-xs;
  }

  &__tab {
    background: transparent;
    border: none;
    color: var(--text-tertiary);
    padding: 6px 12px;
    cursor: pointer;
    font-size: $font-size-sm;
    font-weight: $font-weight-semibold;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition:
      color 0.15s ease,
      border-color 0.15s ease;

    &:hover {
      color: var(--text-primary);
    }

    &.active {
      color: var(--highlight-color);
      border-bottom-color: var(--highlight-color);
    }
  }

  &__canvas {
    position: relative;
    width: 100%;
    overflow-x: auto;
    // When the chart needs horizontal scroll (bars overflow on narrow viewports),
    // the ~17px horizontal scrollbar would otherwise eat into vertical space and
    // cause the SVG to overflow vertically by that much, triggering a phantom
    // vertical scrollbar too. Pinning overflow-y prevents the second scrollbar.
    overflow-y: hidden;
  }

  &__svg {
    display: block;
    // SVG width is set explicitly in JS; this lets it overflow the canvas
    // for horizontal scroll on narrow viewports rather than scaling down.
    max-width: none;
  }

  &__empty {
    color: var(--text-tertiary);
    text-align: center;
    padding: $spacing-lg;
  }

  &__gridline {
    stroke: var(--border-color);
    stroke-width: 1;
    stroke-dasharray: 2 4;
  }

  &__axis-label {
    fill: var(--text-tertiary);
    font-size: 11px;
    font-family: inherit;
  }

  &__bar {
    pointer-events: none;
  }

  &__highlight {
    fill: var(--text-tertiary);
    fill-opacity: 0.12;
    pointer-events: none;
    transition: opacity 0.08s ease;
  }

  &__overlay {
    cursor: crosshair;
  }

  &__icon {
    pointer-events: none;
  }

  &__tooltip {
    position: absolute;
    background: var(--bg-primary);
    border: 1px solid var(--highlight-color);
    border-radius: $radius-sm;
    padding: 6px 10px;
    font-size: $font-size-xs;
    pointer-events: none;
    transition: opacity 0.1s ease;
    white-space: nowrap;
    z-index: 5;
  }

  &__tooltip-title {
    font-weight: $font-weight-bold;
    margin-bottom: 2px;
  }

  &__tooltip-value {
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
  }

  &__tooltip-share {
    color: var(--text-tertiary);
  }

  // Class color bars (mirror SpecCountChart's mapping)
  .bar-death-knight {
    fill: var(--class-death-knight);
  }
  .bar-druid {
    fill: var(--class-druid);
  }
  .bar-hunter {
    fill: var(--class-hunter);
  }
  .bar-mage {
    fill: var(--class-mage);
  }
  .bar-monk {
    fill: var(--class-monk);
  }
  .bar-paladin {
    fill: var(--class-paladin);
  }
  .bar-priest {
    fill: var(--class-priest);
  }
  .bar-rogue {
    fill: var(--class-rogue);
  }
  .bar-shaman {
    fill: var(--class-shaman);
  }
  .bar-warlock {
    fill: var(--class-warlock);
  }
  .bar-warrior {
    fill: var(--class-warrior);
  }
}


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

.spec-distribution-chart {
  margin: 0;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: $radius-md;
  padding: $spacing-md;
  display: flex;
  flex-direction: column;
  gap: $spacing-sm;

  // Controls row: bucket tabs on the left, 
role dropdown on the right.
  // Sharing one row keeps the chart compact
 and lets the underline-style
  // tabs sit on the same baseline as the dr
opdown.
  &__controls {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: $spacing-md;
    border-bottom: 1px solid var(--border-co
lor);
    margin-bottom: $spacing-xs;
  }

  &__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: $spacing-xs;
  }

  // Group of dropdowns (metric + role) on t
he right of the controls row.
  &__selects {
    display: flex;
    flex-wrap: wrap;
    gap: $spacing-md;
    // sits flush with the bucket tabs on th
e row's baseline.
    margin-bottom: $spacing-xs;
  }

  &__tab {
    background: transparent;
    border: none;
    color: var(--text-tertiary);
    padding: 6px 12px;
    cursor: pointer;
    font-size: $font-size-sm;
    font-weight: $font-weight-semibold;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition:
      color 0.15s ease,
      border-color 0.15s ease;

    &:hover {
      color: var(--text-primary);
    }

    &.active {
      color: var(--highlight-color);
      border-bottom-color: var(--highlight-c
olor);
    }
  }

  &__canvas {
    position: relative;
    width: 100%;
    overflow-x: auto;
    // When the chart needs horizontal scrol
l (bars overflow on narrow viewports),
    // the ~17px horizontal scrollbar would 
otherwise eat into vertical space and
    // cause the SVG to overflow vertically 
by that much, triggering a phantom
    // vertical scrollbar too. Pinning overf
low-y prevents the second scrollbar.
    overflow-y: hidden;
  }

  &__svg {
    display: block;
    // SVG width is set explicitly in JS; th
is lets it overflow the canvas
    // for horizontal scroll on narrow viewp
orts rather than scaling down.
    max-width: none;
  }

  &__empty {
    color: var(--text-tertiary);
    text-align: center;
    padding: $spacing-lg;
  }

  &__gridline {
    stroke: var(--border-color);
    stroke-width: 1;
    stroke-dasharray: 2 4;
  }

  &__axis-label {
    fill: var(--text-tertiary);
    font-size: 11px;
    font-family: inherit;
  }

  &__bar {
    pointer-events: none;
  }

  &__highlight {
    fill: var(--text-tertiary);
    fill-opacity: 0.12;
    pointer-events: none;
    transition: opacity 0.08s ease;
  }

  &__overlay {
    cursor: crosshair;
  }

  &__icon {
    pointer-events: none;
  }

  &__tooltip {
    position: absolute;
    background: var(--bg-primary);
    border: 1px solid var(--highlight-color)
;
    border-radius: $radius-sm;
    padding: 6px 10px;
    font-size: $font-size-xs;
    pointer-events: none;
    transition: opacity 0.1s ease;
    white-space: nowrap;
    z-index: 5;
  }

  &__tooltip-title {
    font-weight: $font-weight-bold;
    margin-bottom: 2px;
  }

  &__tooltip-value {
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
  }

  &__tooltip-share {
    color: var(--text-tertiary);
  }

  // Class color bars (mirror SpecCountChart
's mapping)
  .bar-death-knight {
    fill: var(--class-death-knight);
  }
  .bar-druid {
    fill: var(--class-druid);
  }
  .bar-hunter {
    fill: var(--class-hunter);
  }
  .bar-mage {
    fill: var(--class-mage);
  }
  .bar-monk {
    fill: var(--class-monk);
  }
  .bar-paladin {
    fill: var(--class-paladin);
  }
  .bar-priest {
    fill: var(--class-priest);
  }
  .bar-rogue {
    fill: var(--class-rogue);
  }
  .bar-shaman {
    fill: var(--class-shaman);
  }
  .bar-warlock {
    fill: var(--class-warlock);
  }
  .bar-warrior {
    fill: var(--class-warrior);
  }
}

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