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

104 lines
3.4 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.
*/
font-family: "Source Sans 3", 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;
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
min-height: 25px;
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;
font-size: 14px;
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
line-height: 20px;
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 {
line-height: 17px;
}
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 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.
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] {
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
}