Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
zulip/web/styles/tooltips.css

120 lines
3.9 KiB
CSS
Raw Normal View History

tooltips: Move tooltips styling to a dedicated .css file. We want to seperate the tooltips styling into a dedicated .css file for general readability and decluttering of the zulip.css file.
2022-08-01 19:35:41 +02:00
[data-tippy-root] {
/* Since tooltip elements are sometimes inside elements
* which have different font-family, we force font-family
* for tooltips here.
*/
css: Use variable font when using Source Sans 3. This is to overcome the limitations of previous static font, which didn't allow us to use various font widths.
2023-03-27 12:47:59 +02:00
font-family: "Source Sans 3 VF", sans-serif !important;
tooltips: Fix text overflowing.
2023-04-13 17:21:38 +02:00
overflow-wrap: anywhere;
tooltips: Set font-feature-settings to "ss01" for stylistic variant of "I". This commit enables the stylistic set "ss01" in Source Sans 3 font family which contains stylistic variant of the upper-case character "I", which contains two bars, one each on the top and bottom of the letter. This provides a uniform look across all the characters when used in the hotkey hints of the tooltips.
2022-09-14 22:49:44 +02:00
/* Contains stylistic variant of upper-case character "I" in Source Sans 3 */
font-feature-settings: "ss01" on;
tooltips: Move tooltips styling to a dedicated .css file. We want to seperate the tooltips styling into a dedicated .css file for general readability and decluttering of the zulip.css file.
2022-08-01 19:35:41 +02:00
/* Affects all tippy tooltips not using any theme. */
.tippy-box:not([data-theme]) {
styles: Use modern color notation. postcss-preset-env transpiles this back as necessary. (It does a better job than we did, in fact: we had several four-argument hsl() calls that should have been hsla().) Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-20 22:08:47 +01:00
background: hsl(0deg 0% 20%);
tooltips: Change tooltips styling to incorporate the redesign. We use hsla(0, 0%, 20%, 1) for the light theme background color and hsla(0, 0%, 0%, 1) for the dark theme. The text inside the tooltips should be white in color, 14px in size and have a line height of 15px. With one line of text, we want the height of the tooltips to be 25px, i.e, line height (15px) + padding (5px + 5px = 10px). Part of #21753
2022-08-01 20:26:04 +02:00
border-radius: 5px;
tippy: Allow Tippy tooltips to scale with UI.
2024-07-03 17:42:29 +02:00
/* 14px at 14px/1em */
tooltips: Make size of tooltips consistent. Uses a variable for defining font-size on tooltips instead of `1em`.
2024-07-13 12:57:25 +02:00
font-size: var(--base-font-size-px);
tippy: Allow Tippy tooltips to scale with UI.
2024-07-03 17:42:29 +02:00
/* 25px at 14px/1em */
min-height: 1.7857em;
tooltips: Add hotkey hints support for tooltips. We add the support for hotkey hints for the tippyjs tooltips through the hotkey_hints handlebar helper. The hotkey_hints helper takes space seperated string arguments and returns a span containing all the hotkeys with the required classes for styling. We also add a simple node test for the hotkey_hints handlebar helper. Part of #21753
2022-08-01 20:58:23 +02:00
box-sizing: border-box;
tooltips: Move tooltips styling to a dedicated .css file. We want to seperate the tooltips styling into a dedicated .css file for general readability and decluttering of the zulip.css file.
2022-08-01 19:35:41 +02:00
tooltips: Add hotkey hints support for tooltips. We add the support for hotkey hints for the tippyjs tooltips through the hotkey_hints handlebar helper. The hotkey_hints helper takes space seperated string arguments and returns a span containing all the hotkeys with the required classes for styling. We also add a simple node test for the hotkey_hints handlebar helper. Part of #21753
2022-08-01 20:58:23 +02:00
.tippy-content {
box-sizing: inherit;
display: flex;
align-items: center;
tooltips: Change tooltips styling to incorporate the redesign. We use hsla(0, 0%, 20%, 1) for the light theme background color and hsla(0, 0%, 0%, 1) for the dark theme. The text inside the tooltips should be white in color, 14px in size and have a line height of 15px. With one line of text, we want the height of the tooltips to be 25px, i.e, line height (15px) + padding (5px + 5px = 10px). Part of #21753
2022-08-01 20:26:04 +02:00
padding: 5px 10px;
tippy: Allow Tippy tooltips to scale with UI.
2024-07-03 17:42:29 +02:00
/* 14px at 14px/1em */
tooltips: Make size of tooltips consistent. Uses a variable for defining font-size on tooltips instead of `1em`.
2024-07-13 12:57:25 +02:00
font-size: var(--base-font-size-px);
tippy: Allow Tippy tooltips to scale with UI.
2024-07-03 17:42:29 +02:00
/* 20px at 14px/1em */
line-height: 1.4286em;
tippy: Ensure a normal font-weight on Tippies.
2024-07-03 18:44:01 +02:00
/* Don't inherit font-weight when
a Tippy attaches to a parent */
font-weight: normal;
styles: Use modern color notation. postcss-preset-env transpiles this back as necessary. (It does a better job than we did, in fact: we had several four-argument hsl() calls that should have been hsla().) Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-20 22:08:47 +01:00
color: hsl(0deg 0% 100%);
tooltips: Move tooltips styling to a dedicated .css file. We want to seperate the tooltips styling into a dedicated .css file for general readability and decluttering of the zulip.css file.
2022-08-01 19:35:41 +02:00
}
tippy: Fix tippy-arrow thickness.
2023-03-23 08:46:41 +01:00
.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);
}
tooltips: Add italics styling to description of multi-line tooltips. The second line of a multi-line tooltip generally desctribes the additional information which helps the major text, i.e. the first line of the multi-line tooltip, hence it would be a good idea to add italics styling, to differentiate it from the main title. We describe a simple ".italic" class for the same. We also add a shorter line height to this description using the ".tooltip-inner-content" class.
2022-10-05 17:34:50 +02:00
.tooltip-inner-content {
tippy: Allow Tippy tooltips to scale with UI.
2024-07-03 17:42:29 +02:00
/* 17px at 14px/1em */
line-height: 1.2143em;
tooltips: Add italics styling to description of multi-line tooltips. The second line of a multi-line tooltip generally desctribes the additional information which helps the major text, i.e. the first line of the multi-line tooltip, hence it would be a good idea to add italics styling, to differentiate it from the main title. We describe a simple ".italic" class for the same. We also add a shorter line height to this description using the ".tooltip-inner-content" class.
2022-10-05 17:34:50 +02:00
}
tooltips: Change tooltips styling to incorporate the redesign. We use hsla(0, 0%, 20%, 1) for the light theme background color and hsla(0, 0%, 0%, 1) for the dark theme. The text inside the tooltips should be white in color, 14px in size and have a line height of 15px. With one line of text, we want the height of the tooltips to be 25px, i.e, line height (15px) + padding (5px + 5px = 10px). Part of #21753
2022-08-01 20:26:04 +02:00
&[data-placement^="top"] > .tippy-arrow::before {
styles: Use modern color notation. postcss-preset-env transpiles this back as necessary. (It does a better job than we did, in fact: we had several four-argument hsl() calls that should have been hsla().) Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-20 22:08:47 +01:00
border-top-color: hsl(0deg 0% 20%);
tooltips: Move tooltips styling to a dedicated .css file. We want to seperate the tooltips styling into a dedicated .css file for general readability and decluttering of the zulip.css file.
2022-08-01 19:35:41 +02:00
}
tooltips: Change tooltips styling to incorporate the redesign. We use hsla(0, 0%, 20%, 1) for the light theme background color and hsla(0, 0%, 0%, 1) for the dark theme. The text inside the tooltips should be white in color, 14px in size and have a line height of 15px. With one line of text, we want the height of the tooltips to be 25px, i.e, line height (15px) + padding (5px + 5px = 10px). Part of #21753
2022-08-01 20:26:04 +02:00
&[data-placement^="bottom"] > .tippy-arrow::before {
styles: Use modern color notation. postcss-preset-env transpiles this back as necessary. (It does a better job than we did, in fact: we had several four-argument hsl() calls that should have been hsla().) Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-20 22:08:47 +01:00
border-bottom-color: hsl(0deg 0% 20%);
tooltips: Move tooltips styling to a dedicated .css file. We want to seperate the tooltips styling into a dedicated .css file for general readability and decluttering of the zulip.css file.
2022-08-01 19:35:41 +02:00
}
tooltips: Change tooltips styling to incorporate the redesign. We use hsla(0, 0%, 20%, 1) for the light theme background color and hsla(0, 0%, 0%, 1) for the dark theme. The text inside the tooltips should be white in color, 14px in size and have a line height of 15px. With one line of text, we want the height of the tooltips to be 25px, i.e, line height (15px) + padding (5px + 5px = 10px). Part of #21753
2022-08-01 20:26:04 +02:00
&[data-placement^="left"] > .tippy-arrow::before {
styles: Use modern color notation. postcss-preset-env transpiles this back as necessary. (It does a better job than we did, in fact: we had several four-argument hsl() calls that should have been hsla().) Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-20 22:08:47 +01:00
border-left-color: hsl(0deg 0% 20%);
tooltips: Move tooltips styling to a dedicated .css file. We want to seperate the tooltips styling into a dedicated .css file for general readability and decluttering of the zulip.css file.
2022-08-01 19:35:41 +02:00
}
tooltips: Change tooltips styling to incorporate the redesign. We use hsla(0, 0%, 20%, 1) for the light theme background color and hsla(0, 0%, 0%, 1) for the dark theme. The text inside the tooltips should be white in color, 14px in size and have a line height of 15px. With one line of text, we want the height of the tooltips to be 25px, i.e, line height (15px) + padding (5px + 5px = 10px). Part of #21753
2022-08-01 20:26:04 +02:00
&[data-placement^="right"] > .tippy-arrow::before {
styles: Use modern color notation. postcss-preset-env transpiles this back as necessary. (It does a better job than we did, in fact: we had several four-argument hsl() calls that should have been hsla().) Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-20 22:08:47 +01:00
border-right-color: hsl(0deg 0% 20%);
tooltips: Change tooltips styling to incorporate the redesign. We use hsla(0, 0%, 20%, 1) for the light theme background color and hsla(0, 0%, 0%, 1) for the dark theme. The text inside the tooltips should be white in color, 14px in size and have a line height of 15px. With one line of text, we want the height of the tooltips to be 25px, i.e, line height (15px) + padding (5px + 5px = 10px). Part of #21753
2022-08-01 20:26:04 +02:00
}
tooltips: Move tooltips styling to a dedicated .css file. We want to seperate the tooltips styling into a dedicated .css file for general readability and decluttering of the zulip.css file.
2022-08-01 19:35:41 +02:00
}
.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;
tooltips: Add hotkey hints support for tooltips. We add the support for hotkey hints for the tippyjs tooltips through the hotkey_hints handlebar helper. The hotkey_hints helper takes space seperated string arguments and returns a span containing all the hotkeys with the required classes for styling. We also add a simple node test for the hotkey_hints handlebar helper. Part of #21753
2022-08-01 20:58:23 +02:00
tooltips: Fix hotkey-hint CSS class reuse. The "hotkey-hint" class name used internally in d66f2d900f62bf619b5c94ce17e4471c80550524 conflicted with the preexisting class name for hotkey hints into popovers, introduced in 80ff3d8da50d57e27e70520d75ed952da338afd6. Given that the new class is for a styling of hotkey hints designed for use in tooltips, it was a bad name anyway, so just rename it to tooltip-hotkey-hint. We rename the related cluster of variable names to match this.
2023-02-08 21:40:48 +01:00
.tooltip-hotkey-hints {
tooltips: Add hotkey hints support for tooltips. We add the support for hotkey hints for the tippyjs tooltips through the hotkey_hints handlebar helper. The hotkey_hints helper takes space seperated string arguments and returns a span containing all the hotkeys with the required classes for styling. We also add a simple node test for the hotkey_hints handlebar helper. Part of #21753
2022-08-01 20:58:23 +02:00
box-sizing: inherit;
display: flex;
align-self: flex-start;
tooltips: Fix line height for non-English characters. Some non-English characters overflow when the line height is reduced for the tooltip text. This commit increases the line height of the tooltips to accommodate these non-English characters and fixes the hotkey hint margins for the same.
2022-10-13 10:27:03 +02:00
margin: 0 -5px 0 10px;
tooltips: Add hotkey hints support for tooltips. We add the support for hotkey hints for the tippyjs tooltips through the hotkey_hints handlebar helper. The hotkey_hints helper takes space seperated string arguments and returns a span containing all the hotkeys with the required classes for styling. We also add a simple node test for the hotkey_hints handlebar helper. Part of #21753
2022-08-01 20:58:23 +02:00
gap: 4px;
}
hotkey-hint: Fix text not middle aligned at different zoom levels. * Remove `box-sizing` and `min-width` properties which have no effect on `inline` positioned element. Modified class selector to add `span` which reflects this while reading the CSS. * Remove `2px` vertical padding and `line-height` which combined are fighting for space??
2023-05-31 08:13:33 +02:00
& span.tooltip-hotkey-hint {
styles: Use modern color notation. postcss-preset-env transpiles this back as necessary. (It does a better job than we did, in fact: we had several four-argument hsl() calls that should have been hsla().) Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-20 22:08:47 +01:00
border: 1px solid hsl(225deg 100% 84%);
tooltips: Add hotkey hints support for tooltips. We add the support for hotkey hints for the tippyjs tooltips through the hotkey_hints handlebar helper. The hotkey_hints helper takes space seperated string arguments and returns a span containing all the hotkeys with the required classes for styling. We also add a simple node test for the hotkey_hints handlebar helper. Part of #21753
2022-08-01 20:58:23 +02:00
border-radius: 3px;
styles: Use modern color notation. postcss-preset-env transpiles this back as necessary. (It does a better job than we did, in fact: we had several four-argument hsl() calls that should have been hsla().) Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-20 22:08:47 +01:00
color: hsl(225deg 100% 84%);
hotkey-hint: Fix text not middle aligned at different zoom levels. * Remove `box-sizing` and `min-width` properties which have no effect on `inline` positioned element. Modified class selector to add `span` which reflects this while reading the CSS. * Remove `2px` vertical padding and `line-height` which combined are fighting for space??
2023-05-31 08:13:33 +02:00
padding: 0 5px;
tooltips: Add hotkey hints support for tooltips. We add the support for hotkey hints for the tippyjs tooltips through the hotkey_hints handlebar helper. The hotkey_hints helper takes space seperated string arguments and returns a span containing all the hotkeys with the required classes for styling. We also add a simple node test for the hotkey_hints handlebar helper. Part of #21753
2022-08-01 20:58:23 +02:00
text-align: center;
tooltips: Fix hotkey hints wrapping when next to longer tooltip labels. Earlier, mostly in non-English languages, the tooltip labels would force the tooltip hotkey hints to wrap. This commit adds the `white-space: nowrap` property to ensure that the hotkey hint texts are forced to be in a single line.
2024-09-19 19:23:43 +02:00
white-space: nowrap;
tooltips: Add hotkey hints support for tooltips. We add the support for hotkey hints for the tippyjs tooltips through the hotkey_hints handlebar helper. The hotkey_hints helper takes space seperated string arguments and returns a span containing all the hotkeys with the required classes for styling. We also add a simple node test for the hotkey_hints handlebar helper. Part of #21753
2022-08-01 20:58:23 +02:00
}
tooltips: Fix offscreen tooltips taking scroll space.
2023-05-23 18:09:42 +02:00
streams: Improve subscription toggle buttons on stream rows. This commit changes the UI for subscribing to streams on stream rows to be more like the mobile version (zulip/zulip-mobile#5333). The current design made it hard to discover how to subscribe to streams via left panel and is not very clear on the fact that its not possible to subscribe to private streams. To address this the following changes have been made: - For unsubscribed streams, the on hover-checkmark is replaced by a "+" which is always displayed and has on-hover highlighting. - For unsubscribed private streams, the "+" is disabled. - Tooltips with appropriate messages are added on the "+" sign for the above 2 cases. - A tooltip has also been for the on-hover checkmark for subscribed streams. Fixes: #22217. Co-authored-by: Raghav Luthra <rluthra2002@gmail.com>
2023-05-13 15:54:58 +02:00
.stream-privacy-type-icon {
width: 9px;
padding-left: 2px;
top: 0.5px;
}
tooltips: Fix offscreen tooltips taking scroll space.
2023-05-23 18:09:42 +02:00
/* 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.
codespell: Fix typos caught by codespell. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-10-09 20:41:12 +02:00
NOTE: This data attribute has changed each time in the past 3 releases and
tooltips: Fix offscreen tooltips taking scroll space.
2023-05-23 18:09:42 +02:00
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.
*/
popovers: Ignore `data-reference-hidden` attribute for mobile popovers. 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.
2023-09-01 12:34:43 +02:00
[data-reference-hidden]:not(.show-when-reference-hidden) {
tooltips: Fix offscreen tooltips taking scroll space.
2023-05-23 18:09:42 +02:00
display: none;
}
tooltips: Move tooltips styling to a dedicated .css file. We want to seperate the tooltips styling into a dedicated .css file for general readability and decluttering of the zulip.css file.
2022-08-01 19:35:41 +02:00
}