paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-03 21:43:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

tooltips: Change tooltips styling to incorporate the redesign.

Browse Source 
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
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, body,
.app-main, .app-main,
.header-main, .header-main,

45
static/styles/tooltips.css
View File

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