/* Keep hexo-reference tooltips (hint.css) inside the viewport. * * hint.css is injected into by hexo-reference, i.e. it comes after * the stylesheets in document order. In practice (Firefox) later * document order beats even higher specificity for these declarations, so * every override here uses !important. * * hint-clamp.js measures the note + tooltip on hover and writes the needed * horizontal shift into --hint-shift-x on the note element; it also flips * the tooltip to hint--bottom when the note sits too close to the top edge. */ body .hint--top::after { -webkit-transform: translateX(calc(-50% + var(--hint-shift-x, 0px))) !important; transform: translateX(calc(-50% + var(--hint-shift-x, 0px))) !important; -webkit-transition: opacity .3s ease, visibility .3s ease !important; transition: opacity .3s ease, visibility .3s ease !important; } body .hint--top:hover::after { -webkit-transform: translateX(calc(-50% + var(--hint-shift-x, 0px))) translateY(-8px) !important; transform: translateX(calc(-50% + var(--hint-shift-x, 0px))) translateY(-8px) !important; } body .hint--bottom::after { -webkit-transform: translateX(calc(-50% + var(--hint-shift-x, 0px))) !important; transform: translateX(calc(-50% + var(--hint-shift-x, 0px))) !important; -webkit-transition: opacity .3s ease, visibility .3s ease !important; transition: opacity .3s ease, visibility .3s ease !important; } body .hint--bottom:hover::after { -webkit-transform: translateX(calc(-50% + var(--hint-shift-x, 0px))) translateY(8px) !important; transform: translateX(calc(-50% + var(--hint-shift-x, 0px))) translateY(8px) !important; } /* The little arrow (::before) is hidden: it points at the note, but once the * bubble is clamped it no longer lines up with it and ends up half-covered * by the bubble, which looks broken. Removing it keeps the tooltip clean. */ body .hint--top::before, body .hint--bottom::before { display: none !important; } /* Safety net on very narrow viewports. */ body .hint--medium::after { max-width: calc(100vw - 20px); }