/* ========================================================================== Item tooltip -------------------------------------------------------------------------- The panel that hangs off an item icon in the character profile, the warehouse, the market, the shop, the guild page and the home page. It used to live inside the default theme's layout, so the six other themes rendered the same markup with no styling at all. It is a file of its own now and every layout loads it, so there is one tooltip on the site rather than one per page. ── Where it sits ──────────────────────────────────────────────────────── Beside the item, not under it. An inventory is a grid: a panel below a slot covers the next row, and the row below that. To the side it covers the page, which is not what the player is looking at. Placement is done by item-tooltip.js, which moves the panel to and positions it fixed. That is the only way it survives an inventory grid: the slots sit inside cards with overflow:hidden, and half the themes animate their sections with transforms, which would trap a position:fixed child. With no JS the panel still opens where the CSS puts it. ── The ground ─────────────────────────────────────────────────────────── Opaque. A tooltip is read, and a translucent one puts the page's artwork through the stat lines. Dark on every theme, light ones included, the way a game tooltip is. The trigger stays with each page — `.inv-slot:hover .inv-tooltip` and the rest — because which element opens it is the page's business, not this file's. ========================================================================== */ :root { /* Item quality. MU's own palette: green excellent, blue ancient, violet socket, gold harmony. Named here so a theme can repaint them. */ --it-q-normal: #ffffff; --it-q-exc: #6bff9e; --it-q-anc: #7fb2ff; --it-q-sock: #c9a6ff; --it-q-harm: #ffd45e; --it-q-refine: #e79ae7; /* Solid, every one of them. Nothing here may carry an alpha channel or the page shows through the stat lines. */ --it-bg: #10131c; --it-head: #191e2c; --it-line: #2b3245; --it-ink: #e8ecf4; --it-dim: #9aa3b8; --it-blue: #8ec5ff; } /* ---------- the panel ---------- */ .inv-tooltip { display: none; position: absolute; z-index: 4000; /* Beside the slot. The JS overrides this the moment it takes over; this is what a no-JS reader gets, and it is still to the side. */ left: 100%; top: 50%; transform: translateY(-50%); margin-left: 10px; width: max-content; min-width: 228px; max-width: 330px; padding: 0; overflow: hidden; background: var(--it-bg); border: 1px solid var(--it-line); border-radius: 9px; box-shadow: 0 14px 40px rgba(0, 0, 0, .72), 0 2px 6px rgba(0, 0, 0, .5); color: var(--it-ink); font-size: .72rem; line-height: 1.5; text-align: center; white-space: normal; pointer-events: none; } /* * Once the script has it, the panel is a child of and placed in * viewport coordinates. It is no longer a descendant of the slot, so the * page's own `:hover .inv-tooltip` rule cannot reach it — this is what * shows it instead. */ .inv-tooltip.is-floating { display: block; position: fixed; margin: 0; transform: none; } /* * The old vertical classes still come out of the templates. They no longer * move the panel above or below — that is the layout this change is undoing * — but they are kept so existing markup renders correctly rather than * falling back to an unplaced panel. */ .inv-tooltip.tt-above, .inv-tooltip.tt-below { top: 50%; bottom: auto; margin-top: 0; margin-bottom: 0; } /* No room on the right: the script asks for the other side. */ .inv-tooltip.tt-left { left: auto; right: 100%; margin-left: 0; margin-right: 10px; } /* ---------- quality ---------- */ /* * Quality is spent three ways: a stripe down the leading edge, the border, * and the name. The stripe is what reads first at the corner of the eye. */ .inv-tooltip::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--it-line); } .inv-tooltip.quality-exc::before { background: var(--it-q-exc); } .inv-tooltip.quality-anc::before { background: var(--it-q-anc); } .inv-tooltip.quality-sock::before { background: var(--it-q-sock); } .inv-tooltip.quality-exc { border-color: #2f5f43; } .inv-tooltip.quality-anc { border-color: #34496e; } .inv-tooltip.quality-sock { border-color: #4b3d6b; } /* The slot caption above the name — "Helm", "Weapon" — on pages that know which slot the item came out of. */ .inv-tt-slot { padding: 8px 13px 1px 15px; background: var(--it-head); color: var(--it-dim); font-size: .6rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; text-align: center; } /* Caption and name are one band, so the name does not start a second one. */ .inv-tt-slot + .inv-tt-name { padding-top: 1px; } /* ---------- the head ---------- */ /* * The name gets a band of its own so the stat block beneath has something to * start from. Centred, because it is a title and because that is where a MU * player's eye already goes. */ .inv-tt-name { display: block; margin: 0; padding: 9px 13px 8px 15px; background: var(--it-head); border-bottom: 1px solid var(--it-line); border-radius: 0; color: var(--it-q-normal); font-size: .84rem; font-weight: 700; line-height: 1.3; text-align: center; } .inv-tt-name.q-normal { color: var(--it-q-normal); } .inv-tt-name.q-exc { color: var(--it-q-exc); border-bottom-color: #2f5f43; } .inv-tt-name.q-anc { color: var(--it-q-anc); border-bottom-color: #34496e; } .inv-tt-name.q-sock { color: var(--it-q-sock); border-bottom-color: #4b3d6b; } /* ---------- the tags ---------- */ .inv-tt-tags { display: flex; gap: 4px; justify-content: center; flex-wrap: wrap; margin: 9px 13px 0 15px; } .inv-tt-tag { display: inline-block; padding: 2px 6px; border-radius: 4px; font-size: .54rem; font-weight: 700; letter-spacing: .06em; line-height: 1.5; text-transform: uppercase; } .inv-tt-tag.t-exc { color: var(--it-q-exc); background: #16301f; border: 1px solid #2f5f43; } .inv-tt-tag.t-anc { color: var(--it-q-anc); background: #17233a; border: 1px solid #34496e; } .inv-tt-tag.t-sock { color: var(--it-q-sock); background: #241d36; border: 1px solid #4b3d6b; } .inv-tt-tag.t-harm { color: var(--it-q-harm); background: #322a13; border: 1px solid #6b5a27; } .inv-tt-tag.t-ref { color: var(--it-q-refine); background: #301c30; border: 1px solid #5f3a5f; } .inv-tt-tag.t-sk, .inv-tt-tag.t-luck, .inv-tt-tag.t-opt { color: var(--it-blue); background: #16263c; border: 1px solid #2d4a6b; } /* ---------- the stat block ---------- */ /* * Centred, like the rest of the panel and like the tooltip in the game the * items come from. */ .inv-tt-stats { margin: 0; padding: 9px 13px 11px 15px; text-align: center; } /* Tags with no stats under them should not leave the panel open at the foot. */ .inv-tt-tags:last-child { margin-bottom: 11px; } .inv-tt-line { font-size: .715rem; line-height: 1.55; } .inv-tt-line.c-base, .inv-tt-line.c-dur, .inv-tt-line.c-req, .inv-tt-line.c-class { color: var(--it-ink); } .inv-tt-line.c-skill, .inv-tt-line.c-luck, .inv-tt-line.c-opt { color: var(--it-blue); } .inv-tt-line.c-exc { color: #9ad8ff; } .inv-tt-line.c-anc { color: var(--it-q-anc); } .inv-tt-line.c-anc-header { color: var(--it-q-harm); font-weight: 700; } .inv-tt-line.c-set { color: var(--it-q-exc); } .inv-tt-line.c-refine { color: var(--it-q-refine); } .inv-tt-line.c-socket { color: var(--it-q-sock); } /* Heads the socket block, the way the client heads it. */ .inv-tt-line.c-sockhead { margin-top: 6px; color: var(--it-q-harm); font-weight: 700; } .inv-tt-line.c-harmony { color: var(--it-q-harm); font-weight: 700; } .inv-tt-line.c-wing { color: #b3aaff; } .inv-tt-line.c-pet { color: #6ff0c8; } /* A rule, not a gap: the sections of an item description are separate things and the eye should be told so. */ .inv-tt-sep { height: 1px; margin: 7px 0; background: var(--it-line); } .inv-tt-classes { display: flex; gap: 5px; justify-content: center; flex-wrap: wrap; margin-top: 4px; } .inv-class-tag { display: inline-block; padding: 1px 7px; border-radius: 4px; background: #1b2130; border: 1px solid var(--it-line); color: var(--it-dim); font-size: .66rem; font-weight: 600; } /* * With the script running, the panel only ever shows after it has been * lifted to and placed. Without that rule the page's own * `:hover .inv-tooltip` would paint it in its old position for a frame * first. With no script the hover rules are all there is, so this is * conditional on the class the script sets. */ html.js-tt .inv-tooltip:not(.is-floating) { display: none !important; } /* ---------- triggers that belong to no single page ---------- */ .hm-item { position: relative; overflow: visible !important; } .hm-item:hover .inv-tooltip { display: block; } /* ---------- small screens ---------- */ /* * No room beside anything on a phone. The script centres it instead of * placing it, so the panel only needs to know how wide it may be. */ @media (max-width: 575.98px) { .inv-tooltip { max-width: min(310px, 90vw); } }