1
0
Fork 0
mirror of https://github.com/FrankerFaceZ/FrankerFaceZ.git synced 2025-07-27 21:18:30 +00:00
FrankerFaceZ/styles/native/tooltip.scss
SirStendec 80931479c1 4.63.0
* Added: Setting to display Content Flags on directory pages.
* Fixed: The setting to make the player larger on `clips.twitch.tv` pages incorrectly defaulting to true. Closes #1440.
* Fixed: Exception thrown when pressing Escape in chat with a tray open.
* Fixed: Chat not correctly displaying messages until the mouse is moved when using an option to pause chat using mouse movement.
* Fixed: Misspelled entry in the Content Flags list.
* Fixed: Some directory cards not being correctly detected by FFZ.
* Fixed: Color processing throwing an exception if the input value is empty.
* Fixed: Some page elements failing to appear correctly, instead showing an error. Notably this affects the PrattleNot add-on as well as some emote tool-tips. Closes https://github.com/FrankerFaceZ/Add-Ons/issues/193
* Changed: Add a note to the setting to hide extensions that recommends CommanderRoot's Disable Twitch Extensions browser extension.
* Changed: Log a warning when users use external scripts to mess with experiments.
* API Changed: `deep_copy` now correctly handles RegExp, Date, Set, and Map objects.
2023-12-18 17:11:44 -05:00

149 lines
2.3 KiB
SCSS

.ffz-il-tooltip {
user-select: none;
background-color: var(--color-background-tooltip);
border-radius: var(--border-radius-medium);
color: var(--color-text-tooltip);
font-size: var(--font-size-6);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-heading);
display: none;
position: absolute;
text-align: left;
padding: 3px 6px;
pointer-events: none;
white-space: nowrap;
z-index: var(--z-index-balloon);
display: none;
.tw-root--hover &__container:hover &,
.tw-root--touch &__container:hover &,
&__container--show & {
display: block;
}
&:before,&:after {
content: '';
position: absolute;
}
&:before {
height: calc(100% + 12px);
left: -6px;
top: -6px;
width: calc(100% + 12px);
z-index: -1;
}
&:after {
background-color: var(--color-background-tooltip);
height: 6px;
transform: rotate(45deg);
width: 6px;
z-index: -1;
}
&--wrap { white-space: normal; }
&--pre { white-space: pre; }
&--prewrap { white-space: pre-wrap; }
&--20 { width: 20rem; }
&--30 { width: 30rem; }
&--left {
left: auto;
margin-right: 6px;
right: 100%;
top: 0;
&:after {
border-radius: 0 var(--border-radius-small) 0 0;
left: 100%;
margin-left: -3px;
top: 6px;
}
}
&--right {
left: 100%;
margin-left: 6px;
top: 0;
&:after {
border-radius: 0 0 0 var(--border-radius-small);
left: 0;
margin-left: -3px;
top: 6px;
}
}
&--left.ffz-il-tooltip--align-center,
&--right.ffz-il-tooltip--align-center {
top: 50%;
transform: translateY(-50%);
&:after {
margin-top: -3px;
top: 50%;
}
}
&--up {
bottom: 100%;
left: 0;
margin-bottom: 6px;
top: auto;
&:after {
border-radius: 0 0 var(--border-radius-small);
left: 6px;
margin-top: -3px;
top: 100%;
}
}
&--down {
left: 0;
margin-top: 6px;
top: 100%;
&:after {
border-radius: var(--border-radius-small) 0 0;
left: 6px;
top: -3px;
}
}
&--down.ffz-il-tooltip--align-center,
&--up.ffz-il-tooltip--align-center {
left: 50%;
transform: translateX(-50%);
&:after {
left: 50%;
margin-left: -3px;
}
}
&--down.ffz-il-tooltip--align-right,
&--up.ffz-il-tooltip--align-right {
left: auto;
right: 0;
top: auto;
&:after {
left: 100%;
margin-left: -12px;
top: 100%;
}
}
&--down.ffz-il-tooltip--align-right {
top: 100%;
&:after {
top: -3px;
}
}
}