Mercurial > kallithea
changeset 8662:ad5c3a18ee9f
style: fix comment bubble appearance upon zoom
When browser zoom is used, the font size increases. As a result, the text
balloon icon used in the comment bubble increases as well. However, the
rectangle in which the icon resides is kept the same size, causing the
result to look bad.
Use 'em' units, which are relative to the font size, rather than pixels, for
all relevant style properties of the bubble, including size, padding and
border-radius. With these settings, the bubble always looks well, regardless
of zoom value.
| author | Thomas De Schampheleire <thomas.de_schampheleire@nokia.com> |
|---|---|
| date | Wed, 24 Oct 2018 14:25:37 +0200 |
| parents | 1394d16cc82a |
| children | a3f649baa016 |
| files | kallithea/front-end/kallithea-diff.less |
| diffstat | 1 files changed, 6 insertions(+), 6 deletions(-) [+] |
line wrap: on
line diff
--- a/kallithea/front-end/kallithea-diff.less Fri Oct 09 20:09:40 2020 +0200 +++ b/kallithea/front-end/kallithea-diff.less Wed Oct 24 14:25:37 2018 +0200 @@ -174,18 +174,18 @@ } .add-bubble div { background: @kallithea-theme-main-color; - width: 16px; - height: 16px; - line-height: 14px; + width: 1.2em; + height: 1.2em; + line-height: 1em; cursor: pointer; - padding: 0 2px 2px 0.5px; + padding: 0.1em 0.1em 0.1em 0.12em; border: 1px solid @kallithea-theme-main-color; - border-radius: 3px; + border-radius: 0.2em; box-sizing: border-box; overflow: hidden; } .add-bubble div:before { - font-size: 14px; + font-size: 1em; color: #ffffff; font-family: "kallithea"; content: '\1f5ea';