mirror of
https://github.com/FrankerFaceZ/FrankerFaceZ.git
synced 2025-08-03 16:38:31 +00:00
4.22.6
First round of fixes, more to follow. * Fixed: Appearance of tool-tip and balloon page elements.
This commit is contained in:
SirStendec
parent
f0d68527b8
commit
89941d2ee5
47 changed files with 580 additions and 256 deletions
179
styles/native/balloon.scss
Normal file
179
styles/native/balloon.scss
Normal file
|
|
@ -0,0 +1,179 @@
|
|||
.ffz-balloon {
|
||||
max-width: 90vw;
|
||||
min-width: 16rem;
|
||||
z-index: 2000;
|
||||
|
||||
& > &__tail {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
|
||||
& .ffz-balloon-symbol {
|
||||
height: 8px;
|
||||
transform: rotate(45deg) translate(-50%,-50%);
|
||||
transform-origin: 0 0;
|
||||
width: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
&--overlay-border {
|
||||
border: 2px solid var(--color-border-balloon-overlay);
|
||||
}
|
||||
|
||||
&--left {
|
||||
margin-right: 8px;
|
||||
right: 100%;
|
||||
|
||||
& > .ffz-balloon__tail {
|
||||
left: 100%;
|
||||
margin-left: -1px;
|
||||
|
||||
& .ffz-balloon__tail-symbol {
|
||||
right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--right {
|
||||
left: 100%;
|
||||
margin-left: 8px;
|
||||
|
||||
& > .ffz-balloon__tail {
|
||||
margin-right: -1px;
|
||||
right: 100%;
|
||||
|
||||
& .ffz-balloon__tail-symbol {
|
||||
right: -8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--left, &--right {
|
||||
top: 0;
|
||||
|
||||
& > .ffz-balloon__tail {
|
||||
top: 8px;
|
||||
|
||||
& .ffz-balloon__tail-symbol {
|
||||
top: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
&.ffz-balloon--center {
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
|
||||
& > .ffz-balloon__tail {
|
||||
margin-top: -5.33333px;
|
||||
top: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--up {
|
||||
bottom: 100%;
|
||||
left: 0;
|
||||
margin-bottom: 8px;
|
||||
top: auto;
|
||||
|
||||
& > .ffz-balloon__tail {
|
||||
margin-top: -1px;
|
||||
top: 100%;
|
||||
|
||||
& .ffz-balloon__tail-symbol {
|
||||
bottom: 8px;
|
||||
top: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--down, &--up {
|
||||
& > .ffz-balloon__tail .ffz-balloon__tail-symbol {
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
&.ffz-balloon--left {
|
||||
left: 0;
|
||||
right: auto;
|
||||
|
||||
& > .ffz-balloon__tail {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.ffz-balloon--center {
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
|
||||
& > .ffz-balloon__tail {
|
||||
left: 50%;
|
||||
margin-left: -8px;
|
||||
}
|
||||
}
|
||||
|
||||
&.ffz-balloon--right {
|
||||
left: auto;
|
||||
right: 0;
|
||||
|
||||
& > .ffz-balloon__tail {
|
||||
left: 100%;
|
||||
margin-left: -16px;
|
||||
top: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--down {
|
||||
left: 0;
|
||||
margin-top: 8px;
|
||||
top: 100%;
|
||||
|
||||
& > .ffz-balloon__tail {
|
||||
bottom: 100%;
|
||||
margin-bottom: -1px;
|
||||
|
||||
& .ffz-balloon__tail-symbol {
|
||||
bottom: -8px;
|
||||
top: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&.ffz-balloon--right {
|
||||
top: 100%;
|
||||
|
||||
& > .ffz-balloon__tail {
|
||||
left: 100%;
|
||||
margin-left: -16px;
|
||||
top: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--xs {
|
||||
min-width: 10rem;
|
||||
width: 10rem;
|
||||
}
|
||||
|
||||
&--auto {
|
||||
min-width: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&--sm { width: 20rem }
|
||||
&--md { width: 30rem }
|
||||
&--lg { width: 40rem }
|
||||
&--xl { width: 50rem }
|
||||
}
|
||||
|
||||
.tw-attached {
|
||||
position: absolute;
|
||||
z-index: var(--z-index-balloon);
|
||||
|
||||
&--up { margin-bottom: 0 }
|
||||
&--down { margin-top: 0 }
|
||||
&--left { margin-right: 0 }
|
||||
&--right { margin-left: 0 }
|
||||
|
||||
&--up.tw-attached--right {
|
||||
inset: auto 0px 100% auto;
|
||||
}
|
||||
}
|
||||
|
|
@ -6,3 +6,5 @@
|
|||
@import "card";
|
||||
@import "tag";
|
||||
@import "progress";
|
||||
@import "tooltip";
|
||||
@import "balloon";
|
||||
145
styles/native/tooltip.scss
Normal file
145
styles/native/tooltip.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
.ffz-balloon {
|
||||
/*.ffz-balloon {
|
||||
max-width: 90vw;
|
||||
min-width: 16rem;
|
||||
|
||||
|
|
@ -20,4 +20,4 @@
|
|||
|
||||
.ffz-balloon--overlay-border {
|
||||
border: 2px solid var(--color-border-balloon-overlay);
|
||||
}
|
||||
}*/
|
||||
Loading…
Add table
Add a link
Reference in a new issue