User:SerGreen/common.css

/************ /* Tooltips * /************/ .tooltip-block { display: block; visibility: hidden; opacity: 0; transition: visibility 0s, opacity 0.1s linear; position: fixed; z-index: 2; text-align: left; max-width: 500px; background: #111a; color: white; backdrop-filter: blur(6px); } .tooltip:hover > .tooltip-block { visibility: visible; opacity: 1; } .tooltip-block > .title { font-size: small; display: block; background: #E59345; padding: 3px 5px; font-weight: bold; } .tooltip-block > .tooltip-body { padding: 5px; } .tooltip-block .description { font-size: x-small; } .tooltip-block hr { margin-top: 3px; margin-bottom: 5px; } .tooltip-recipe { margin-top: 6px; } .tooltip-recipe > .recipe-name { font-size: 0.75em; font-weight: bold; margin-bottom: 3px; } .tooltip-recipe > .production-rate { font-size: x-small; margin-top: 5px; } .tooltip-recipe > .production-rate > span { color:#E59345; font-weight:bold; } .tooltip-recipe > .recipe-row { display: inline-flex; } .tooltip-recipe > .recipe-row > .recipe-item { background: #eeeb; padding: 2px; border-radius: 2px; position: relative; margin-right: 8px; width: 32px; height: 32px; } .tooltip-recipe > .recipe-row > .recipe-item:last-child { margin-right: 0; } .tooltip-recipe > .recipe-row > .recipe-item > div { padding-left: 2px; padding-top: 2px; } .tooltip-recipe > .recipe-row > .recipe-item .amount { font-size: 0.75em; font-weight: bold; background: #444; padding: 2px 4px; border-radius: 4px; position: absolute; right: -3px; bottom: -3px; } .tooltip-recipe > .recipe-row > .recipe-item .amount.fluid { border-radius: 666px; } .tooltip-recipe > .recipe-row .arrow { align-self: center; margin-right: 8px; }