154 lines
2.8 KiB
CSS
154 lines
2.8 KiB
CSS
/**
|
|
* phpBB Studio's Dice extension for the phpBB Forum Software package.
|
|
*
|
|
* @copyright (c) 2019 phpBB Studio <https://www.phpbbstudio.com>
|
|
* @license GNU General Public License, version 2 (GPL-2.0)
|
|
*/
|
|
|
|
.dice-display {
|
|
display: inline-block;
|
|
}
|
|
|
|
.dice-tooltip,
|
|
.dice-tooltip * {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.dice-roll-highest { color: #1b9a1b; }
|
|
.dice-roll-lowest { color: #d31141; }
|
|
|
|
.dice-tooltip {
|
|
position: relative;
|
|
cursor: help;
|
|
}
|
|
|
|
.dice-tooltip:after,
|
|
.dice-tooltip:before {
|
|
opacity: 0;
|
|
position: absolute;
|
|
z-index: 99;
|
|
visibility: hidden;
|
|
transition: transform 200ms ease, opacity 200ms;
|
|
}
|
|
|
|
.dice-tooltip:before {
|
|
font-size: 10px;
|
|
font-weight: bold;
|
|
white-space: normal;
|
|
text-decoration: none;
|
|
background: #000000;
|
|
border-radius: 4px;
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
|
|
color: #ffffff;
|
|
padding: 5px 10px;
|
|
content: attr(data-tooltip);
|
|
}
|
|
|
|
.dice-tooltip:after {
|
|
border: 6px solid transparent;
|
|
width: 0;
|
|
height: 0;
|
|
content: "";
|
|
}
|
|
|
|
.dice-tooltip:hover:after,
|
|
.dice-tooltip:hover:before {
|
|
opacity: 0.85;
|
|
visibility: visible;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.dice-tooltip-top:before,
|
|
.dice-tooltip-top:after { transform: translateY(10px); }
|
|
|
|
.dice-tooltip-top:hover:after,
|
|
.dice-tooltip-top:hover:before { transform: translateY(0); }
|
|
|
|
.dice-tooltip-right:before,
|
|
.dice-tooltip-right:after { transform: translateX(0); }
|
|
|
|
.dice-tooltip-right:hover:after,
|
|
.dice-tooltip-right:hover:before { transform: translateX(10px); }
|
|
|
|
.dice-tooltip-bottom:before,
|
|
.dice-tooltip-bottom:after { transform: translateY(-10px); }
|
|
|
|
.dice-tooltip-bottom:hover:after,
|
|
.dice-tooltip-bottom:hover:before { transform: translateY(0); }
|
|
|
|
.dice-tooltip-left:before,
|
|
.dice-tooltip-left:after { transform: translateX(0); }
|
|
|
|
.dice-tooltip-left:hover:after,
|
|
.dice-tooltip-left:hover:before { transform: translateX(-10px); }
|
|
|
|
.dice-tooltip-top:before {
|
|
bottom: 100%;
|
|
left: 5px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.dice-tooltip-top:after {
|
|
border-top-color: #000000;
|
|
border-bottom: none;
|
|
bottom: 101%;
|
|
left: calc(50% - 6px);
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.dice-tooltip-left:before {
|
|
top: -15%;
|
|
right: 100%;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.dice-tooltip-left:after {
|
|
border-right: none;
|
|
border-left-color: #000000;
|
|
top: calc(50% - 3px);
|
|
right: 100%;
|
|
margin-top: -6px;
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.dice-tooltip-right:before {
|
|
top: 15%;
|
|
left: 100%;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.dice-tooltip-right:after {
|
|
border-right-color: #000000;
|
|
border-left: none;
|
|
top: calc(50% - 6px);
|
|
left: calc(100% + 4px);
|
|
}
|
|
|
|
.dice-tooltip-bottom:before {
|
|
top: 100%;
|
|
left: 5px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.dice-tooltip-bottom:after {
|
|
border-top: none;
|
|
border-bottom-color: #000000;
|
|
top: 100%;
|
|
left: calc(50% - 6px);
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.dice-tooltip-flip:before {
|
|
right: 5px;
|
|
left: unset;
|
|
}
|
|
|
|
.dice-box {
|
|
background-color: rgba(255, 255, 255, 0.8);
|
|
width: 100%;
|
|
}
|
|
|
|
.dice-box dd {
|
|
min-height: 75px;
|
|
}
|