Threadview checked and fixed for webkit

static/cranefly/css/cranefly.css

@@ -1058,7 +1058,10 @@ a.btn-link:hover,a.btn-link:active,a.btn-link:focus{opacity:0.9;filter:alpha(opa
 .forum-threads-extra{overflow:auto;}.forum-threads-extra.extra-top{margin-bottom:20px;}
 .thread-buttons{overflow:auto;}.thread-buttons .pull-right{margin-left:14px;}
 .thread-body .post-wrapper .post-body{margin-bottom:20px;overflow:auto;}.thread-body .post-wrapper .post-body .user-avatar{border-radius:5px;float:left;width:100px;height:100px;}
-.thread-body .post-wrapper .post-body .post-content{background-color:#ffffff;border:1px solid #e7e7e7;border-radius:5px;margin-left:121px;}.thread-body .post-wrapper .post-body .post-content .post-header{padding:7px 14px;padding-bottom:0px;color:grayLighter;}.thread-body .post-wrapper .post-body .post-content .post-header .post-author{color:#333333;font-weight:bold;}
+.thread-body .post-wrapper .post-body .post-content{background-color:#ffffff;border:1px solid #e7e7e7;border-radius:5px;margin-left:121px;position:relative;}.thread-body .post-wrapper .post-body .post-content:after,.thread-body .post-wrapper .post-body .post-content:before{right:100%;border:solid transparent;content:"";height:0;width:0;position:absolute;pointer-events:none;}
+.thread-body .post-wrapper .post-body .post-content:after{border-color:transparent;border-right-color:#ffffff;border-width:10.5px;top:14px;margin-top:0px;}
+.thread-body .post-wrapper .post-body .post-content:before{border-color:transparent;border-right-color:#e7e7e7;border-width:11.5px;top:14px;margin-top:-1px;}
+.thread-body .post-wrapper .post-body .post-content .post-header{padding:7px 14px;padding-bottom:0px;color:grayLighter;}.thread-body .post-wrapper .post-body .post-content .post-header .post-author{color:#333333;font-weight:bold;}
 .thread-body .post-wrapper .post-body .post-content .post-header .post-author-label{text-shadow:none;}.thread-body .post-wrapper .post-body .post-content .post-header .post-author-label.post-label-guest{background-color:#eeeeee;color:#999999;}
 .thread-body .post-wrapper .post-body .post-content .post-header .separator{color:#eeeeee;font-size:17.5px;line-height:5px;}
 .thread-body .post-wrapper .post-body .post-content .post-header .post-date{color:#999999;}
@@ -1075,16 +1078,15 @@ a.btn-link:hover,a.btn-link:active,a.btn-link:focus{opacity:0.9;filter:alpha(opa
 .thread-body .post-wrapper .post-body .post-content .post-footer .post-rating span.post-neutral{color:#999999;}
 .thread-body .post-wrapper .post-body .post-content .post-footer .post-rating span.post-like{color:#46a546;}
 .thread-body .post-wrapper .post-body .post-content .post-footer .post-rating span.post-hate{color:#cf402e;}
-.thread-body .post-wrapper .post-body .post-content .post-footer .post-rating form{float:left;margin:0px;padding:0px;}.thread-body .post-wrapper .post-body .post-content .post-footer .post-rating form .btn-link{float:right;margin:0px;margin-left:3.5px;padding:0px;font-weight:normal;}.thread-body .post-wrapper .post-body .post-content .post-footer .post-rating form .btn-link:hover,.thread-body .post-wrapper .post-body .post-content .post-footer .post-rating form .btn-link:active,.thread-body .post-wrapper .post-body .post-content .post-footer .post-rating form .btn-link:focus{text-decoration:underline;}
+.thread-body .post-wrapper .post-body .post-content .post-footer .post-rating form{float:left;margin:0px;padding:0px;}.thread-body .post-wrapper .post-body .post-content .post-footer .post-rating form .btn-link{float:right;margin:0px;margin-left:3.5px;opacity:1;filter:alpha(opacity=100);padding:0px;color:#999999;font-weight:normal;}.thread-body .post-wrapper .post-body .post-content .post-footer .post-rating form .btn-link:hover,.thread-body .post-wrapper .post-body .post-content .post-footer .post-rating form .btn-link:active,.thread-body .post-wrapper .post-body .post-content .post-footer .post-rating form .btn-link:focus{text-decoration:underline;}
 .thread-body .post-wrapper .post-body .post-content .post-footer .post-rating form .btn-link.post-like:hover,.thread-body .post-wrapper .post-body .post-content .post-footer .post-rating form .btn-link.post-like:active,.thread-body .post-wrapper .post-body .post-content .post-footer .post-rating form .btn-link.post-like:focus{color:#46a546;}
 .thread-body .post-wrapper .post-body .post-content .post-footer .post-rating form .btn-link.post-hate:hover,.thread-body .post-wrapper .post-body .post-content .post-footer .post-rating form .btn-link.post-hate:active,.thread-body .post-wrapper .post-body .post-content .post-footer .post-rating form .btn-link.post-hate:focus{color:#cf402e;}
-.thread-body .post-wrapper .post-body .post-content .post-footer .post-actions{border-left:1px dotted #e7e7e7;float:right;padding:7px 14px;color:#999999;}.thread-body .post-wrapper .post-body .post-content .post-footer .post-actions a,.thread-body .post-wrapper .post-body .post-content .post-footer .post-actions form{float:left;overflow:auto;}
+.thread-body .post-wrapper .post-body .post-content .post-footer .post-actions{border-left:1px dotted #e7e7e7;float:right;padding:7px 14px;color:#999999;}.thread-body .post-wrapper .post-body .post-content .post-footer .post-actions a,.thread-body .post-wrapper .post-body .post-content .post-footer .post-actions span,.thread-body .post-wrapper .post-body .post-content .post-footer .post-actions form{float:left;overflow:auto;}
 .thread-body .post-wrapper .post-body .post-content .post-footer .post-actions form{margin:0px;padding:0px;}
 .thread-body .post-wrapper .post-body .post-content .post-footer .post-actions a{margin-left:14px;color:#999999;}.thread-body .post-wrapper .post-body .post-content .post-footer .post-actions a:hover,.thread-body .post-wrapper .post-body .post-content .post-footer .post-actions a a:active{color:#333333;}
 .thread-body .post-wrapper .post-body .post-content .post-footer .post-actions a:first-child{margin-left:0px;}
 .thread-body .post-wrapper .post-body .post-content .post-footer .post-actions a.post-reply{color:#555555;}.thread-body .post-wrapper .post-body .post-content .post-footer .post-actions a.post-reply:hover,.thread-body .post-wrapper .post-body .post-content .post-footer .post-actions a.post-reply a:active{color:#049cdb;}
-.thread-body .post-wrapper .post-body .post-content .post-footer .post-actions .btn{float:right;margin:0px;margin-left:14px;padding:0px;color:#999999;font-weight:normal;}.thread-body .post-wrapper .post-body .post-content .post-footer .post-actions .btn:hover,.thread-body .post-wrapper .post-body .post-content .post-footer .post-actions .btn:active,.thread-body .post-wrapper .post-body .post-content .post-footer .post-actions .btn:focus{color:#cf402e;text-decoration:underline;}
-.thread-body .post-wrapper .post-body .post-arrow{border-top:10.5px solid transparent;border-bottom:10.5px solid transparent;border-right:10.5px solid #ffffff;float:left;width:0;height:0;position:relative;top:15px;left:12px;z-index:999;}
+.thread-body .post-wrapper .post-body .post-content .post-footer .post-actions .btn{float:right;margin:0px;margin-left:14px;opacity:1;filter:alpha(opacity=100);padding:0px;color:#999999;font-weight:normal;}.thread-body .post-wrapper .post-body .post-content .post-footer .post-actions .btn:hover,.thread-body .post-wrapper .post-body .post-content .post-footer .post-actions .btn:active,.thread-body .post-wrapper .post-body .post-content .post-footer .post-actions .btn:focus{color:#cf402e;text-decoration:underline;}
 .thread-body .post-wrapper .post-body.post-muted .user-avatar{width:50px;height:50px;opacity:0.75;filter:alpha(opacity=75);}
 .thread-body .post-wrapper .post-body.post-muted .post-content{margin-left:71px;opacity:0.75;filter:alpha(opacity=75);}.thread-body .post-wrapper .post-body.post-muted .post-content .post-header{float:right;margin:0px;margin-top:7px;}.thread-body .post-wrapper .post-body.post-muted .post-content .post-header .post-header-compact{float:left;margin-right:20px;}
 .thread-body .post-wrapper .post-body.post-muted .post-content .post-message{color:#999999;font-size:17.5px;}.thread-body .post-wrapper .post-body.post-muted .post-content .post-message strong,.thread-body .post-wrapper .post-body.post-muted .post-content .post-message a{color:#333333;font-weight:normal;}
@@ -1093,8 +1095,9 @@ a.btn-link:hover,a.btn-link:active,a.btn-link:focus{opacity:0.9;filter:alpha(opa
 .thread-body .post-checkpoints .post-checkpoint span i{opacity:0.43;filter:alpha(opacity=43);}
 .thread-moderation{background-color:#ffffff;border:1px solid #d5d5d5;border-radius:3px;-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;overflow:auto;padding:7px;}.thread-moderation form{margin:0px;}
 .thread-quick-reply{overflow:auto;margin-top:20px;}.thread-quick-reply .user-avatar{border-radius:3px;float:left;width:125px;height:125px;}
-.thread-quick-reply .arrow{border-top:14px solid transparent;border-bottom:14px solid transparent;border-right:14px solid #ffffff;float:left;width:0;height:0;position:relative;top:7px;left:15px;z-index:999;}
-.thread-quick-reply .editor{margin-left:153px;}
+.thread-quick-reply .editor{margin-left:153px;position:relative;}.thread-quick-reply .editor:after,.thread-quick-reply .editor:before{right:100%;border:solid transparent;content:"";height:0;width:0;position:absolute;pointer-events:none;}
+.thread-quick-reply .editor:after{border-color:transparent;border-right-color:#ffffff;border-width:14px;top:7px;margin-top:7px;}
+.thread-quick-reply .editor:before{border-color:transparent;border-right-color:#e6e6e6;border-width:15px;top:7px;margin-top:6px;}
 .post-votes-list .vote-user,.post-votes-list .vote-user:link,.post-votes-list .vote-user:visited{display:block;color:#555555;font-size:17.5px;font-weight:bold;}
 .post-votes-list .vote-user .vote-icon{background-color:#999999;border-radius:3px;padding:2px 3px;position:relative;bottom:1.75px;font-size:14px;}.post-votes-list .vote-user .vote-icon i{background-image:url("../img/glyphicons-halflings-white.png");}
 .post-votes-list a.vote-user:hover,.post-votes-list a.vote-user:active{color:#333333;text-decoration:none;}

static/cranefly/css/cranefly/thread.less

@@ -29,6 +29,32 @@
         border: 1px solid @postBorder;
         border-radius: @borderRadiusLarge;
         margin-left: 100px + (@baseFontSize * 1.5);
+        position: relative;
+
+        &:after, &:before {
+          right: 100%;
+          border: solid transparent;
+          content: "";
+          height: 0; width: 0;
+          position: absolute;
+          pointer-events: none;
+        }
+
+        &:after {
+          border-color: transparent;
+          border-right-color: @postBackground;
+          border-width: @fontSizeMini;
+          top: @baseFontSize;
+          margin-top: (@baseFontSize * -1) + @baseFontSize;
+        }
+
+        &:before {
+           border-color: transparent;
+           border-right-color: @postBorder;
+           border-width: @fontSizeMini + 1;
+           top: @baseFontSize;
+           margin-top: (@baseFontSize * -1) + @baseFontSize - 1px;
+        }
 
         .post-header {
           padding: (@baseFontSize / 2) @baseFontSize;
@@ -182,9 +208,11 @@
               .btn-link {
                 float: right;
                 margin: 0px;
-                margin-left: (@baseFontSize / 4); 
+                margin-left: (@baseFontSize / 4);
+                .opacity(100);
                 padding: 0px;
 
+                color: @grayLight;
                 font-weight: normal;
 
                 &:hover, &:active, &:focus {
@@ -213,7 +241,7 @@
 
             color: @grayLight;
 
-            a, form {
+            a, span, form {
               float: left;
               overflow: auto;
             }
@@ -249,6 +277,7 @@
               float: right;
               margin: 0px;
               margin-left: @baseFontSize;
+              .opacity(100);
               padding: 0px;
 
               color: @grayLight;
@@ -263,19 +292,6 @@
         }
       }
 
-      .post-arrow {
-        border-top: @fontSizeMini solid transparent;
-        border-bottom: @fontSizeMini solid transparent;
-        border-right: @fontSizeMini solid @postBackground;
-        float: left;
-        width: 0;
-        height: 0;
-        position: relative;
-        top: @baseFontSize + 1px;
-        left: @baseFontSize - 2px;
-        z-index: (@zindexDropdown - 1);
-      }
-
       &.post-muted {        
         .user-avatar {
           width: 50px;
@@ -393,20 +409,33 @@
     height: 125px;
   }
 
-  .arrow {
-    border-top: @baseFontSize solid transparent;
-    border-bottom: @baseFontSize solid transparent;
-    border-right: @baseFontSize solid @white;
-    float: left;
-    width: 0;
-    height: 0;
-    position: relative;
-    top: @baseFontSize / 2;
-    left: @baseFontSize + 1px;
-    z-index: (@zindexDropdown - 1);
-  }
-
   .editor {
     margin-left: 125px + (@baseFontSize * 2);
+    position: relative;
+
+    &:after, &:before {
+      right: 100%;
+      border: solid transparent;
+      content: "";
+      height: 0; width: 0;
+      position: absolute;
+      pointer-events: none;
+    }
+
+    &:after {
+      border-color: transparent;
+      border-right-color: @editorBackground;
+      border-width: @baseFontSize;
+      top: @baseFontSize / 2;
+      margin-top: ((@baseFontSize / 2) * -1) + @baseFontSize;
+    }
+
+    &:before {
+       border-color: transparent;
+       border-right-color: darken(@editorBackground, 10%);
+       border-width: @baseFontSize + 1;
+       top: @baseFontSize / 2;
+       margin-top: ((@baseFontSize / 2) * -1) + @baseFontSize - 1px;
+    }
   }
-}
+}

templates/cranefly/threads/list.html

@@ -77,7 +77,7 @@
     <table class="table">
       <thead>
         <tr>
-          <th style="width: 1%;">&nbsp;</th>
+          <th style="width: 1px;">&nbsp;</th>
           <th>{% trans %}Thread{% endtrans %}</th>
           <th class="span1">{% trans %}Rating{% endtrans %}</th>
           <th class="span5">{% trans %}Activity{% endtrans %}</th>

templates/cranefly/threads/thread.html

@@ -80,7 +80,6 @@
         {% else %}
         <img src="{{ macros.avatar_guest(60) }}" alt="" class="user-avatar"></a>
         {% endif %}
-        <div class="post-arrow"></div>
         <div class="post-content">
           <div class="post-header">
             <div class="post-header-compact">
@@ -401,7 +400,6 @@
       <input type="hidden" name="{{ csrf_id }}" value="{{ csrf_token }}">
       <input type="hidden" name="quick_reply" value="1">
       <img src="{{ user.get_avatar() }}" alt="{% trans %}Your Avatar{% endtrans %}" class="user-avatar">
-      <div class="arrow"></div>
       {{ editor.editor(quick_reply.post, _('Post Reply'), extra=editor_extra()) }}
     </form>
   </div>