supernets/hardlounge
supernets/hardlounge
4
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Define icon font only once and fix sizing

Browse Source 
This commit applies the following across the whole style:

- `font` statement is now the same as official FontAwesome CSS
- Ensure icons are never italic or bold or that other variants can be
  applied
- Ensure font-size and line-height of icons are inherited from parent
- font-family and font-smoothing is now defined only once

A few (mostly positive) side effects from these and related changes:

- Header icons (main menu, context menu and user list) are now
  vertically centered!
- Same applies to the Send icon, but it's more subtle there
- Alignment of the footer icons are shifted a tiny bit
- Server window icons are a wee bit bit bigger to match the server name
  font-size
- The "Play sound" icon and text are now both 14px (was 14px / 16px)
This commit is contained in:
Jérémie Astori 2016-07-12 01:47:16 -04:00
parent 1f59dec834
commit a898f46c09
1 changed files with 12 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
client/css/style.css
View File

@ -186,12 +186,7 @@ button {
#footer .icon, #footer .icon,
#chat .count:before, #chat .count:before,
#settings #play:before, #settings #play:before,
#form #submit:before { #form #submit:before,
font: 14px FontAwesome;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
#chat .invite .from:before, #chat .invite .from:before,
#chat .join .from:before, #chat .join .from:before,
#chat .kick .from:before, #chat .kick .from:before,
@ -204,7 +199,8 @@ button {
#chat .nick .from:before, #chat .nick .from:before,
#chat .action .from:before, #chat .action .from:before,
.context-menu-item:before { .context-menu-item:before {
font-family: FontAwesome; font: normal normal normal 14px/1 FontAwesome;
font-size: inherit; /* Can't have font-size inherit on line above, so need to override */
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
@ -229,7 +225,8 @@ button {
color: #ccc; color: #ccc;
display: none; display: none;
float: left; float: left;
line-height: 40px; font-size: 14px;
line-height: 1;
height: 36px; height: 36px;
margin: 6px 12px 0 -12px; margin: 6px 12px 0 -12px;
width: 36px; width: 36px;
@ -489,6 +486,7 @@ button {
bottom: 4px; bottom: 4px;
height: 48px; height: 48px;
left: 5px; left: 5px;
font-size: 14px;
line-height: 48px; line-height: 48px;
position: absolute; position: absolute;
text-align: center; text-align: center;
@ -1064,6 +1062,7 @@ button {
content: "\f002"; /* http://fontawesome.io/icon/search/ */ content: "\f002"; /* http://fontawesome.io/icon/search/ */
position: absolute; position: absolute;
right: 18px; right: 18px;
font-size: 14px;
line-height: 50px; line-height: 50px;
transition: color .2s; transition: color .2s;
z-index: 0; z-index: 0;
@ -1214,6 +1213,10 @@ button {
margin-left: 2px; margin-left: 2px;
} }
#settings #play {
font-size: 14px;
}
#settings #play:hover { #settings #play:hover {
opacity: .8; opacity: .8;
} }
@ -1309,8 +1312,8 @@ button {
#form #submit { #form #submit {
color: #9ca5b4; color: #9ca5b4;
font-size: 14px;
height: 34px; height: 34px;
line-height: 34px;
transition: opacity .3s; transition: opacity .3s;
width: 34px; width: 34px;
flex: 0 0 auto; flex: 0 0 auto;