Render forums icons correctly on webkit.

static/cranefly/css/cranefly.css

@@ -967,7 +967,7 @@ a.btn-link:hover,a.btn-link:active,a.btn-link:focus{opacity:0.9;filter:alpha(opa
 .index-sidebar{position:relative;bottom:9px;}
 .index-category{background-color:#ffffff;border:1px solid #d5d5d5;border-radius:2px;-webkit-box-shadow:0px 0px 0px 3px #eeeeee;-moz-box-shadow:0px 0px 0px 3px #eeeeee;box-shadow:0px 0px 0px 3px #eeeeee;margin-bottom:20px;}.index-category .header{background-color:#fbfbfb;border:1px solid #d5d5d5;border-radius:2px 2px 0px 0px;margin:-1px;margin-bottom:0px;padding:3.966666666666667px 9.9px;}.index-category .header h2{margin:0px;padding:0px;color:#333333;font-size:11.9px;font-weight:bold;line-height:20px;text-align:left;}.index-category .header h2 small{margin-left:7px;color:#999999;font-size:11.9px;}
 .index-category .forum{border-bottom:1px solid #d5d5d5;height:21px;overflow:visible;padding:14.75px 9.9px;}.index-category .forum.last{border-bottom:none;}
-.index-category .forum .forum-icon{float:left;}.index-category .forum .forum-icon .forum-icon-wrap{background-color:#555555;border:1px solid #3b3b3b;border-radius:3px;padding:3px 4px;}.index-category .forum .forum-icon .forum-icon-wrap.forum-icon-new{background-color:#cf402e;border:1px solid #a53325;}
+.index-category .forum .forum-icon{float:left;}.index-category .forum .forum-icon .forum-icon-wrap{background-color:#555555;border:1px solid #3b3b3b;border-radius:3px;padding:1px 4px;position:relative;bottom:2px;}.index-category .forum .forum-icon .forum-icon-wrap.forum-icon-new{background-color:#cf402e;border:1px solid #a53325;}
 .index-category .forum .forum-icon .forum-icon-wrap.forum-icon-redirect{background-color:#9466c6;border:1px solid #7a43b6;}
 .index-category .forum .forum-main{margin-left:34px;}.index-category .forum .forum-main h3{float:left;margin:0px;padding:0px;font-size:17.5px;font-weight:normal;line-height:20px;}.index-category .forum .forum-main h3 a:link,.index-category .forum .forum-main h3 a:visited{color:#333333;}
 .index-category .forum .forum-main .dropdown{float:right;right:14px;}.index-category .forum .forum-main .dropdown .subforum:link,.index-category .forum .forum-main .dropdown .subforum:visited{color:#999999;font-weight:bold;}
@@ -1034,7 +1034,7 @@ a.btn-link:hover,a.btn-link:active,a.btn-link:focus{opacity:0.9;filter:alpha(opa
 .news-feed hr{border:none;border-top:1px solid #eeeeee;margin:20px 0px;}
 .category-forums-list{background-color:#ffffff;border:1px solid #d5d5d5;border-radius:2px;-webkit-box-shadow:0px 0px 0px 3px #eeeeee;-moz-box-shadow:0px 0px 0px 3px #eeeeee;box-shadow:0px 0px 0px 3px #eeeeee;margin-bottom:20px;}.category-forums-list table{margin:0px;}.category-forums-list table tr:first-child td{border-top:none;}
 .category-forums-list table td{padding:14.75px 9.9px;padding-bottom:15.75px;}
-.category-forums-list table .forum-icon{padding-right:2.95px;width:1%;}.category-forums-list table .forum-icon .forum-icon-wrap{background-color:#555555;border:1px solid #3b3b3b;border-radius:3px;padding:3px 4px;}.category-forums-list table .forum-icon .forum-icon-wrap.forum-icon-new{background-color:#cf402e;border:1px solid #a53325;}
+.category-forums-list table .forum-icon{padding-right:2.95px;width:1%;}.category-forums-list table .forum-icon .forum-icon-wrap{background-color:#555555;border:1px solid #3b3b3b;border-radius:3px;padding:1px 4px;position:relative;bottom:2px;}.category-forums-list table .forum-icon .forum-icon-wrap.forum-icon-new{background-color:#cf402e;border:1px solid #a53325;}
 .category-forums-list table .forum-icon .forum-icon-wrap.forum-icon-redirect{background-color:#9466c6;border:1px solid #7a43b6;}
 .category-forums-list table .forum-main h3{float:left;margin:0px;padding:0px;font-size:17.5px;font-weight:normal;line-height:20px;}.category-forums-list table .forum-main h3 a:link,.category-forums-list table .forum-main h3 a:visited{color:#333333;}
 .category-forums-list table .forum-main .dropdown{float:right;right:14px;}.category-forums-list table .forum-main .dropdown .subforum:link,.category-forums-list table .forum-main .dropdown .subforum:visited{color:#999999;font-weight:bold;}
@@ -1065,7 +1065,7 @@ a.btn-link:hover,a.btn-link:active,a.btn-link:focus{opacity:0.9;filter:alpha(opa
 .user-profile .content-list .media .media-body .media-footer{margin:0px;color:#999999;font-size:10.5px;font-weight:normal;}.user-profile .content-list .media .media-body .media-footer a{color:#555555;}
 .forum-subforums-list{background-color:#ffffff;border:1px solid #d5d5d5;border-radius:2px;-webkit-box-shadow:0px 0px 0px 3px #eeeeee;-moz-box-shadow:0px 0px 0px 3px #eeeeee;box-shadow:0px 0px 0px 3px #eeeeee;margin-bottom:20px;}.forum-subforums-list .header{background-color:#fbfbfb;border:1px solid #d5d5d5;border-radius:2px 2px 0px 0px;margin:-1px;margin-bottom:0px;padding:3.966666666666667px 9.9px;}.forum-subforums-list .header h2{margin:0px;padding:0px;color:#333333;font-size:11.9px;font-weight:bold;line-height:20px;text-align:left;}.forum-subforums-list .header h2 small{margin-left:7px;color:#999999;font-size:11.9px;}
 .forum-subforums-list .forum{border-bottom:1px solid #d5d5d5;height:21px;overflow:visible;padding:14.75px 9.9px;}.forum-subforums-list .forum.last{border-bottom:none;}
-.forum-subforums-list .forum .forum-icon{float:left;}.forum-subforums-list .forum .forum-icon .forum-icon-wrap{background-color:#555555;border:1px solid #3b3b3b;border-radius:3px;padding:3px 4px;}.forum-subforums-list .forum .forum-icon .forum-icon-wrap.forum-icon-new{background-color:#cf402e;border:1px solid #a53325;}
+.forum-subforums-list .forum .forum-icon{float:left;}.forum-subforums-list .forum .forum-icon .forum-icon-wrap{background-color:#555555;border:1px solid #3b3b3b;border-radius:3px;padding:1px 4px;position:relative;bottom:2px;}.forum-subforums-list .forum .forum-icon .forum-icon-wrap.forum-icon-new{background-color:#cf402e;border:1px solid #a53325;}
 .forum-subforums-list .forum .forum-icon .forum-icon-wrap.forum-icon-redirect{background-color:#9466c6;border:1px solid #7a43b6;}
 .forum-subforums-list .forum .forum-main{margin-left:34px;}.forum-subforums-list .forum .forum-main h3{float:left;margin:0px;padding:0px;font-size:17.5px;font-weight:normal;line-height:20px;}.forum-subforums-list .forum .forum-main h3 a:link,.forum-subforums-list .forum .forum-main h3 a:visited{color:#333333;}
 .forum-subforums-list .forum .forum-main .dropdown{float:right;right:14px;}.forum-subforums-list .forum .forum-main .dropdown .subforum:link,.forum-subforums-list .forum .forum-main .dropdown .subforum:visited{color:#999999;font-weight:bold;}

static/cranefly/css/cranefly/category.less

@@ -30,7 +30,9 @@
         background-color: @itemOldColor;
         border: 1px solid darken(@itemOldColor, 10%);
         border-radius: @baseBorderRadius;
-        padding: (@forumIconSize - 1px) @forumIconSize;
+        padding: ((@forumIconSize - 22px) / 2) ((@forumIconSize - 16px) / 2);
+        position: relative;
+        bottom: (@forumIconSize - @baseLineHeight) / 2;
 
         &.forum-icon-new {
           background-color: @itemNewColor;

static/cranefly/css/cranefly/forum.less

@@ -53,7 +53,9 @@
         background-color: @itemOldColor;
         border: 1px solid darken(@itemOldColor, 10%);
         border-radius: @baseBorderRadius;
-        padding: (@forumIconSize - 1px) @forumIconSize;
+        padding: ((@forumIconSize - 22px) / 2) ((@forumIconSize - 16px) / 2);
+        position: relative;
+        bottom: (@forumIconSize - @baseLineHeight) / 2;
 
         &.forum-icon-new {
           background-color: @itemNewColor;

static/cranefly/css/cranefly/index.less

@@ -60,7 +60,9 @@
         background-color: @itemOldColor;
         border: 1px solid darken(@itemOldColor, 10%);
         border-radius: @baseBorderRadius;
-        padding: (@forumIconSize - 1px) @forumIconSize;
+        padding: ((@forumIconSize - 22px) / 2) ((@forumIconSize - 16px) / 2);
+        position: relative;
+        bottom: (@forumIconSize - @baseLineHeight) / 2;
 
         &.forum-icon-new {
           background-color: @itemNewColor;
@@ -75,7 +77,7 @@
     }
 
     .forum-main {
-      margin-left: 34px;
+      margin-left: @forumIconSize + 10px;
 
       h3 {
         float: left;

static/cranefly/css/variables.less

@@ -93,7 +93,7 @@
 @categoryHeader:                    @bodyBackground;
 @categoryShadow:                    darken(@bodyBackground, 5%);
 
-@forumIconSize:                     4px;
+@forumIconSize:                     24px;
 
 // Posts
 // -------------------------

templates/cranefly/category.html

@@ -30,7 +30,7 @@
     {% for forum in category.subforums %}
     <div class="forum{% if loop.last %} last{% endif %}">
       <div class="forum-icon">
-        <span class="forum-icon-wrap{% if forum.type == 'redirect' %} forum-icon-redirect{% elif not forum.is_read %} forum-icon-new{% endif %}"><i class="icon-{% if forum.type == 'redirect' %}circle-arrow-right{% else %}comment{% endif %} icon-white"></i></span>
+        <div class="forum-icon-wrap{% if forum.type == 'redirect' %} forum-icon-redirect{% elif not forum.is_read %} forum-icon-new{% endif %}"><i class="icon-{% if forum.type == 'redirect' %}circle-arrow-right{% else %}comment{% endif %} icon-white"></i></div>
       </div>
       <div id="forum-{{ forum.id }}" class="forum-main">
         <h3 class="forum-title{% if not forum.is_read %} forum-title-new{% endif %}"><a href="{{ forum.type|url(slug=forum.slug, forum=forum.id) }}">{{ forum.name }}</a></h3>

templates/cranefly/index.html

@@ -20,7 +20,7 @@
         {% for forum in category.subforums %}
         <div class="forum{% if loop.last %} last{% endif %}">
           <div class="forum-icon">
-            <span class="forum-icon-wrap{% if forum.type == 'redirect' %} forum-icon-redirect{% elif not forum.is_read %} forum-icon-new{% endif %}"><i class="icon-{% if forum.type == 'redirect' %}circle-arrow-right{% else %}comment{% endif %} icon-white"></i></span>
+            <div class="forum-icon-wrap{% if forum.type == 'redirect' %} forum-icon-redirect{% elif not forum.is_read %} forum-icon-new{% endif %}"><i class="icon-{% if forum.type == 'redirect' %}circle-arrow-right{% else %}comment{% endif %} icon-white"></i></div>
           </div>
           <div id="forum-{{ forum.id }}" class="forum-main">
             <h3 class="forum-title{% if not forum.is_read %} forum-title-new{% endif %}"><a href="{{ forum.type|url(slug=forum.slug, forum=forum.id) }}">{{ forum.name }}</a></h3>

templates/cranefly/threads/list.html

@@ -36,7 +36,7 @@
     {% for subforum in forum.subforums %}
     <div class="forum{% if loop.last %} last{% endif %}">
       <div class="forum-icon">
-        <span class="forum-icon-wrap{% if subforum.type == 'redirect' %} forum-icon-redirect{% elif not subforum.is_read %} forum-icon-new{% endif %}"><i class="icon-{% if subforum.type == 'redirect' %}circle-arrow-right{% else %}comment{% endif %} icon-white"></i></span>
+        <div class="forum-icon-wrap{% if subforum.type == 'redirect' %} forum-icon-redirect{% elif not subforum.is_read %} forum-icon-new{% endif %}"><i class="icon-{% if subforum.type == 'redirect' %}circle-arrow-right{% else %}comment{% endif %} icon-white"></i></div>
       </div>
       <div id="forum-{{ subforum.id }}" class="forum-main">
         <h3 class="forum-title{% if not subforum.is_read %} forum-title-new{% endif %}"><a href="{{ subforum.type|url(slug=subforum.slug, forum=subforum.id) }}">{{ subforum.name }}</a></h3>