.hover-tooltip-popup-box { position: relative; overflow: hidden; border-radius: 2px; /*border-color: grey; border-width: 1px; border-style: solid;*/ margin-bottom: 5px; background-color: var(--md-code-bg-color); top: 0; } .mermaid { top: 0; } .hover-tooltip-popup-icon { width: 0.875em; fill: var(--md-default-fg-color--lightest); transition: 0.25s; pointer-events: none; } .hover-tooltip-popup-button { width: 1.25em; height: 1.25em; background: transparent; border: none; cursor: pointer; padding: 0; margin: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 3px; } button:hover .hover-tooltip-popup-icon { fill: var(--md-accent-fg-color); } .hover-tooltip-popup-button:hover { background-color: var(--md-default-fg-color--lightest); } :hover > * > * > .hover-tooltip-popup-icon { fill: var(--md-default-fg-color--light); } .hover-tooltip-popup-hidden { display: none; } .hover-tooltip-popup-top-nav { position: absolute; right: 10px; top: 10px; display: flex; justify-content: flex-end; gap: 5px; z-index: 4; } .hover-tooltip-popup-nav-infobox-top { position: absolute; right: 10px; top: 35px; display: flex; justify-content: flex-end; gap: 5px; z-index: 3; } .hover-tooltip-popup-info-box { position: relative; padding-top: 15px; font-size: 1em; text-align: center; z-index: 3; background-color: var(--md-default-bg-color); color: var(--md-default-fg-color--light); } .hover-tooltip-popup-info-box-top { position: relative; padding-bottom: 15px; font-size: 1em; text-align: center; z-index: 3; background-color: var(--md-default-bg-color); color: var(--md-default-fg-color--light); } .hover-tooltip-popup-fullscreen { position: fixed; max-width: 100vw; max-height: 100vh; width: 100%; height: 100%; top: 0; left: 0; z-index: 100; } .hover-tooltip-popup-fullscreen .hover-tooltip-popup-info-box { position: absolute; bottom: 0; width: 100%; } .hover-tooltip-popup-fullscreen img { max-width: 100%; max-height: 100%; } /* Hover tooltip popover (per-node hints). Appended to , so positioned with position: fixed via getBoundingClientRect in hover-tooltip-popup.js. */ .hover-tooltip-popup-tooltip-popover { position: fixed; z-index: 1000; max-width: 280px; padding: 8px 12px; background-color: var(--md-default-bg-color, #fff); color: var(--md-default-fg-color, #333); border: 1px solid var(--md-default-fg-color--lightest, #ccc); border-radius: 4px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); font-size: 0.85em; line-height: 1.4; /* Interactive: the user can move into the popover to select its text or click links. A short close delay (see TOOLTIP_CLOSE_DELAY) bridges the gap between the node and the popover so it doesn't vanish in transit. */ pointer-events: auto; } .hover-tooltip-popup-tooltip-popover p { margin: 0.25em 0; } .hover-tooltip-popup-tooltip-popover p:first-child { margin-top: 0; } .hover-tooltip-popup-tooltip-popover p:last-child { margin-bottom: 0; }