/* ============================================================================
* tooltip.css — item / spell tooltip frame
* ----------------------------------------------------------------------------
* Project: coa-db (db.exil.es)
* License: AGPL-3.0-or-later
*
* The wow-style tooltip is a black, slightly translucent panel with a thin
* gold rim. Body text uses Tahoma/Verdana 12px to match the in-game tooltip
* font feel — UI text everywhere else uses the system stack.
*
* Renderers emit specially-shaped HTML comments (e.g. ``,
* ``) at scan-points where the legacy aowow JS used to swap in
* computed values. We don't strip them — they're preserved for future
* scriptable consumers — but they need no CSS.
*
* Section index:
* 1. Tooltip frame (.tooltip)
* 2. Item icon + quality border (.icon, .q0..q7)
* 3. Header line (name, item level, binding)
* 4. Stat / bonus blocks
* 5. Random-suffix line
* 6. Set bonus block
* 7. Spell tooltip details grid
* 8. Use / chance-on-hit lines
* ========================================================================== */
/* 1. Tooltip frame -----------------------------------------------------------
* `.tooltip` is the black panel. It can stand alone (preview pages) or be
* triggered as an absolutely-positioned popup on `mouseover` (handled by
* htmx + a tiny inline script we'll vendor later).
* -------------------------------------------------------------------------- */
.tooltip {
--tt-fg: #ffffff;
--tt-fg-muted: #c8c8c8;
--tt-fg-faint: #888888;
--tt-good: #5df644; /* +stat / on use bonus */
--tt-bad: #ff4040; /* requirement not met */
--tt-yellow: #ffff98; /* set bonus / equip bonus */
--tt-cyan: #71d5ff; /* glyph type / socket text */
--tt-orange: #ff8040; /* random property / use proc */
display: inline-block;
min-width: 240px;
max-width: 360px;
background: rgba(5, 5, 5, 0.94);
color: var(--tt-fg);
font-family: var(--font-tip, Tahoma, Verdana, sans-serif);
font-size: 12px;
line-height: 17px;
border: 1px solid var(--border-accent, #5a4a1f);
border-radius: 4px;
padding: 8px 10px;
box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.6));
/* Inset highlight — mimics aowow's tooltip.png border seam without an image */
box-shadow:
var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.6)),
inset 0 0 0 1px rgba(0, 0, 0, 0.85);
}
/* Direct-child paragraphs are tooltip "lines": no margin, just a tight line */
.tooltip > div,
.tooltip > p {
margin: 0;
padding: 0;
line-height: 17px;
}
/* Slight visual gap between major blocks in the tooltip. Renderers place
* between header / stats / use / requires. */
.tooltip__sep {
height: 6px;
border: 0;
margin: 0;
}
/* 2. Item icon + quality border ---------------------------------------------
* `.icon` is the 56x56 square the tooltip floats next to. The quality class
* (.q0..q7) on the same element paints the border.
* -------------------------------------------------------------------------- */
.icon {
width: 56px;
height: 56px;
display: inline-block;
background: #000 center/cover no-repeat;
border: 1px solid var(--q1, #ffffff);
border-radius: 3px;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.8);
vertical-align: middle;
flex-shrink: 0;
}
/* Quality-aware border. The colour-only utility classes in coa-db.css already
* recolour text; here we pin down the *border* (avoids the descendant
* selectors fighting with us). */
.icon.q0 { border-color: var(--q0); }
.icon.q1 { border-color: var(--q1); }
.icon.q2 { border-color: var(--q2); }
.icon.q3 { border-color: var(--q3); }
.icon.q4 { border-color: var(--q4); }
.icon.q5 { border-color: var(--q5); }
.icon.q6 { border-color: var(--q6); }
.icon.q7 { border-color: var(--q7); }
/* Smaller variants — listview thumbs, related-items grid. */
.icon--md { width: 36px; height: 36px; }
.icon--sm { width: 20px; height: 20px; border-radius: 2px; }
/* The frame that pairs the big icon with its tooltip body side-by-side
* (used on item detail pages: /item/{id}). */
.tooltip-frame {
display: inline-flex;
align-items: flex-start;
gap: 12px;
}
/* 3. Header line — name, item level, binding -------------------------------- */
/* Item / spell name. Quality colour comes from the `.qN` class on the same
* element; we just supply the size. */
.tooltip__name {
font-size: 14px;
line-height: 19px;
font-weight: normal;
margin-block-end: 0;
}
.tooltip__ilvl {
font-size: 11px;
color: var(--tt-fg-faint);
text-transform: none;
}
.tooltip__binding {
color: var(--tt-fg);
font-size: 12px;
}
/* "Unique", "Unique-Equipped", account-bound markers. */
.tooltip__flag {
display: block;
color: var(--tt-fg);
}
/* 4. Stat / bonus blocks ----------------------------------------------------
* Items split their lines into a base stat block (`+10 Strength`, armour,
* damage, speed) and a bonus block (`Equip:`, `Use:`, `Chance on hit:`).
* Both are just stacks of plain lines, but coloured differently.
* -------------------------------------------------------------------------- */
.statBlock {
display: block;
color: var(--tt-fg);
}
.statBlock .num,
.statBlock var {
font-style: normal;
font-family: var(--font-mono, monospace);
font-variant-numeric: tabular-nums;
}
/* Damage / armour / speed lines. The right side (e.g. "Speed 3.50") is
* rendered as a flexed pair so the value floats to the right. */
.tooltip__weapon-line {
display: flex;
justify-content: space-between;
gap: 1.5em;
}
.tooltip__dps {
color: var(--tt-fg-muted);
}
.bonusBlock {
display: block;
color: var(--tt-good);
}
.bonusBlock--bad { color: var(--tt-bad); }
.bonusBlock--yellow { color: var(--tt-yellow); } /* set bonus / equip-bonus pinned */
.bonusBlock--cyan { color: var(--tt-cyan); } /* glyph / sockets */
/* Equip / Use / Chance-on-hit lines. Renderers wrap them in a
* `Equip: …`. */
.tooltip__proc {
color: var(--tt-good);
}
.tooltip__proc-label {
color: var(--tt-good);
font-weight: normal;
}
/* Required-level / class / requires-skill lines, rendered grey by default
* and red when the comparator says the player doesn't meet the requirement. */
.tooltip__require { color: var(--tt-fg-muted); }
.tooltip__require--unmet { color: var(--tt-bad); }
/* 5. Random-suffix line ------------------------------------------------------
* "Boots of the Tiger", "Helm of Stamina" — the suffix portion shows in
* italic to indicate it's a procedurally-generated bonus.
* -------------------------------------------------------------------------- */
.tooltip__suffix {
font-style: italic;
color: var(--q2); /* uncommon green is the canonical suffix colour */
}
/* The list of randomly-rolled stats below a suffix is shown in a slightly
* dimmer green so it visually groups with the suffix line. */
.tooltip__suffix-stats {
color: #1eaa00;
}
/* 6. Set bonus block --------------------------------------------------------
* Listed under items that are part of an equipment set. Each piece line is
* slightly indented; the actual N-piece bonus rules are listed below in the
* yellow set-bonus colour.
* -------------------------------------------------------------------------- */
.tooltip__set {
display: block;
margin-block-start: 6px;
color: var(--tt-fg-muted);
}
.tooltip__set-name {
color: var(--q1);
font-weight: normal;
}
.tooltip__set-pieces {
list-style: none;
margin: 0; padding: 0;
}
.tooltip__set-piece {
color: var(--tt-fg-faint);
padding-inline-start: 0.5em;
}
.tooltip__set-piece--owned { color: var(--q1); }
.tooltip__set-bonuses {
margin-block-start: 4px;
list-style: none;
margin-inline: 0;
padding: 0;
}
.tooltip__set-bonus {
color: var(--tt-fg-faint);
}
.tooltip__set-bonus--active { color: var(--tt-yellow); }
/* 7. Spell tooltip details grid ---------------------------------------------
* Spells render their cost / range / cast time / cooldown / school as a
* 2-column grid (left and right pinned), like the in-game spellbook.
*
* .spell-details
* .spell-details__left – Mana cost, range, …
* .spell-details__right – Cast time, cooldown, …
*
* The school colour is applied via `.scN` on the school name span.
* -------------------------------------------------------------------------- */
.spell-details {
display: grid;
grid-template-columns: 1fr auto;
gap: 2px 1.5em;
margin-block-start: 4px;
margin-block-end: 4px;
}
.spell-details__left { color: var(--tt-fg); }
.spell-details__right { color: var(--tt-fg); text-align: end; }
.spell-school {
font-weight: 600;
/* Colour comes from a .sc{bitmask} class added by the renderer. */
}
.spell-cast-time,
.spell-cooldown,
.spell-range,
.spell-cost {
font-family: var(--font-mono, monospace);
font-variant-numeric: tabular-nums;
}
.spell-description {
color: var(--q2);
margin-block-start: 4px;
line-height: 17px;
}
/* "Effect 1: Heals X for N–M" descriptors. */
.spell-effect {
display: block;
color: var(--tt-fg-muted);
}
.spell-effect__label { color: var(--tt-fg-faint); margin-inline-end: 0.25em; }
/* 8. Use / chance-on-hit lines ---------------------------------------------- */
.tooltip__use {
display: block;
color: var(--tt-good);
margin-block-start: 4px;
}
.tooltip__use-label { font-weight: 600; margin-inline-end: 0.25em; }
.tooltip__chance {
display: block;
color: var(--tt-good);
}
/* "Sells for 5g 12s 30c" line — uses tabular numbers and faint colour. */
.tooltip__sell-price {
margin-block-start: 6px;
color: var(--tt-fg-faint);
font-family: var(--font-mono, monospace);
font-variant-numeric: tabular-nums;
}
/* Source / drop info ("Drops from in "). */
.tooltip__source {
display: block;
margin-block-start: 6px;
color: var(--tt-fg-faint);
font-style: italic;
}
/* ----------------------------------------------------------------------------
* Page-embedded item tooltip — when the rendered tooltip lives inside a
* `.item-page` block (right below the page-level ), the tooltip's own
* leading `name` line duplicates the heading. Hide it.
* Standalone tooltips (lookup popups, listings) don't have this wrapper, so
* their leading name line still renders.
* --------------------------------------------------------------------------*/
.item-page > .item-tooltip .tooltip-item tr > td > b:first-child {
display: none;
}
.item-page > .item-tooltip .tooltip-item tr > td > b:first-child + br {
display: none;
}
/* ----------------------------------------------------------------------------
* `.tooltip` panel applied to .item-tooltip when it wraps an item-page tooltip:
* dark inset frame, faint accent border. Tightens up the bare-table look that
* was visible before the panel CSS was wired.
* --------------------------------------------------------------------------*/
.item-page > .item-tooltip {
display: inline-block;
background: var(--bg-tooltip, #050505);
border: 1px solid var(--border-accent, #5a4a1f);
border-radius: var(--radius-md, 5px);
padding: 12px 16px;
margin-block-start: 0.75rem;
font-family: var(--font-tip, Tahoma, Verdana, sans-serif);
font-size: 12px;
line-height: 17px;
color: var(--fg-primary, #e6e6e6);
box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.6));
max-width: 360px;
}
.item-page > .item-tooltip .tooltip-item {
border-collapse: collapse;
width: 100%;
}
.item-page > .item-tooltip .tooltip-item td {
padding: 0;
vertical-align: top;
}
/* ----------------------------------------------------------------------------
* Floating hover tooltip — populated by /static/js/coa-tooltips.js.
*
* The same `.tooltip` panel framing as the in-page item tooltip, but laid out
* as a position:fixed overlay that follows the cursor.
* --------------------------------------------------------------------------*/
.coa-tooltip.tooltip {
background: var(--bg-tooltip, #050505);
border: 1px solid var(--border-accent, #5a4a1f);
border-radius: var(--radius-md, 5px);
padding: 12px 16px;
font-family: var(--font-tip, Tahoma, Verdana, sans-serif);
font-size: 12px;
line-height: 17px;
color: var(--fg-primary, #e6e6e6);
box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.6));
}
.coa-tooltip .tooltip-item {
border-collapse: collapse;
width: 100%;
}
.coa-tooltip .tooltip-item td {
padding: 0;
vertical-align: top;
}
/* ----------------------------------------------------------------------------
* Ascension affix badge — rendered above the flavor description on items
* that have `@|cffRRGGBBLabel|r@` markup (e.g. "Prestigious", "Worldforged").
* Inline `style="color:#RRGGBB"` on the span carries the per-tag color;
* this rule only handles framing.
* --------------------------------------------------------------------------*/
.ascension-affix {
display: inline-block;
font-weight: 600;
letter-spacing: 0.02em;
padding: 0 0.1em;
}