Changeset - ad5c3a18ee9f
[Not reviewed]
default
0 1 0
Thomas De Schampheleire - 7 years ago 2018-10-24 14:25:37
thomas.de_schampheleire@nokia.com
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.
1 file changed with 6 insertions and 6 deletions:
0 comments (0 inline, 0 general)
kallithea/front-end/kallithea-diff.less
Show inline comments
 
@@ -174,18 +174,18 @@ BIN_FILENODE = 6
 
}
 
.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';
0 comments (0 inline, 0 general)