User:SerGreen/common.css
Jump to navigation
Jump to search
In other languages: Deutsch • Français
Note: After saving, you may have to bypass your browser's cache to see the changes.
- Google Chrome / Microsoft Edge / Opera: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
/************
/* 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;
}