# HG changeset patch
# User Thomas De Schampheleire <thomas.de_schampheleire@nokia.com>
# Date 1540383937 -7200
# Node ID ad5c3a18ee9f3bfc12d5ca6856765822c9a16269
# Parent  1394d16cc82a5c9df5ea36f09d10b9c8b8be3204
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.

diff -r 1394d16cc82a -r ad5c3a18ee9f kallithea/front-end/kallithea-diff.less
--- 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';