FIREFOX ONLY:
<script>
if (navigator.userAgent.indexOf("Firefox") != -1) {
var menus = document.querySelectorAll('.symbol');
for (const m of menus) {
m.parentElement.classList.add('fixed');
}
}
</script>
<style>
:root {
--symbol-edge: black;
--symbol-edge-width: 2px;
--symbol-fill: rgb(255, 255, 0);
--symbol-fade: 2275ms;
--symbol-imprint: 850ms;
--backing: white;
--menu-edge: blue;
--menu-show: 1750ms;
--delay: 265ms;
--easing: ease-in-out;
--corner: 0.5em;
--border: 1px;
}
.fixed {
position: fixed;
}
.symbol {
cursor: pointer;
}
.xr_group:has([class*="symbol"]) {
position: fixed;
}
.symbol svg path {
stroke: transparent;
stroke-width: 0;
transition: var(--symbol-fade) ease-in-out;
}
.symbol:hover svg path {
fill: var(--symbol-fill);
stroke: var(--symbol-edge);
stroke-width: var(--symbol-edge-width);
transition: var(--symbol-imprint) var(--easing);
}
.symbol + .menu {
visibility: hidden;
opacity: 0;
max-height: 0;
border: 0 solid;
border-radius: 0;
transition: var(--menu-show) var(--easing) var(--delay);
}
.symbol:hover + .menu, .menu:hover {
visibility: visible;
opacity: 1;
max-height: 100vh;
background: var(--backing);
border: var(--border) solid var(--menu-edge);
border-radius: var(--corner);
padding: var(--corner) var(--corner) 0;
transition: var(--menu-show);
}
</style>
Problem
