mirror of
https://github.com/FrankerFaceZ/FrankerFaceZ.git
synced 2025-07-27 21:18:30 +00:00
* 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.
149 lines
2.3 KiB
SCSS
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;
|
|
}
|
|
}
|
|
}
|