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

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
This commit is contained in:
sayamsamal 2022-08-01 23:56:04 +05:30 committed by Tim Abbott
parent a93b95f158
commit 7d5d151b99
2 changed files with 37 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
static/styles/dark_theme.css
View File

@ -137,6 +137,26 @@
}
}
.tippy-box:not([data-theme]) {
background: hsla(0, 0%, 0%, 1);
&[data-placement^="top"] > .tippy-arrow::before {
border-top-color: hsla(0, 0%, 0%, 1);
}
&[data-placement^="bottom"] > .tippy-arrow::before {
border-bottom-color: hsla(0, 0%, 0%, 1);
}
&[data-placement^="left"] > .tippy-arrow::before {
border-left-color: hsla(0, 0%, 0%, 1);
}
&[data-placement^="right"] > .tippy-arrow::before {
border-right-color: hsla(0, 0%, 0%, 1);
}
}
body,
.app-main,
.header-main,

45
static/styles/tooltips.css
View File

@ -8,43 +8,32 @@
/* Affects all tippy tooltips not using any theme. */
.tippy-box:not([data-theme]) {
background-color: hsl(0, 0%, 12%);
background: hsla(0, 0%, 20%, 1);
border-radius: 5px;
&[data-placement^="top"] {
> .tippy-arrow {
&::before {
border-top-color: hsl(0, 0%, 12%);
}
}
> .tippy-content {
display: inline-block;
padding: 5px 10px;
font-size: 14px;
line-height: 15px;
color: #FFFFFF;
}
&[data-placement^="bottom"] {
> .tippy-arrow {
&::before {
border-bottom-color: hsl(0, 0%, 12%);
}
}
&[data-placement^="top"] > .tippy-arrow::before {
border-top-color: hsla(0, 0%, 20%, 1);
}
&[data-placement^="left"] {
> .tippy-arrow {
&::before {
border-left-color: hsl(0, 0%, 12%);
}
}
&[data-placement^="bottom"] > .tippy-arrow::before {
border-bottom-color: hsla(0, 0%, 20%, 1);
}
&[data-placement^="right"] {
> .tippy-arrow {
&::before {
border-right-color: hsl(0, 0%, 12%);
}
}
}
&[data-placement^="left"] > .tippy-arrow::before {
border-left-color: hsla(0, 0%, 20%, 1);
}
.tippy-content {
font-size: 13px;
&[data-placement^="right"] > .tippy-arrow::before {
border-right-color: hsla(0, 0%, 20%, 1);
}
}
.tippy-arrow::before {