oss/FrankerFaceZ
oss/FrankerFaceZ
1
0
Fork 0
mirror of https://github.com/FrankerFaceZ/FrankerFaceZ.git synced 2025-09-16 01:56:55 +00:00
Code Wiki Activity

4.22.6

Browse source 
First round of fixes, more to follow.

* Fixed: Appearance of tool-tip and balloon page elements.
This commit is contained in:
SirStendec 2021-05-17 17:02:23 -04:00
parent f0d68527b8
commit 89941d2ee5
47 changed files with 580 additions and 256 deletions
Download patch file Download diff file Expand all files Collapse all files

145
styles/native/tooltip.scss Normal file
View file

@ -0,0 +1,145 @@
.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; }
&--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;
}
}
}