oss/FrankerFaceZ
oss/FrankerFaceZ
1
0
Fork 0
mirror of https://github.com/FrankerFaceZ/FrankerFaceZ.git synced 2025-07-31 23:18:31 +00:00
Code Wiki Activity

Add support for clickable stream metadata. Add helper utility for detecting clicks outside of elements. Add support for manually shown/hidden tooltips, which is used for custom pop-ups.

Browse source
This commit is contained in:
SirStendec 2017-12-04 18:58:19 -05:00
parent dfa0c9c88f
commit e224800fb9
7 changed files with 241 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

4
styles/chat.scss
View file

@ -38,10 +38,6 @@
position: relative;
z-index: 0;
> img {
margin: 0 !important
}
span {
position: absolute;
top: -20px; bottom: -20px; left: -20px; right: -20px;

77
styles/tooltips.scss
View file

@ -2,6 +2,75 @@ body {
overflow-x: hidden
}
.ffz-metadata-balloon {
z-index: 999999999;
margin: 6px;
&[x-placement^="bottom"] > .tw-balloon__tail {
top: -3px;
box-shadow: -1px -1px 0 #dad8de;
.theme--dark & {
box-shadow: -1px -1px 0 #2c2541;
}
.theme--ffz & {
box-shadow: -1px -1px 0 var(--ffz-color-20);
}
}
&[x-placement^="top"] > .tw-balloon__tail {
bottom: -3px;
box-shadow: 1px 1px 0 #dad8de;
.theme--dark & {
box-shadow: 1px 1px 0 #2c2541;
}
.theme--ffz & {
box-shadow: 1px 1px 0 var(--ffz-color-20);
}
}
&[x-placement^="left"] > .tw-balloon__tail {
right: -3px;
box-shadow: -1px 1px 0 #dad8de;
.theme--dark & {
box-shadow: -1px 1px 0 #2c2541;
}
.theme--ffz & {
box-shadow: -1px 1px 0 var(--ffz-color-20);
}
}
&[x-placement^="right"] > .tw-balloon__tail {
left: -3px;
box-shadow: 1px -1px 0 #dad8de;
.theme--dark & {
box-shadow: 1px -1px 0 #2c2541;
}
.theme--ffz & {
box-shadow: 1px -1px 0 var(--ffz-color-20);
}
}
}
.ffz-metadata-balloon,
.ffz__tooltip {
.loader {
text-align: center;
opacity: .5;
margin: 1rem;
font-size: 3rem;
animation: ffz-rotateplane 1.2s infinite linear;
}
}
.ffz__tooltip {
z-index: 999999999;
margin: 6px;
@ -16,14 +85,6 @@ body {
&.html { white-space: normal }
.loader {
opacity: .5;
margin: 1rem;
font-size: 3rem;
animation: ffz-rotateplane 1.2s infinite linear;
}
.ffz__tooltip--arrow {
position: absolute;
width: 6px; height: 6px;