mirror of
https://github.com/zulip/zulip.git
synced 2026-06-21 21:32:29 +08:00
42bea85666
By default, Tippys with the `data-reference-hidden` attribute aren't displayed. But when we render them as centered overlays on mobile and use `getReferenceClientRect` for a virtual reference, Tippy slaps this hidden attribute on our element, making it invisible. We want to bypass this in scenarios where we're centering popovers on mobile screens.
104 lines
3.4 KiB
CSS
104 lines
3.4 KiB
CSS
[data-tippy-root] {
|
|
/* Since tooltip elements are sometimes inside elements
|
|
* which have different font-family, we force font-family
|
|
* for tooltips here.
|
|
*/
|
|
font-family: "Source Sans 3 VF", sans-serif !important;
|
|
overflow-wrap: anywhere;
|
|
/* Contains stylistic variant of upper-case character "I" in Source Sans 3 */
|
|
font-feature-settings: "ss01" on;
|
|
|
|
/* Affects all tippy tooltips not using any theme. */
|
|
.tippy-box:not([data-theme]) {
|
|
background: hsl(0deg 0% 20%);
|
|
border-radius: 5px;
|
|
min-height: 25px;
|
|
box-sizing: border-box;
|
|
|
|
.tippy-content {
|
|
box-sizing: inherit;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 5px 10px;
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
color: hsl(0deg 0% 100%);
|
|
}
|
|
|
|
.tippy-arrow::before {
|
|
/* This affects the arrow for tooltips and doesn't have any impact on arrows for popovers.
|
|
* The transform property scales down the size of the arrow, giving it a thinner appearance.
|
|
* https://atomiks.github.io/tippyjs/v6/themes/#changing-the-arrow-size
|
|
*/
|
|
transform: scale(0.75);
|
|
}
|
|
|
|
.tooltip-inner-content {
|
|
line-height: 17px;
|
|
}
|
|
|
|
&[data-placement^="top"] > .tippy-arrow::before {
|
|
border-top-color: hsl(0deg 0% 20%);
|
|
}
|
|
|
|
&[data-placement^="bottom"] > .tippy-arrow::before {
|
|
border-bottom-color: hsl(0deg 0% 20%);
|
|
}
|
|
|
|
&[data-placement^="left"] > .tippy-arrow::before {
|
|
border-left-color: hsl(0deg 0% 20%);
|
|
}
|
|
|
|
&[data-placement^="right"] > .tippy-arrow::before {
|
|
border-right-color: hsl(0deg 0% 20%);
|
|
}
|
|
}
|
|
|
|
.tippy-arrow::before {
|
|
/* `.tippy-arrow:before` element sometimes
|
|
* inherits the height of the parent, we
|
|
* don't want any height here since we
|
|
* want it to remain an triangle.
|
|
* The bug was only found in Firefox.
|
|
*/
|
|
height: 0 !important;
|
|
}
|
|
/* If the text in the tooltips stretches to multiple lines,
|
|
* we want the lines to be left-indented and not right-indented
|
|
* by default.
|
|
*/
|
|
text-align: left;
|
|
|
|
.tooltip-hotkey-hints {
|
|
box-sizing: inherit;
|
|
display: flex;
|
|
align-self: flex-start;
|
|
margin: 0 -5px 0 10px;
|
|
gap: 4px;
|
|
}
|
|
|
|
& span.tooltip-hotkey-hint {
|
|
border: 1px solid hsl(225deg 100% 84%);
|
|
border-radius: 3px;
|
|
color: hsl(225deg 100% 84%);
|
|
padding: 0 5px;
|
|
text-align: center;
|
|
}
|
|
|
|
/* If the reference of the tooltip is went offscreen while scrolling,
|
|
the tooltip will be visible until the scrolling stops. Popper adds
|
|
`data-reference-hidden` attribute to those tooltips whole reference is
|
|
hidden. Since tooltips have `absolute` position, they can occupy scroll
|
|
space offscreen and cause document to have the wrong scroll height.
|
|
Setting `display: none` makes sure it doesn't occupy any offscreen space.
|
|
|
|
NOTE: This data attribtute has changed each time in the past 3 releases and
|
|
if we upgrade tippy from v6, we should check if this attribute is still valid.
|
|
|
|
See https://github.com/atomiks/tippyjs/issues/555 for some discussion on this.
|
|
*/
|
|
[data-reference-hidden]:not(.show-when-reference-hidden) {
|
|
display: none;
|
|
}
|
|
}
|