Ralfp 12 лет назад
Родитель
Сommit
c53ae742e0

+ 55 - 5
static/cranefly/css/cranefly.css

@@ -852,6 +852,8 @@ a.label:hover,a.label:focus,a.badge:hover,a.badge:focus{color:#ffffff;text-decor
 .header-primary .breadcrumb li a:hover,.header-primary .breadcrumb li a:active{color:#333333;}
 .header-primary .breadcrumb li .divider{padding-left:0px;padding-right:0px;}.header-primary .breadcrumb li .divider i{opacity:0.2;filter:alpha(opacity=20);position:relative;bottom:1px;}
 .header-primary h1{color:#555555;font-size:35px;font-weight:normal;}
+.header-primary .header-stats{overflow:auto;margin-bottom:0px;color:#999999;}.header-primary .header-stats li{float:left;margin-right:14px;}.header-primary .header-stats li>a{color:#999999;}.header-primary .header-stats li>a:hover,.header-primary .header-stats li>a:active{color:#333333;}
+.header-primary .header-stats li>i{opacity:0.5;filter:alpha(opacity=50);}
 .header-primary .header-tabs{border-bottom:0px;margin:0px;margin-top:-10px;position:relative;top:9px;}.header-primary .header-tabs li a:link,.header-primary .header-tabs li a:visited{background:none;border:none;border-radius:0px;margin-bottom:4px;padding:6.666666666666667px 10px;color:#888888;font-weight:bold;}
 .header-primary .header-tabs li a:hover,.header-primary .header-tabs li a:active,.header-primary .header-tabs li a a:focus{background:none;border-bottom:4px solid #555555;margin-bottom:0px;color:#555555;}
 .header-primary .header-tabs li.active a:link,.header-primary .header-tabs li.active a:visited,.header-primary .header-tabs li.active a:hover,.header-primary .header-tabs li.active a:active{background:none;border-bottom:4px solid #cf402e;margin-bottom:0px;color:#333333;}
@@ -895,8 +897,8 @@ footer .breadcrumb li.active{color:#555555;}
 .form-container form.form-horizontal .form-actions{padding-left:200px;}
 .form-container .form-actions{border-radius:0px 0px 3px 3px;margin:-20px;margin-top:10px;}.form-container .form-actions .form-actions-protip{margin-left:14px;color:#555555;font-weight:bold;}
 textarea{resize:vertical;}
-.btn{background:none;background-color:#fbfbfb;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;font-weight:bold;}.btn i{position:relative;bottom:1px;}
-.btn:hover,.btn:active{background-color:#ffffff;border-color:#a6a6a6;}
+.btn{background:none;background-color:#fbfbfb;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;font-weight:bold;}.btn i{opacity:0.6;filter:alpha(opacity=60);position:relative;bottom:1px;}
+.btn:hover,.btn:active{background-color:#ffffff;border-color:#a6a6a6;}.btn:hover i,.btn:active i{opacity:0.9;filter:alpha(opacity=90);}
 .btn.btn-primary{background-color:#3c85a3;border-color:#357690;text-shadow:0px 1px 0px #27576b;}.btn.btn-primary:hover:enabled,.btn.btn-primary:active:enabled{background-color:#268eb9;border-color:#217ea4;}
 .btn.btn-primary i{background-image:url("../img/glyphicons-halflings-white.png");}
 .btn.btn-info{background-color:#587987;border-color:#4e6b78;text-shadow:0px 1px 0px #3a5059;}.btn.btn-info:hover:enabled,.btn.btn-info:active:enabled{background-color:#478098;border-color:#3f7286;}
@@ -910,13 +912,15 @@ textarea{resize:vertical;}
 .btn.btn-inverse{background-color:#333333;border-color:#262626;text-shadow:0px 1px 0px #0d0d0d;}.btn.btn-inverse:hover:enabled,.btn.btn-inverse:active:enabled{background-color:#262626;border-color:#1a1a1a;}
 .btn.btn-inverse i{background-image:url("../img/glyphicons-halflings-white.png");}
 .btn.btn-link{background:none;border:none;opacity:0.7;filter:alpha(opacity=70);color:#333333;}.btn.btn-link:hover:enabled,.btn.btn-link:active:enabled,.btn.btn-link:focus:enabled{opacity:0.9;filter:alpha(opacity=90);text-decoration:none;}
+.btn.btn-primary i,.btn.btn-info i,.btn.btn-success i,.btn.btn-warning i,.btn.btn-danger i,.btn.btn-inverse i,.btn.btn-link i{opacity:1;filter:alpha(opacity=100);}
 a.btn-link:hover,a.btn-link:active,a.btn-link:focus{opacity:0.9;filter:alpha(opacity=90);color:#333333;text-decoration:none;}
 .pagination{margin:0px;padding:0px;}.pagination .count{margin-right:10.5px;padding:4px 0px;color:#999999;}
 .pagination ul{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}.pagination ul li{float:left;margin:0px;margin-right:4.666666666666667px;padding:0px;}.pagination ul li a:link,.pagination ul li a:visited{background-color:#ffffff;border:1px solid #f0f0f0;border-radius:3px;padding:3px 7px;color:#999999;}.pagination ul li a:link i,.pagination ul li a:visited i{opacity:0.55;filter:alpha(opacity=55);}
 .pagination ul li a:active,.pagination ul li a:hover{border:1px solid #999999;color:#555555;}.pagination ul li a:active i,.pagination ul li a:hover i{opacity:1;filter:alpha(opacity=100);}
-.editor{background-color:#eeeeee;border:1px solid #d5d5d5;border-radius:3px;}.editor .editor-error{padding:10.5px;padding-bottom:0px;margin-bottom:-10.5px;}.editor .editor-error .help-block{color:#cf402e;font-weight:bold;}
-.editor .editor-input{padding:10.5px;}.editor .editor-input>div{margin-top:-1px;margin-right:13.5px;}.editor .editor-input>div textarea{box-shadow:none;margin-bottom:0px;width:100%;}
-.editor .editor-actions{border-top:1px solid #d5d5d5;overflow:auto;padding:10.5px;}.editor .editor-actions .editor-tools{margin:0px;}.editor .editor-actions .editor-tools li{float:left;margin-right:10.5px;}.editor .editor-actions .editor-tools li .btn{padding-left:7px;padding-right:7px;}
+.editor{background-color:#ffffff;border:1px solid #e6e6e6;border-radius:3px;}.editor .editor-error{padding:10.5px;padding-bottom:0px;margin-bottom:-10.5px;}.editor .editor-error .help-block{color:#cf402e;font-weight:bold;}
+.editor .editor-input{padding:10.5px;}.editor .editor-input>div{margin-right:2px;}.editor .editor-input>div textarea{border:none;box-shadow:none;margin:-10.5px;padding:10.5px;width:100%;font-family:Monaco,Menlo,Consolas,"Courier New",monospace;}
+.editor .editor-actions{border-top:1px solid #e6e6e6;overflow:auto;padding:10.5px;}.editor .editor-actions>.btn{margin-left:14px;}
+.editor .editor-actions .editor-tools{margin:0px;}.editor .editor-actions .editor-tools li{float:left;margin-right:10.5px;}.editor .editor-actions .editor-tools li .btn{padding-left:7px;padding-right:7px;}
 .error-page{text-align:center;}.error-page .error-color{color:#cf402e;}
 .error-page .error-ban-reason{border:1px solid #cf402e;border-radius:3px;background-color:#fbeeed;background-image:repeating-linear-gradient(45deg, transparent, transparent 5px, #fdf6f5 5px, #fdf6f5 10px);-webkit-box-shadow:0px 0px 0px 3px #e38b80;-moz-box-shadow:0px 0px 0px 3px #e38b80;box-shadow:0px 0px 0px 3px #e38b80;padding:11px 19px;text-align:left;}.error-page .error-ban-reason :last-child{margin-bottom:0px;padding-bottom:0px;}
 .error-page .error-ban-expires{color:#cf402e;font-weight:bold;}
@@ -929,6 +933,11 @@ a.btn-link:hover,a.btn-link:active,a.btn-link:focus{opacity:0.9;filter:alpha(opa
 .markdown h3{font-size:21px;}
 .markdown h4{font-size:16.8px;}
 .markdown hr{border:none;border-top:1px solid #eeeeee;}
+.markdown blockquote{background-color:#fcfcfc;border:1px solid #f0f0f0;border-radius:3px;padding:14px;}.markdown blockquote>h3:first-child{margin:0px;margin-bottom:10px;padding:0px;font-size:14px;line-height:20px;}
+.markdown blockquote>:first-child{margin-top:0px;}
+.markdown blockquote>:last-child{margin-bottom:0px;}
+.markdown blockquote p{margin:0 0 10px;font-size:11.9px;}
+.markdown blockquote blockquote{background-color:#ffffff;border:1px solid #f2f2f2;border-radius:3px;padding:14px;}
 .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 table{margin:0px;}.index-category table caption{background-color:#3c85a3;border:1px solid #357690;border-radius:2px 2px 0px 0px;margin:-1px;padding:2px 10px;color:#ffffff;font-size:11.9px;font-weight:bold;text-align:left;text-shadow:0px 1px 0px #1a3946;}
 .index-category table .forum-icon{width:1%;}.index-category table .forum-icon .forum-icon-wrap{background-color:#555555;border:1px solid #3b3b3b;border-radius:3px;padding:3px 4px;}.index-category table .forum-icon .forum-icon-wrap.forum-icon-new{background-color:#cf402e;border:1px solid #a53325;}
@@ -1037,9 +1046,50 @@ a.btn-link:hover,a.btn-link:active,a.btn-link:focus{opacity:0.9;filter:alpha(opa
 .forum-threads-list table th.check-cell input{right:2px;}
 .forum-threads-list .threads-actions{background-color:#fbfbfb;border-top:1px solid #d5d5d5;border-radius:0px 0px 2px 2px;overflow:auto;padding:4px;color:#999999;font-size:11.9px;}.forum-threads-list .threads-actions form{margin-bottom:0px;}
 .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:3px;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 .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;}
+.thread-body .post-wrapper .post-body .post-content .post-header .post-changelog{color:#999999;}.thread-body .post-wrapper .post-body .post-content .post-header .post-changelog:hover,.thread-body .post-wrapper .post-body .post-content .post-header .post-changelog:active{color:#333333;}
+.thread-body .post-wrapper .post-body .post-content .post-header .post-perma{display:block;float:right;padding-left:6px;color:#999999;font-weight:bold;}.thread-body .post-wrapper .post-body .post-content .post-header .post-perma:hover,.thread-body .post-wrapper .post-body .post-content .post-header .post-perma:active{color:#333333;}
+.thread-body .post-wrapper .post-body .post-content .post-header .post-checkbox{float:right;position:relative;left:10px;}
+.thread-body .post-wrapper .post-body .post-content .post-header .post-extra{float:right;}.thread-body .post-wrapper .post-body .post-content .post-header .post-extra .label{margin-left:3.5px;text-shadow:none;}.thread-body .post-wrapper .post-body .post-content .post-header .post-extra .label.label-purple{background-color:#7e2ecf;}
+.thread-body .post-wrapper .post-body .post-content .post-message{padding:14px;}.thread-body .post-wrapper .post-body .post-content .post-message .post-signature{border-top:1px dotted #bfbfbf;opacity:0.6;filter:alpha(opacity=60);margin-top:20px;padding-top:5px;font-size:80%;}
+.thread-body .post-wrapper .post-body .post-content .post-footer{border-top:1px solid #e7e7e7;overflow:auto;}.thread-body .post-wrapper .post-body .post-content .post-footer .post-rating{float:left;overflow:auto;padding:7px 14px;border-right:1px dotted #e7e7e7;}.thread-body .post-wrapper .post-body .post-content .post-footer .post-rating a{color:#999999;}.thread-body .post-wrapper .post-body .post-content .post-footer .post-rating a:hover,.thread-body .post-wrapper .post-body .post-content .post-footer .post-rating a a:active{color:#333333;}
+.thread-body .post-wrapper .post-body .post-content .post-footer .post-rating span{float:left;}.thread-body .post-wrapper .post-body .post-content .post-footer .post-rating span.post-score{color:#999999;font-weight:bold;}.thread-body .post-wrapper .post-body .post-content .post-footer .post-rating span.post-score.post-score-good{color:#46a546;}
+.thread-body .post-wrapper .post-body .post-content .post-footer .post-rating span.post-score.post-score-bad{color:#cf402e;}
+.thread-body .post-wrapper .post-body .post-content .post-footer .post-rating span.post-neutral,.thread-body .post-wrapper .post-body .post-content .post-footer .post-rating span.post-like,.thread-body .post-wrapper .post-body .post-content .post-footer .post-rating span.post-hate{margin-left:3.5px;}
+.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 .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 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-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;}
+.thread-body .post-checkpoints .post-checkpoint{text-align:center;margin-bottom:20px;}.thread-body .post-checkpoints .post-checkpoint hr{background-color:#999999;background-image:-webkit-gradient(linear, 0 0, 100% 100%, color-stop(0.25, rgba(255, 255, 255, 0.2)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.75, rgba(255, 255, 255, 0.2)), color-stop(0.75, transparent), to(transparent));background-image:-webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);background-image:-moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);background-image:-ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);background-image:-o-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);background-image:linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);-webkit-background-size:10px 10px;-moz-background-size:10px 10px;background-size:10px 10px;border:none;height:4px;margin-bottom:-12px;}
+.thread-body .post-checkpoints .post-checkpoint span{background-color:#fbfbfb;padding:0px 14px;color:#999999;}.thread-body .post-checkpoints .post-checkpoint span a{color:#333333;}
+.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: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;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;}
 .index-rank-team ul li{background-color:#cf402e;border-color:#ae3627;}.index-rank-team ul li a:link,.index-rank-team ul li a:active,.index-rank-team ul li a:visited,.index-rank-team ul li a:hover{color:#ffffff;text-shadow:0px 1px 0px #3d130e;}
 .index-rank-team ul li .muted{color:#672017;}
+.post-label-team{background-color:#cf402e;}
 .index-rank-mvp ul li{background-color:#1a93c5;border-color:#037fb3;}.index-rank-mvp ul li a:link,.index-rank-mvp ul li a:active,.index-rank-mvp ul li a:visited,.index-rank-mvp ul li a:hover{color:#ffffff;text-shadow:0px 1px 0px #011f2c;}
 .index-rank-mvp ul li .muted{color:#02435e;}
+.post-label-mcp{background-color:#049cdb;}
 .index-rank-active ul li{background-color:#f3b700;border-color:#e3ac00;}.index-rank-active ul li a:link,.index-rank-active ul li a:active,.index-rank-active ul li a:visited,.index-rank-active ul li a:hover{color:#ffffff;text-shadow:0px 1px 0px #5a4400;}
 .index-rank-active ul li .muted{color:#8d6a00;}
+.post-label-mcp{background-color:#ffc40d;}

+ 12 - 0
static/cranefly/css/cranefly/buttons.less

@@ -9,6 +9,7 @@
   font-weight: bold;
   
   i {
+    .opacity(60);
     position: relative;
     bottom: 1px;
   }
@@ -16,6 +17,10 @@
   &:hover, &:active {
     background-color: @white;
     border-color: lighten(@grayLight, 5%);
+  
+    i {
+      .opacity(90);
+    }
   }
 
   &.btn-primary {
@@ -141,6 +146,13 @@
       }
     }
   }
+
+
+  &.btn-primary, &.btn-info, &.btn-success, &.btn-warning, &.btn-danger, &.btn-inverse, &.btn-link {
+    i {
+      .opacity(100);
+    }
+  }
 }
 
 a.btn-link {

+ 10 - 3
static/cranefly/css/cranefly/editor.less

@@ -21,13 +21,16 @@
     padding: @editorPadding;
 
     &>div {
-      margin-top: -1px;
-      margin-right: @editorPadding + 3px;
+      margin-right: 2px;
 
       textarea {
+        border: none;
         box-shadow: none;
-        margin-bottom: 0px;
+        margin: @editorPadding * -1;
+        padding: @editorPadding;
         width: 100%;
+
+        font-family: @monoFontFamily;
       } 
     }
   }
@@ -37,6 +40,10 @@
     overflow: auto;
     padding: @editorPadding;
 
+    &>.btn {
+      margin-left: @baseFontSize;
+    }
+
     .editor-tools {
       margin: 0px;
 

+ 24 - 0
static/cranefly/css/cranefly/header.less

@@ -46,6 +46,30 @@
     font-weight: normal;
   }
 
+  .header-stats {
+    overflow: auto;
+    margin-bottom: 0px;
+
+    color: @grayLight;
+
+    li {
+      float: left;
+      margin-right: @baseFontSize;
+
+      &>a {
+        color: @grayLight;
+
+        &:hover, &:active {
+          color: @textColor;
+        }
+      }
+
+      &>i {
+        .opacity(50);
+      }
+    }
+  }
+
   .header-tabs {
     border-bottom: 0px;
     margin: 0px;

+ 36 - 0
static/cranefly/css/cranefly/markdown.less

@@ -32,4 +32,40 @@
     border: none;
     border-top: 1px solid @hrBorder;
   }
+
+  blockquote {
+    background-color: darken(@postBackground, 1%);
+    border: 1px solid darken(@postBackground, 6%);
+    border-radius: @baseBorderRadius;
+    padding: @baseFontSize;
+
+    &>h3:first-child {
+      margin: 0px;
+      margin-bottom: @baseLineHeight / 2;
+      padding: 0px;
+
+      font-size: @baseFontSize;
+      line-height: @baseLineHeight;
+    }
+
+    &>:first-child {
+      margin-top: 0px;
+    }
+
+    &>:last-child {
+      margin-bottom: 0px;
+    }
+
+    p {
+      margin: 0 0 @baseLineHeight / 2;
+      font-size: @fontSizeSmall;
+    }
+
+    blockquote {
+      background-color: @postBackground;
+      border: 1px solid darken(@postBackground, 5%);
+      border-radius: @baseBorderRadius;
+      padding: @baseFontSize;
+    }
+  }
 }

+ 404 - 1
static/cranefly/css/cranefly/thread.less

@@ -1,2 +1,405 @@
 // Thread view
-// -------------------------
+// -------------------------
+
+.thread-buttons {
+  overflow: auto;
+
+  .pull-right {
+    margin-left: @baseFontSize;
+  }
+}
+
+// Thread body styles
+.thread-body {
+  .post-wrapper {
+    // Post body
+    .post-body {
+      margin-bottom: @baseLineHeight;
+      overflow: auto;
+
+      .user-avatar {
+        border-radius: @baseBorderRadius;
+        float: left;
+        width: 100px;
+        height: 100px;
+      }
+
+      .post-content {
+        background-color: @postBackground;
+        border: 1px solid @postBorder;
+        border-radius: @borderRadiusLarge;
+        margin-left: 100px + (@baseFontSize * 1.5);
+
+        .post-header {
+          padding: (@baseFontSize / 2) @baseFontSize;
+          padding-bottom: 0px;
+
+          color: grayLighter;
+
+          .post-author {
+            color: @textColor;
+            font-weight: bold;
+          }
+
+          .post-author-label {
+            text-shadow: none;
+
+            &.post-label-guest {
+              background-color: @grayLighter;
+
+              color: @grayLight;
+            }
+          }
+
+          .separator {
+            color: @grayLighter;
+            font-size: @fontSizeLarge;
+            line-height: 5px;
+          }
+
+          .post-date {
+            color: @grayLight;
+          }
+
+          .post-changelog {
+            color: @grayLight;
+
+            &:hover, &:active {
+              color: @textColor;
+            }
+          }
+
+          .post-perma {
+            display: block;
+            float: right;
+            padding-left: 6px;
+
+            color: @grayLight;
+            font-weight: bold;
+
+            &:hover, &:active {
+              color: @textColor;
+            }
+          }
+
+          .post-checkbox {
+            float: right;
+            position: relative;
+            left: @baseFontSize - 4px;
+          }
+
+          .post-extra {
+            float: right;
+
+            .label {
+              margin-left: @baseFontSize / 4;
+
+              text-shadow: none;
+
+              &.label-purple {
+                background-color: #7e2ecf;
+              }
+            }
+          }
+        }
+
+        .post-message {
+          padding: @baseFontSize;
+
+          .post-signature {
+            border-top: 1px dotted darken(@postBackground, 25%);
+            .opacity(60);
+            margin-top: @baseLineHeight;
+            padding-top: @baseLineHeight / 4;
+
+            font-size: 80%;
+          }
+        }
+
+        .post-footer {
+          border-top: 1px solid @postBorder;
+          overflow: auto;
+
+          .post-rating {
+            float: left;
+            overflow: auto;
+            padding: (@baseFontSize / 2) @baseFontSize;
+            border-right: 1px dotted @postBorder;
+
+            a {
+              color: @grayLight;
+
+              &:hover, a:active {
+                color: @textColor;
+              }
+            }
+
+            span {
+              float: left;
+
+              &.post-score {
+                color: @grayLight;
+                font-weight: bold;
+
+                &.post-score-good {
+                  color: @green;
+                }
+
+                &.post-score-bad {
+                  color: @red;
+                }
+              }
+
+              &.post-neutral, &.post-like, &.post-hate {
+                margin-left: (@baseFontSize / 4); 
+              }
+
+              &.post-neutral {
+                color: @grayLight;
+              }
+
+              &.post-like {
+                color: @green;
+              }
+
+              &.post-hate {
+                color: @red;
+              }
+            }
+
+            form {
+              float: left;
+              margin: 0px;
+              padding: 0px;
+
+              .btn-link {
+                float: right;
+                margin: 0px;
+                margin-left: (@baseFontSize / 4); 
+                padding: 0px;
+
+                font-weight: normal;
+
+                &:hover, &:active, &:focus {
+                  text-decoration: underline;
+                }
+
+                &.post-like {
+                  &:hover, &:active, &:focus {
+                    color: @green;
+                  }
+                }
+
+                &.post-hate {
+                  &:hover, &:active, &:focus {
+                    color: @red;
+                  }
+                }
+              }
+            }
+          }
+
+          .post-actions {
+            border-left: 1px dotted @postBorder;
+            float: right;
+            padding: (@baseFontSize / 2) @baseFontSize;
+
+            color: @grayLight;
+
+            a, form {
+              float: left;
+              overflow: auto;
+            }
+
+            form {
+              margin: 0px;
+              padding: 0px;
+            }
+
+            a {
+              margin-left: @baseFontSize;
+
+              color: @grayLight;
+
+              &:hover, a:active {
+                color: @textColor;
+              }
+
+              &:first-child {
+                margin-left: 0px;
+              }
+
+              &.post-reply {
+                color: @gray;
+
+                &:hover, a:active {
+                  color: @blue;
+                }
+              }
+            }
+
+            .btn {
+              float: right;
+              margin: 0px;
+              margin-left: @baseFontSize;
+              padding: 0px;
+
+              color: @grayLight;
+              font-weight: normal;
+
+              &:hover, &:active, &:focus {
+                color: @red;
+                text-decoration: underline;
+              }
+            }
+          }
+        }
+      }
+
+      .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;
+          height: 50px;
+          .opacity(75);
+        }
+
+        .post-content {
+          margin-left: 50px + (@baseFontSize * 1.5);
+          .opacity(75);
+
+          .post-header {
+            float: right;
+            margin: 0px;
+            margin-top: @baseFontSize / 2;
+
+            .post-header-compact {
+              float: left;
+              margin-right: @baseLineHeight;
+            }
+          }
+
+          .post-message {
+            color: @grayLight;
+            font-size: @fontSizeLarge;
+
+            strong, a {
+              color: @textColor;
+              font-weight: normal;
+            }
+          }
+        }
+      }
+    }
+  }
+
+    .post-checkpoints {
+      .post-checkpoint {
+        text-align: center;
+
+        margin-bottom: @baseLineHeight;
+
+        hr {
+          background-color: @grayLight;
+          background-image: -webkit-gradient(linear, 0 0, 100% 100%,
+                      color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent),
+                      color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)),
+                      color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent),
+                      to(transparent));
+          background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
+                    transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
+                    transparent 75%, transparent);
+          background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
+                    transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
+                    transparent 75%, transparent);
+          background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
+                    transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
+                    transparent 75%, transparent);
+          background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
+                    transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
+                    transparent 75%, transparent);
+          background-image: linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
+                    transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
+                    transparent 75%, transparent);
+          -webkit-background-size: 10px 10px;
+          -moz-background-size: 10px 10px;
+          background-size: 10px 10px;
+          border: none;
+          height: 4px;
+          margin-bottom: (@baseLineHeight * -1) + (@baseFontSize / 2) + 1px;
+        }
+
+        span {
+          background-color: @bodyBackground;
+          padding: 0px @baseFontSize;
+
+          color: @grayLight;
+
+          a {
+            color: @textColor;
+          }
+
+          i {
+            .opacity(43);
+          }
+        }
+      }
+    }
+}
+
+// Thread moderation
+.thread-moderation {
+  background-color: @categoryBackground;
+  border: 1px solid @categoryBorder;
+  border-radius: @borderRadiusSmall;
+  .box-shadow(0px 0px 0px 3px @categoryShadow);
+  margin-bottom: @baseLineHeight;
+  overflow: auto;
+  padding: (@baseFontSize / 2);
+
+  form {
+    margin: 0px;
+  }
+}
+
+// Quick reply styles
+.thread-quick-reply {
+  overflow: auto;
+  margin-top: @baseLineHeight;
+
+  .user-avatar {
+    border-radius: @baseBorderRadius;
+    float: left;
+    width: 125px;
+    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);
+  }
+}

+ 12 - 0
static/cranefly/css/ranks.less

@@ -18,6 +18,10 @@
   }
 }
 
+.post-label-team {
+  background-color: @red;
+}
+
 // .rank-mvp
 .index-rank-mvp ul {
   li {
@@ -35,6 +39,10 @@
   }
 }
 
+.post-label-mcp {
+  background-color: @blue;
+}
+
 // .rank-active
 .index-rank-active ul {
   li {
@@ -51,3 +59,7 @@
     }
   }
 }
+
+.post-label-mcp {
+  background-color: @yellow;
+}

+ 6 - 2
static/cranefly/css/variables.less

@@ -80,7 +80,7 @@
 @pageHeaderBackground:              @bodyBackground;
 @pageHeaderBorder:                  darken(@pageHeaderBackground, 8%);
 
-// Items styles
+// State icons styles
 // -------------------------
 @itemOldColor:                      @gray;
 @itemNewColor:                      @red;
@@ -95,6 +95,10 @@
 
 @forumIconSize:                     4px;
 
+// Posts
+// -------------------------
+@postBackground:                    @white;
+@postBorder:                        darken(@bodyBackground, 8%);
 
 // Tables
 // -------------------------
@@ -139,7 +143,7 @@
 
 // Editor
 // -------------------------
-@editorBackground:              @grayLighter;
+@editorBackground:              @white;
 @editorPadding:                 @baseFontSize * 0.75;
 
 

+ 2 - 2
templates/cranefly/threads/list.html

@@ -69,7 +69,7 @@
   <div class="forum-threads-extra extra-top">
     {{ pager() }}
     {% if user.is_authenticated() and acl.threads.can_start_threads(forum) %}
-    <a href="{% url 'thread_new' forum=forum.pk, slug=forum.slug %}" class="btn btn-primary pull-right"><i class="icon-plus"></i> {% trans %}New Thread{% endtrans %}</a>
+    <a href="{% url 'thread_new' forum=forum.pk, slug=forum.slug %}" class="btn btn-inverse pull-right"><i class="icon-plus"></i> {% trans %}New Thread{% endtrans %}</a>
     {% endif %}
   </div>
 
@@ -162,7 +162,7 @@
   <div class="forum-threads-extra">
     {{ pager() }}
     {% if user.is_authenticated() and acl.threads.can_start_threads(forum) %}
-    <a href="{% url 'thread_new' forum=forum.pk, slug=forum.slug %}" class="btn btn-primary pull-right"><i class="icon-plus"></i> {% trans %}New Thread{% endtrans %}</a>
+    <a href="{% url 'thread_new' forum=forum.pk, slug=forum.slug %}" class="btn btn-inverse pull-right"><i class="icon-plus"></i> {% trans %}New Thread{% endtrans %}</a>
     {% endif %}
   </div>
 

+ 373 - 246
templates/cranefly/threads/thread.html

@@ -7,280 +7,407 @@
 
 {% block title %}{{ macros.page_title(title=thread.name,parent=forum.name,page=pagination['page']) }}{% endblock %}
 
-{% block breadcrumb %}{{ super() }} <span class="divider">/</span></li>
+{% block breadcrumb %}{{ super() }} <span class="divider"><i class="icon-chevron-right"></i></span></li>
 {% for parent in parents %}
-<li><a href="{{ parent.type|url(forum=parent.pk, slug=parent.slug) }}">{{ parent.name }}</a> <span class="divider">/</span></li>
+<li><a href="{{ parent.type|url(forum=parent.pk, slug=parent.slug) }}">{{ parent.name }}</a> <span class="divider"><i class="icon-chevron-right"></i></span></li>
 {% endfor %}
 <li class="active">{{ thread.name }}
 {%- endblock %}
 
-{% block content %}
-<div class="page-header">
-  <ul class="breadcrumb">
-    {{ self.breadcrumb() }}</li>
-  </ul>
-  <h1>{{ thread.name }}</h1>
-  <ul class="unstyled thread-info">
-    {% if thread.moderated %}<li><i class="icon-eye-close"></i> {% trans %}Not Reviewed{% endtrans %}</li>{% endif %}
-    <li><i class="icon-time"></i> {{ thread.last|reltimesince }}</li>
-    <li><i class="icon-user"></i> {% if thread.start_poster_id %}<a href="{% url 'user' user=thread.start_poster_id, username=thread.start_poster_slug %}">{{ thread.start_poster_name }}</a>{% else %}{{ thread.start_poster_name }}{% endif %}</li>
-    <li><i class="icon-comment"></i> {% if thread.replies > 0 -%}
-      {% trans count=thread.replies, replies=thread.replies|intcomma %}One reply{% pluralize %}{{ replies }} replies{% endtrans %}
-    {%- else -%}
-      {% trans %}No replies{% endtrans %}
-    {%- endif %}</li>
-  </ul>
+{% block container %}
+<div class="page-header header-primary">
+  <div class="container">
+    {{ messages_list(messages) }}
+    <ul class="breadcrumb">
+      {{ self.breadcrumb() }}</li>
+    </ul>
+    <h1>{{ thread.name }}</h1>
+    <ul class="unstyled header-stats">
+      {% if thread.moderated %}<li><i class="icon-eye-close"></i> {% trans %}Not Reviewed{% endtrans %}</li>{% endif %}
+      <li><i class="icon-time"></i> {{ thread.last|reltimesince }}</li>
+      <li><i class="icon-user"></i> {% if thread.start_poster_id %}<a href="{% url 'user' user=thread.start_poster_id, username=thread.start_poster_slug %}">{{ thread.start_poster_name }}</a>{% else %}{{ thread.start_poster_name }}{% endif %}</li>
+      <li><i class="icon-comment"></i> {% if thread.replies > 0 -%}
+        {% trans count=thread.replies, replies=thread.replies|intcomma %}One reply{% pluralize %}{{ replies }} replies{% endtrans %}
+      {%- else -%}
+        {% trans %}No replies{% endtrans %}
+      {%- endif %}</li>
+    </ul>
+  </div>
 </div>
-{% if message %}{{ macros.draw_message(message) }}{% endif %}
-<div class="list-nav">
-  {{ pager() }}
-  {% if user.is_authenticated() %}
-  <ul class="nav nav-pills pull-right">
-    {% if ignored_posts %}
-    <li class="discourage"><form action="{% url 'thread_show_hidden' thread=thread.pk, slug=thread.slug %}" class="form-inline" method="post"><input type="hidden" name="{{ csrf_id }}" value="{{ csrf_token }}"><button type="submit" class="btn"><i class="icon-eye-open"></i> {% trans %}Show Hidden Replies{% endtrans %}</button></form></li>
+
+<div class="container container-primary">
+  {% if message %}
+  <div class="messages-list">
+    {{ macros.draw_message(message) }}
+  </div>
+  {% endif %}
+
+  <div class="thread-buttons">
+    {{ pager() }}
+    {% if user.is_authenticated() %}    
+    {% if acl.threads.can_reply(forum, thread) %}
+    <a href="{% url 'thread_reply' thread=thread.pk, slug=thread.slug %}" class="btn btn-inverse pull-right"><i class="icon-pencil"></i> {% trans %}Reply{% endtrans %}</a>
     {% endif %}
     {% if watcher %}
+    <form action="{% url 'thread_unwatch' thread=thread.pk, slug=thread.slug %}" class="form-inline pull-right" method="post"><input type="hidden" name="{{ csrf_id }}" value="{{ csrf_token }}"><input type="hidden" name="retreat" value="{{ request_path }}"><button type="submit" class="btn btn-success tooltip-top" title="{% trans %}Remove thread from watched list{% endtrans %}"><i class="icon-bookmark"></i></button></form>
     {% if watcher.email %}
-    <li class="success"><form action="{% url 'thread_unwatch_email' thread=thread.pk, slug=thread.slug %}" method="post"><input type="hidden" name="{{ csrf_id }}" value="{{ csrf_token }}"><input type="hidden" name="retreat" value="{{ request_path }}"><button type="submit" class="btn tooltip-top" title="{% trans %}Don't e-mail me anymore if anyone replies to this thread{% endtrans %}"><i class="icon-envelope"></i></button></form></li>
+    <form action="{% url 'thread_unwatch_email' thread=thread.pk, slug=thread.slug %}" class="form-inline pull-right" method="post"><input type="hidden" name="{{ csrf_id }}" value="{{ csrf_token }}"><input type="hidden" name="retreat" value="{{ request_path }}"><button type="submit" class="btn btn-success tooltip-top" title="{% trans %}Don't e-mail me anymore if anyone replies to this thread{% endtrans %}"><i class="icon-envelope"></i></button></form>
     {% else %}
-    <li class="info"><form action="{% url 'thread_watch_email' thread=thread.pk, slug=thread.slug %}" method="post"><input type="hidden" name="{{ csrf_id }}" value="{{ csrf_token }}"><input type="hidden" name="retreat" value="{{ request_path }}"><button type="submit" class="btn tooltip-top" title="{% trans %}E-mail me if anyone replies{% endtrans %}"><i class="icon-envelope"></i></button></form></li>
+    <form action="{% url 'thread_watch_email' thread=thread.pk, slug=thread.slug %}" class="form-inline pull-right" method="post"><input type="hidden" name="{{ csrf_id }}" value="{{ csrf_token }}"><input type="hidden" name="retreat" value="{{ request_path }}"><button type="submit" class="btn tooltip-top" title="{% trans %}E-mail me if anyone replies{% endtrans %}"><i class="icon-envelope"></i></button></form>
     {% endif %}
-    <li class="success"><form action="{% url 'thread_unwatch' thread=thread.pk, slug=thread.slug %}" method="post"><input type="hidden" name="{{ csrf_id }}" value="{{ csrf_token }}"><input type="hidden" name="retreat" value="{{ request_path }}"><button type="submit" class="btn tooltip-top" title="{% trans %}Remove thread from watched list{% endtrans %}"><i class="icon-bookmark"></i></button></form></li>
     {% else %}
-    <li class="info"><form action="{% url 'thread_watch_email' thread=thread.pk, slug=thread.slug %}" method="post"><input type="hidden" name="{{ csrf_id }}" value="{{ csrf_token }}"><input type="hidden" name="retreat" value="{{ request_path }}"><button type="submit" class="btn tooltip-top" title="{% trans %}Add thread to watched list and e-mail me if anyone replies{% endtrans %}"><i class="icon-envelope"></i></button></form></li>
-    <li class="info"><form action="{% url 'thread_watch' thread=thread.pk, slug=thread.slug %}" method="post"><input type="hidden" name="{{ csrf_id }}" value="{{ csrf_token }}"><input type="hidden" name="retreat" value="{{ request_path }}"><button type="submit" class="btn tooltip-top" title="{% trans %}Add thread to watched list{% endtrans %}"><i class="icon-bookmark"></i></button></form></li>
+    <form action="{% url 'thread_watch' thread=thread.pk, slug=thread.slug %}" class="form-inline pull-right" method="post"><input type="hidden" name="{{ csrf_id }}" value="{{ csrf_token }}"><input type="hidden" name="retreat" value="{{ request_path }}"><button type="submit" class="btn tooltip-top" title="{% trans %}Add thread to watched list{% endtrans %}"><i class="icon-bookmark"></i></button></form>
+    <form action="{% url 'thread_watch_email' thread=thread.pk, slug=thread.slug %}" class="form-inline pull-right" method="post"><input type="hidden" name="{{ csrf_id }}" value="{{ csrf_token }}"><input type="hidden" name="retreat" value="{{ request_path }}"><button type="submit" class="btn tooltip-top" title="{% trans %}Add thread to watched list and e-mail me if anyone replies{% endtrans %}"><i class="icon-envelope"></i></button></form>
     {% endif %}
-    {% if acl.threads.can_reply(forum, thread) %}
-    <li class="primary"><a href="{% url 'thread_reply' thread=thread.pk, slug=thread.slug %}"><i class="icon-pencil"></i> {% trans %}Reply{% endtrans %}</a></li>
+    {% if ignored_posts %}
+    <form action="{% url 'thread_show_hidden' thread=thread.pk, slug=thread.slug %}" class="form-inline pull-right" method="post"><input type="hidden" name="{{ csrf_id }}" value="{{ csrf_token }}"><button type="submit" class="btn"><i class="icon-eye-open"></i> {% trans %}Show Hidden Replies{% endtrans %}</button></form>
     {% endif %}
-  </ul>
-  {% endif %}
-</div>
+    {% endif %}
+  </div>
 
-<div class="posts-list">
-  {% for post in posts %}
-  <div id="post-{{ post.pk }}"></div>
-  {% if post.message %}{{ macros.draw_message(post.message) }}{% endif %}
-  {% if post.deleted and not acl.threads.can_see_deleted_posts(forum) %}
-  <div id="post-{{ post.pk }}" class="well well-post well-post-deleted{% if post.user and post.user.rank and post.user.rank.style %} {{ post.user.rank.style }}{% endif %}">
-    <div class="post-author">
-      <div class="post-bit">
+  <div class="thread-body">
+    {% for post in posts %}
+    <div id="post-{{ post.pk }}" class="post-wrapper">
+      {% if post.message %}
+      <div class="messages-list">
+        {{ macros.draw_message(post.message) }}
+      </div>
+      {% endif %}
+      {% if post.deleted and not acl.threads.can_see_deleted_posts(forum) %}
+      <div class="post-body post-muted">
         {% if post.user_id %}
-        <a href="{% url 'user' user=post.user.pk, username=post.user.username_slug %}" class="lead">{{ post.user.username }}</a>
+        <a href="{% url 'user' user=post.user.pk, username=post.user.username_slug %}"><img src="{{ post.user.get_avatar(50) }}" alt="" class="user-avatar"></a>
         {% else %}
-        <span class="lead">{{ post.user_name }}</span>
+        <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">
+              {% if post.user_id %}
+              <a href="{% url 'user' user=post.user.pk, username=post.user.username_slug %}" class="post-author">{{ post.user.username }}</a>{% if post.user.get_title() %} <span class="label post-author-label{% if post.user.rank and post.user.rank.style %} post-label-{{ post.user.rank.style }}{% endif %}">{{ post.user.get_title() }}</span>{% endif %}
+              {% else %}
+              <span class="post-author">{{ post.user_name }}</span> <span class="label post-author-label post-label-guest">{% trans %}Unregistered{% endtrans %}</span>
+              {% endif %}
+              <span class="separator">&ndash;</span>
+              <a href="{% if pagination['page'] > 1 -%}
+              {% url 'thread' thread=thread.pk, slug=thread.slug, page=pagination['page'] %}
+              {%- else -%}
+              {% url 'thread' thread=thread.pk, slug=thread.slug %}
+              {%- endif %}#post-{{ post.pk }}" class="post-date">{{ post.date|reltimesince }}</a>
+              {% if post.edits %}
+              <span class="separator">&ndash;</span>
+              {% if acl.threads.can_see_changelog(user, forum, post) %}
+              <a href="{% url 'changelog' thread=thread.pk, slug=thread.slug, post=post.pk %}" class="post-changelog tooltip-bottom" title="{% trans %}Show changelog{% endtrans %}">{% trans count=post.edits %}One edit{% pluralize %}{{ count }} edits{% endtrans %}</a>
+              {% else %}
+              <span class="post-changelog">{% trans count=post.edits %}One edit{% pluralize %}{{ count }} edits{% endtrans %}</span>
+              {% endif %}
+              {% endif %}
+            </div>
+
+            <a href="{% if pagination['page'] > 1 -%}
+            {% url 'thread' thread=thread.pk, slug=thread.slug, page=pagination['page'] %}
+            {%- else -%}
+            {% url 'thread' thread=thread.pk, slug=thread.slug %}
+            {%- endif %}#post-{{ post.pk }}" class="post-perma tooltip-left" title="{% trans %}Direct link to this post{% endtrans %}">#{{ pagination['start'] + loop.index }}</a>
+
+            {% if 1 ==1 or not post.is_read %}
+            <div class="post-extra">
+              <span class="label label-warning">
+                {% trans %}New{% endtrans %}
+              </span>
+            </div>
+            {% endif %}
+
+          </div>
+          <div class="post-message">
+            {% trans user=edit_user(post), date=post.edit_date|reltimesince|low %}{{ user }} has deleted this reply {{ date }}{% endtrans %}
+          </div>
+        </dv>
       </div>
-    </div>
-    <div class="post-extra">
-      <a href="{% if pagination['page'] > 1 -%}
-      {% url 'thread' thread=thread.pk, slug=thread.slug, page=pagination['page'] %}
-      {%- else -%}
-      {% url 'thread' thread=thread.pk, slug=thread.slug %}
-      {%- endif %}#post-{{ post.pk }}" class="post-perma pull-right tooltip-left" title="{% trans %}Direct link to this post{% endtrans %}">#{{ pagination['start'] + loop.index }}</a>
-    </div>
-    <div class="post-content">
-      {% trans user=edit_user(post), date=post.edit_date|reltimesince|low %}{{ user }} has deleted this reply {{ date }}{% endtrans %}
-    </div>
-  </div>
-  {% elif post.ignored %}
-  <div class="well well-post well-post-deleted{% if post.user and post.user.rank and post.user.rank.style %} {{ post.user.rank.style }}{% endif %}">
-    <div class="post-author">
-      <div class="post-bit">
-        <span class="lead">{% trans %}Hidden Reply{% endtrans %}</span>
+      {% elif post.ignored %}
+      <div class="post-body post-muted">
+        <img src="{{ macros.avatar_guest(60) }}" alt="" class="user-avatar"></a>
+        <div class="post-arrow"></div>
+        <div class="post-content">
+          <div class="post-header">
+            <div class="post-header-compact">
+              <a href="{% if pagination['page'] > 1 -%}
+              {% url 'thread' thread=thread.pk, slug=thread.slug, page=pagination['page'] %}
+              {%- else -%}
+              {% url 'thread' thread=thread.pk, slug=thread.slug %}
+              {%- endif %}#post-{{ post.pk }}" class="post-date">{{ post.date|reltimesince }}</a>
+            </div>
+
+            <a href="{% if pagination['page'] > 1 -%}
+            {% url 'thread' thread=thread.pk, slug=thread.slug, page=pagination['page'] %}
+            {%- else -%}
+            {% url 'thread' thread=thread.pk, slug=thread.slug %}
+            {%- endif %}#post-{{ post.pk }}" class="post-perma tooltip-left" title="{% trans %}Direct link to this post{% endtrans %}">#{{ pagination['start'] + loop.index }}</a>
+
+            {% if not post.is_read %}
+            <div class="post-extra">
+              <span class="label label-warning">
+                {% trans %}New{% endtrans %}
+              </span>
+            </div>
+            {% endif %}
+
+          </div>
+          <div class="post-message">
+            {% trans %}This reply was posted by user that is on your ignored list.{% endtrans %}
+          </div>
+        </dv>
       </div>
-    </div>
-    <div class="post-extra">
-      <a href="{% if pagination['page'] > 1 -%}
-      {% url 'thread' thread=thread.pk, slug=thread.slug, page=pagination['page'] %}
-      {%- else -%}
-      {% url 'thread' thread=thread.pk, slug=thread.slug %}
-      {%- endif %}#post-{{ post.pk }}" class="post-perma pull-right tooltip-left" title="{% trans %}Direct link to this post{% endtrans %}">#{{ pagination['start'] + loop.index }}</a>
-    </div>
-    <div class="post-content">
-      {% trans %}This reply was posted by user that is on your ignored list.{% endtrans %}
-    </div>
-  </div>
-  {% else %}
-  <div id="post-{{ post.pk }}" class="well well-post{% if post.user and post.user.rank and post.user.rank.style %} {{ post.user.rank.style }}{% endif %}">
-    <div class="post-author">
-      <img src="{% if post.user_id %}{{ post.user.get_avatar(80) }}{% else %}{{ macros.avatar_guest(80) }}{% endif %}" alt="" class="avatar-normal">
-      <div class="post-bit">
+      {% else %}
+      <div class="post-body">
         {% if post.user_id %}
-        <a href="{% url 'user' user=post.user.pk, username=post.user.username_slug %}" class="lead">{{ post.user.username }}</a>
-        {% if post.user.get_title() %}<p class="user-title">{{ _(post.user.get_title()) }}</p>{% endif %}
+        <a href="{% url 'user' user=post.user.pk, username=post.user.username_slug %}"><img src="{{ post.user.get_avatar(100) }}" alt="" class="user-avatar"></a>
         {% else %}
-        <span class="lead">{{ post.user_name }}</span>
-        <p class="user-title">{% trans %}Unregistered{% endtrans %}</p>
-        {% endif %}
-        <p class="post-date">{{ post.date|reltimesince|low }}</p>
-      </div>
-    </div>
-    <div class="post-extra">
-      {% if user.is_authenticated() and posts_form %}
-      <label class="checkbox post-checkbox"><input form="posts_form" name="{{ posts_form['list_items']['html_name'] }}" type="checkbox" class="checkbox-member" value="{{ post.pk }}"{% if posts_form['list_items']['has_value'] and ('' ~ post.pk) in posts_form['list_items']['value'] %} checked="checked"{% endif %}></label>
-      {% endif %}
-      <a href="{% if pagination['page'] > 1 -%}
-      {% url 'thread' thread=thread.pk, slug=thread.slug, page=pagination['page'] %}
-      {%- else -%}
-      {% url 'thread' thread=thread.pk, slug=thread.slug %}
-      {%- endif %}#post-{{ post.pk }}" class="post-perma pull-right tooltip-left" title="{% trans %}Direct link to this post{% endtrans %}">#{{ pagination['start'] + loop.index }}</a>
-      {% if not post.is_read %}
-      <span class="label label-warning pull-right">
-        {% trans %}New{% endtrans %}
-      </span>
-      {% endif %}
-      {% if post.moderated %}
-      <span class="label label-purple pull-right">
-        {% trans %}Unreviewed{% endtrans %}
-      </span>
-      {% endif %}
-      {% if post.reported %}
-      <span class="label label-important pull-right">
-        {% trans %}Reported{% endtrans %}
-      </span>
-      {% endif %}
-      {% if post.deleted %}
-      <span class="label label-inverse pull-right">
-        {% trans %}Deleted{% endtrans %}
-      </span>
-      {% endif %}
-      {% if post.protected and acl.threads.can_protect(forum) %}
-      <span class="label label-info pull-right">
-        {% trans %}Protected{% endtrans %}
-      </span>
-      {% endif %}
-      {% if acl.threads.can_see_post_score(forum) %}
-      <ul class="nav nav-pills post-rating pull-right">
-        {% if user.is_authenticated() and user.pk != post.user_id and acl.threads.can_upvote_posts(forum) %}
-        <li{% if post.karma_vote and post.karma_vote.score > 0 %} class="active"{% endif %}><form action="{% url 'post_upvote' thread=thread.pk, slug=thread.slug, post=post.pk %}" method="post"><button type="submit" class="btn btn-upvote"{% if post.karma_vote and post.karma_vote.score > 0 %} disabled="disabled"{% endif %}><i class="icon-thumbs-up"></i></button><input type="hidden" name="{{ csrf_id }}" value="{{ csrf_token }}"></form></li>
-        {% endif %}
-        <li><{% if acl.threads.can_see_post_votes(forum) %}a href="{% url 'post_votes' thread=thread.pk, slug=thread.slug, post=post.pk %}"{% else %}span{% endif %} class="label{% if (post.upvotes - post.downvotes) > 0 %} label-success{% elif (post.upvotes - post.downvotes) < 0 %} label-important{% endif %}{% if acl.threads.can_see_post_score(forum) == 2 %} tooltip-left{% endif %}"{% if acl.threads.can_see_post_score(forum) == 2 %} title="+{{ post.upvotes }} / -{{ post.downvotes }}"{% endif %}>{% if (post.upvotes - post.downvotes) > 0 %}+{% endif %}{{ post.upvotes - post.downvotes }}</{% if acl.threads.can_see_post_votes(forum) %}a{% else %}span{% endif %}></li>
-        {% if user.is_authenticated() and user.pk != post.user_id and acl.threads.can_downvote_posts(forum) %}
-        <li{% if post.karma_vote and post.karma_vote.score < 0 %} class="active"{% endif %}><form action="{% url 'post_downvote' thread=thread.pk, slug=thread.slug, post=post.pk %}" method="post"><button type="submit" class="btn btn-downvote"{% if post.karma_vote and post.karma_vote.score < 0 %} disabled="disabled"{% endif %}><i class="icon-thumbs-down"></i></button><input type="hidden" name="{{ csrf_id }}" value="{{ csrf_token }}"></form></li>
+        <img src="{{ macros.avatar_guest(100) }}" alt="" class="user-avatar"></a>
         {% endif %}
-      </ul>
-      {% endif %}
-    </div>
-    <div class="post-content">
-      <div class="markdown">
-        {{ post.post_preparsed|markdown_final|safe }}
-      </div>
-      {% if post.user.signature %}
-      <div class="post-foot">
-        {% if post.user.signature %}
-        <div class="signature">
-          <div class="markdown">
-            {{ post.user.signature_preparsed|markdown_final|safe }}
+        <div class="post-arrow"></div>
+        <div class="post-content">
+          <div class="post-header">
+            {% if post.user_id %}
+            <a href="{% url 'user' user=post.user.pk, username=post.user.username_slug %}" class="post-author">{{ post.user.username }}</a>{% if post.user.get_title() %} <span class="label post-author-label{% if post.user.rank and post.user.rank.style %} post-label-{{ post.user.rank.style }}{% endif %}">{{ post.user.get_title() }}</span>{% endif %}
+            {% else %}
+            <span class="post-author">{{ post.user_name }}</span> <span class="label post-author-label post-label-guest">{% trans %}Unregistered{% endtrans %}</span>
+            {% endif %}
+            <span class="separator">&ndash;</span>
+            <a href="{% if pagination['page'] > 1 -%}
+            {% url 'thread' thread=thread.pk, slug=thread.slug, page=pagination['page'] %}
+            {%- else -%}
+            {% url 'thread' thread=thread.pk, slug=thread.slug %}
+            {%- endif %}#post-{{ post.pk }}" class="post-date">{{ post.date|reltimesince }}</a>
+            {% if post.edits %}
+            <span class="separator">&ndash;</span>
+            {% if acl.threads.can_see_changelog(user, forum, post) %}
+            <a href="{% url 'changelog' thread=thread.pk, slug=thread.slug, post=post.pk %}" class="post-changelog tooltip-bottom" title="{% trans %}Show changelog{% endtrans %}">{% trans count=post.edits %}One edit{% pluralize %}{{ count }} edits{% endtrans %}</a>
+            {% else %}
+            <span class="post-changelog">{% trans count=post.edits %}One edit{% pluralize %}{{ count }} edits{% endtrans %}</span>
+            {% endif %}
+            {% endif %}
+
+            {% if user.is_authenticated() and posts_form %}
+            <label class="checkbox post-checkbox"><input form="posts_form" name="{{ posts_form['list_items']['html_name'] }}" type="checkbox" class="checkbox-member" value="{{ post.pk }}"{% if posts_form['list_items']['has_value'] and ('' ~ post.pk) in posts_form['list_items']['value'] %} checked="checked"{% endif %}></label>
+            {% endif %}
+
+            <a href="{% if pagination['page'] > 1 -%}
+            {% url 'thread' thread=thread.pk, slug=thread.slug, page=pagination['page'] %}
+            {%- else -%}
+            {% url 'thread' thread=thread.pk, slug=thread.slug %}
+            {%- endif %}#post-{{ post.pk }}" class="post-perma tooltip-left" title="{% trans %}Direct link to this post{% endtrans %}">#{{ pagination['start'] + loop.index }}</a>
+
+            <div class="post-extra">
+              {% if post.protected and acl.threads.can_protect(forum) %}
+              <span class="label label-info">
+                {% trans %}Protected{% endtrans %}
+              </span>
+              {% endif %}
+
+              {% if post.deleted %}
+              <span class="label label-inverse">
+                {% trans %}Deleted{% endtrans %}
+              </span>
+              {% endif %}
+
+              {% if post.moderated %}
+              <span class="label label-purple">
+                {% trans %}Unreviewed{% endtrans %}
+              </span>
+              {% endif %}
+
+              {% if post.reported %}
+              <span class="label label-important">
+                {% trans %}Reported{% endtrans %}
+              </span>
+              {% endif %}
+
+              {% if not post.is_read %}
+              <span class="label label-warning">
+                {% trans %}New{% endtrans %}
+              </span>
+              {% endif %}
+            </div>
+          </div>
+          <div class="post-message">
+            <div class="markdown">
+              {{ post.post_preparsed|markdown_final|safe }}
+            </div>
+            {% if post.user.signature %}
+            <div class="post-signature">
+              <div class="markdown">
+                {{ post.user.signature_preparsed|markdown_final|safe }}
+              </div>
+            </div>
+            {% endif %}
+          </div>
+          <div class="post-footer">
+            {% if acl.threads.can_see_post_score(forum) %}
+            <div class="post-rating">
+              {% if acl.threads.can_see_post_score(forum) == 1 %}
+              <span class="post-score{% if (post.upvotes - post.downvotes) > 0 %} post-score-good{% elif (post.upvotes - post.downvotes) < 0 %} post-score-bad{% endif %}">{{ post.upvotes - post.downvotes }}</span>
+              {% elif acl.threads.can_see_post_score(forum) == 2%}
+              <span class="post-score{% if post.upvotes %} post-score-good{% endif %}">{{ post.upvotes }}</span>
+              {% endif %}
+              {% if user.is_authenticated() and user.pk != post.user_id and acl.threads.can_upvote_posts(forum) %}
+              {% if post.karma_vote and post.karma_vote.score > 0 %}
+              <span class="post-like">{% trans %}Like{% endtrans %}</span>
+              {% else %}
+              <form action="{% url 'post_upvote' thread=thread.pk, slug=thread.slug, post=post.pk %}" class="form-inline" method="post">
+                <input type="hidden" name="{{ csrf_id }}" value="{{ csrf_token }}">
+                <button type="submit" class="btn btn-link post-like">{% trans %}Like{% endtrans %}</button>
+              </form>
+              {% endif %}
+              {% else %}
+              <span class="post-{% if post.upvotes %}likes{% else %}neutral{% endif %}">{% trans %}Likes{% endtrans %}</span>
+              {% endif %}
+            {% if acl.threads.can_see_post_score(forum) == 2 %}
+            </div>
+            <div class="post-rating">
+              <span class="post-score{% if post.downvotes %} post-score-bad{% endif %}">{{ post.downvotes }}</span>
+            {% endif %}
+              {% if user.is_authenticated() and user.pk != post.user_id and acl.threads.can_downvote_posts(forum) %}
+              {% if post.karma_vote and post.karma_vote.score < 0 %}
+              <span class="post-hate">{% trans %}Hate{% endtrans %}</span>
+              {% else %}
+              <form action="{% url 'post_downvote' thread=thread.pk, slug=thread.slug, post=post.pk %}" class="form-inline" method="post">
+                <input type="hidden" name="{{ csrf_id }}" value="{{ csrf_token }}">
+                <button type="submit" class="btn btn-link post-hate">{% trans %}Hate{% endtrans %}</button>
+              </form>
+              {% endif %}
+              {% elif acl.threads.can_see_post_score(forum) == 2 %}
+              <span class="post-{% if post.downvotes %}hate{% else %}neutral{% endif %}">{% trans %}Hates{% endtrans %}</span>
+              {% endif %}
+            </div>
+            {% if acl.threads.can_see_post_votes(forum) %}
+            <div class="post-rating">
+              <a href="{% url 'post_votes' thread=thread.pk, slug=thread.slug, post=post.pk %}">{% trans %}Show Votes{% endtrans %}</a>
+            </div>
+            {% endif %}
+            {% endif %}
+
+            {% if user.is_authenticated() %}
+            <div class="post-actions">              
+              {% if acl.users.can_see_users_trails() -%}
+              <a href="{% url 'post_info' thread=thread.pk, slug=thread.slug, post=post.pk %}" class="post-trail">{% trans %}Info{% endtrans %}</a>
+              {% endif %}
+              {% if acl.threads.can_edit_thread(user, forum, thread, post) and thread.start_post_id == post.pk %}
+              <a href="{% url 'thread_edit' thread=thread.pk, slug=thread.slug %}" class="post-edit">{% trans %}Edit{% endtrans %}</a>
+              {% elif acl.threads.can_edit_reply(user, forum, thread, post) %}
+              <a href="{% url 'post_edit' thread=thread.pk, slug=thread.slug, post=post.pk %}" class="post-edit">{% trans %}Edit{% endtrans %}</a>
+              {%- endif %}
+              {% if acl.threads.can_reply(forum, thread) %}<a href="{% url 'thread_reply' thread=thread.pk, slug=thread.slug, quote=post.pk %}" class="post-reply">{% trans %}Reply{% endtrans %}</a>{% endif %}
+            </div>
+            {% if post.pk == thread.start_post_id %}
+            <div class="post-actions">
+              {% if acl.threads.can_delete_thread(user, forum, thread, post) == 2 %}
+              <form action="{% url 'thread_delete' thread=thread.pk, slug=thread.slug %}" class="form-inline prompt-delete-thread" method="post">
+                <input type="hidden" name="{{ csrf_id }}" value="{{ csrf_token }}">
+                <span>{% trans %}Delete thread:{% endtrans %}</span>
+                <button type="submit" class="btn btn-link tooltip-top" title="{% trans %}Delete this thread for good{% endtrans %}">{% trans %}Hard{% endtrans %}</button>
+              </form>
+              {% endif %}
+              {% if not post.deleted and acl.threads.can_delete_thread(user, forum, thread, post) %}
+              <form action="{% url 'thread_hide' thread=thread.pk, slug=thread.slug %}" class="form-inline prompt-delete-thread" method="post">
+                <button type="submit" class="btn btn-link tooltip-top" title="{% trans %}Hide this thread from other users{% endtrans %}">{% trans %}Soft{% endtrans %}</button>
+                <input type="hidden" name="{{ csrf_id }}" value="{{ csrf_token }}">
+              </form>
+              {% endif %}
+            </div>
+            {% elif post.pk != thread.start_post_id and acl.threads.can_delete_post(user, forum, thread, post) %}
+            <div class="post-actions">
+              {% if acl.threads.can_delete_post(user, forum, thread, post) == 2 -%}
+              <form action="{% url 'post_delete' thread=thread.pk, slug=thread.slug, post=post.pk %}" class="form-inline prompt-delete-post" method="post">
+                <input type="hidden" name="{{ csrf_id }}" value="{{ csrf_token }}">
+                <span>{% trans %}Delete reply:{% endtrans %}</span>
+                <button type="submit" class="btn btn-link tooltip-top" title="{% trans %}Delete this reply for good{% endtrans %}">{% trans %}Hard{% endtrans %}</button>
+              </form>
+              {% endif %}
+              {% if not post.deleted and acl.threads.can_delete_post(user, forum, thread, post) %}
+              <form action="{% url 'post_hide' thread=thread.pk, slug=thread.slug, post=post.pk %}" class="form-inline prompt-delete-post" method="post">
+                <input type="hidden" name="{{ csrf_id }}" value="{{ csrf_token }}">
+                <button type="submit" class="btn btn-link tooltip-top" title="{% trans %}Hide this reply from other users{% endtrans %}">{% trans %}Soft{% endtrans %}</button>
+              </form>
+              {% endif %}
+            </div>
+            {% endif %}
+            {% endif %}
           </div>
         </div>
-        {% endif %}
       </div>
       {% endif %}
     </div>
-    <div class="post-nav">     
-      {% if post.edits %}
-      {% if acl.threads.can_see_changelog(user, forum, post) %}
-      <a href="{% url 'changelog' thread=thread.pk, slug=thread.slug, post=post.pk %}" class="changelog tooltip-bottom" title="{% trans %}Show changelog{% endtrans %}">{% trans count=post.edits %}One edit{% pluralize %}{{ count }} edits{% endtrans %}</a>
-      {% else %}
-      <span class="changelog">{% trans count=post.edits %}One edit{% pluralize %}{{ count }} edits{% endtrans %}</span>
-      {% endif %}
-      {% endif %}
-      {% if user.is_authenticated() %}
-      <ul class="nav nav-pills pull-right">
-        {% if post.pk == thread.start_post_id %}
-        {% if acl.threads.can_delete_thread(user, forum, thread, post) == 2 -%}
-            <li class="tooltip-top" title="{% trans %}Delete this thread for good{% endtrans %}"><form action="{% url 'thread_delete' thread=thread.pk, slug=thread.slug %}" class="prompt-delete-thread" method="post"><button type="submit" class="btn danger"><i class="icon-remove"></i></button><input type="hidden" name="{{ csrf_id }}" value="{{ csrf_token }}"></form></li>{% endif %}
-        {% if not post.deleted and acl.threads.can_delete_thread(user, forum, thread, post) -%}
-            <li><form action="{% url 'thread_hide' thread=thread.pk, slug=thread.slug %}" class="prompt-delete-thread" method="post"><button type="submit" class="btn danger"><i class="icon-trash"></i> {% trans %}Delete{% endtrans %}</button><input type="hidden" name="{{ csrf_id }}" value="{{ csrf_token }}"></form></li>{% endif %}
-        {% elif post.pk != thread.start_post_id and acl.threads.can_delete_post(user, forum, thread, post) %}
-        {% if acl.threads.can_delete_post(user, forum, thread, post) == 2 -%}
-            <li class="tooltip-top" title="{% trans %}Delete this reply for good{% endtrans %}"><form action="{% url 'post_delete' thread=thread.pk, slug=thread.slug, post=post.pk %}" class="prompt-delete-post" method="post"><button type="submit" class="btn danger"><i class="icon-remove"></i></button><input type="hidden" name="{{ csrf_id }}" value="{{ csrf_token }}"></form></li>{% endif %}
-        {% if not post.deleted and acl.threads.can_delete_post(user, forum, thread, post) -%}
-            <li><form action="{% url 'post_hide' thread=thread.pk, slug=thread.slug, post=post.pk %}" class="prompt-delete-post" method="post"><button type="submit" class="btn danger"><i class="icon-trash"></i> {% trans %}Delete{% endtrans %}</button><input type="hidden" name="{{ csrf_id }}" value="{{ csrf_token }}"></form></li>{% endif %}
-        {% endif %}
-        {% if acl.users.can_see_users_trails() -%}
-        <li><a href="{% url 'post_info' thread=thread.pk, slug=thread.slug, post=post.pk %}"><i class="icon-qrcode"></i> {% trans %}Info{% endtrans %}</a></li>
-        {% endif %}
-        {% if acl.threads.can_edit_thread(user, forum, thread, post) and thread.start_post_id == post.pk -%}
-        <li><a href="{% url 'thread_edit' thread=thread.pk, slug=thread.slug %}"><i class="icon-edit"></i> {% trans %}Edit{% endtrans %}</a></li>
-        {% elif acl.threads.can_edit_reply(user, forum, thread, post) %}
-        <li><a href="{% url 'post_edit' thread=thread.pk, slug=thread.slug, post=post.pk %}"><i class="icon-edit"></i> {% trans %}Edit{% endtrans %}</a></li>
-        {%- endif %}
-        {% if acl.threads.can_reply(forum, thread) %}<li><a href="{% url 'thread_reply' thread=thread.pk, slug=thread.slug, quote=post.pk %}"><i class="icon-comment"></i> {% trans %}Reply{% endtrans %}</a></li>{% endif %}
-      </ul>
-      {% endif %}
-    </div>
-  </div>
-  {% endif %}
-  {% if post.checkpoint_set.all() %}
-  <div class="post-checkpoints">
-    {% for checkpoint in post.checkpoint_set.all() %}
-    <div class="checkpoint">
-      <hr>
-      <span>
-        {%- if checkpoint.action == 'limit' -%}
-        <i class="icon-lock"></i> {% trans  %}This thread has reached its post limit and has been closed.{% endtrans %}
-        {%- elif checkpoint.action == 'accepted' -%}
-        <i class="icon-ok"></i> {% trans user=checkpoint_user(checkpoint), date=checkpoint.date|reltimesince|low %}{{ user }} accepted this thread {{ date }}{% endtrans %}
-        {%- elif checkpoint.action == 'closed' -%}
-        <i class="icon-lock"></i> {% trans user=checkpoint_user(checkpoint), date=checkpoint.date|reltimesince|low %}{{ user }} closed this thread {{ date }}{% endtrans %}
-        {%- elif checkpoint.action == 'opened' -%}
-        <i class="icon-lock"></i> {% trans user=checkpoint_user(checkpoint), date=checkpoint.date|reltimesince|low %}{{ user }} opened this thread {{ date }}{% endtrans %}
-        {%- elif checkpoint.action == 'deleted' -%}
-        <i class="icon-trash"></i> {% trans user=checkpoint_user(checkpoint), date=checkpoint.date|reltimesince|low %}{{ user }} deleted this thread {{ date }}{% endtrans %}
-        {%- elif checkpoint.action == 'undeleted' -%}
-        <i class="icon-trash"></i> {% trans user=checkpoint_user(checkpoint), date=checkpoint.date|reltimesince|low %}{{ user }} restored this thread {{ date }}{% endtrans %}
-        {%- endif -%}
-      </span>
+
+    {% if post.checkpoint_set.all() %}
+    <div class="post-checkpoints">
+      {% for checkpoint in post.checkpoint_set.all() %}
+      <div class="post-checkpoint">
+        <hr>
+        <span>
+          {%- if checkpoint.action == 'limit' -%}
+          <i class="icon-lock"></i> {% trans  %}This thread has reached its post limit and has been closed.{% endtrans %}
+          {%- elif checkpoint.action == 'accepted' -%}
+          <i class="icon-ok"></i> {% trans user=checkpoint_user(checkpoint), date=checkpoint.date|reltimesince|low %}{{ user }} accepted this thread {{ date }}{% endtrans %}
+          {%- elif checkpoint.action == 'closed' -%}
+          <i class="icon-lock"></i> {% trans user=checkpoint_user(checkpoint), date=checkpoint.date|reltimesince|low %}{{ user }} closed this thread {{ date }}{% endtrans %}
+          {%- elif checkpoint.action == 'opened' -%}
+          <i class="icon-lock"></i> {% trans user=checkpoint_user(checkpoint), date=checkpoint.date|reltimesince|low %}{{ user }} opened this thread {{ date }}{% endtrans %}
+          {%- elif checkpoint.action == 'deleted' -%}
+          <i class="icon-trash"></i> {% trans user=checkpoint_user(checkpoint), date=checkpoint.date|reltimesince|low %}{{ user }} deleted this thread {{ date }}{% endtrans %}
+          {%- elif checkpoint.action == 'undeleted' -%}
+          <i class="icon-trash"></i> {% trans user=checkpoint_user(checkpoint), date=checkpoint.date|reltimesince|low %}{{ user }} restored this thread {{ date }}{% endtrans %}
+          {%- endif -%}
+        </span>
+      </div>
+      {% endfor %}
     </div>
+    {% endif %}
     {% endfor %}
   </div>
-  {% endif %}
-  {% endfor %}
-</div>
 
-{% if user.is_authenticated() and (thread_form or posts_form) %}
-<div class="form-actions table-footer mod-actions">
-  {% if thread_form%}
-  <form id="thread_form" class="form-inline pull-left" action="{% url 'thread' slug=thread.slug, thread=thread.id, page=pagination['page'] %}" method="POST">
-    <input type="hidden" name="{{ csrf_id }}" value="{{ csrf_token }}">
-    <input type="hidden" name="origin" value="thread_form">
-    {{ form_theme.input_select(thread_form['thread_action'],width=3) }}
-    <button type="submit" class="btn btn-primary">{% trans %}Go{% endtrans %}</button>
-  </form>
-  {% endif %}
-  {% if posts_form%}
-  <form id="posts_form" class="form-inline pull-right" action="{% url 'thread' slug=thread.slug, thread=thread.id, page=pagination['page'] %}" method="POST">
-    <input type="hidden" name="{{ csrf_id }}" value="{{ csrf_token }}">
-    <input type="hidden" name="origin" value="posts_form">
-    {{ form_theme.input_select(posts_form['list_action'],width=3) }}
-    <button type="submit" class="btn btn-primary">{% trans %}Go{% endtrans %}</button>
-  </form>
+  {% if user.is_authenticated() and (thread_form or posts_form) %}
+  <div class="thread-moderation">
+    {% if thread_form%}
+    <form id="thread_form" class="form-inline pull-left" action="{% url 'thread' slug=thread.slug, thread=thread.id, page=pagination['page'] %}" method="POST">
+      <input type="hidden" name="{{ csrf_id }}" value="{{ csrf_token }}">
+      <input type="hidden" name="origin" value="thread_form">
+      {{ form_theme.input_select(thread_form['thread_action'],width=3) }}
+      <button type="submit" class="btn btn-danger">{% trans %}Go{% endtrans %}</button>
+    </form>
+    {% endif %}
+    {% if posts_form%}
+    <form id="posts_form" class="form-inline pull-right" action="{% url 'thread' slug=thread.slug, thread=thread.id, page=pagination['page'] %}" method="POST">
+      <input type="hidden" name="{{ csrf_id }}" value="{{ csrf_token }}">
+      <input type="hidden" name="origin" value="posts_form">
+      {{ form_theme.input_select(posts_form['list_action'],width=3) }}
+      <button type="submit" class="btn btn-danger">{% trans %}Go{% endtrans %}</button>
+    </form>
+    {% endif %}
+  </div>
   {% endif %}
-</div>
-{% endif %}
 
-<div class="list-nav last">
-  {{ pager(false) }}
+  <div class="thread-buttons">
+    {{ pager(false) }}
+    {% if user.is_authenticated() and acl.threads.can_reply(forum, thread) %}
+    <a href="{% url 'thread_reply' thread=thread.pk, slug=thread.slug %}" class="btn btn-inverse pull-right"><i class="icon-pencil"></i> {% trans %}Reply{% endtrans %}</a>
+    {% endif %}
+  </div>
+
   {% if user.is_authenticated() and acl.threads.can_reply(forum, thread) %}
-  <ul class="nav nav-pills pull-right">
-    <li class="primary"><a href="{% url 'thread_reply' thread=thread.pk, slug=thread.slug %}"><i class="icon-pencil"></i> {% trans %}Reply{% endtrans %}</a></li>
-  </ul>
+  <div class="thread-quick-reply">
+    <form action="{% url 'thread_reply' thread=thread.pk, slug=thread.slug %}" method="post">
+      <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>
   {% endif %}
-</div>
 
-{% if user.is_authenticated() and acl.threads.can_reply(forum, thread) %}
-<div class="quick-reply">
-  <form action="{% url 'thread_reply' thread=thread.pk, slug=thread.slug %}" method="post">
-    <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="avatar-big">
-    <div class="arrow"></div>
-    {{ editor.editor(quick_reply.post, _('Post Reply'), extra=editor_extra()) }}
-  </form>
 </div>
-{% endif %}
 {% endblock %}
 
 
@@ -332,22 +459,22 @@
 
 
 {% macro pager(extra=true) %}
-  <ul class="pager pull-left">
+<div class="pagination pull-left">
+  <ul>
+    {% if pagination['total'] > 0 %}
+    <li class="count">{{ macros.pager_label(pagination) }}</li>
     {%- if pagination['prev'] > 1 %}<li><a href="{% url 'thread' slug=thread.slug, thread=thread.id %}" class="tooltip-top" title="{% trans %}Go to first page{% endtrans %}"><i class="icon-chevron-left"></i> {% trans %}First{% endtrans %}</a></li>{% endif -%}
     {%- if pagination['prev'] > 0 %}<li><a href="{%- if pagination['prev'] > 1 %}{% url 'thread' slug=thread.slug, thread=thread.id, page=pagination['prev'] %}{% else %}{% url 'thread' slug=thread.slug, thread=thread.id %}{% endif %}" class="tooltip-top" title="{% trans %}Older Posts{% endtrans %}"><i class="icon-chevron-left"></i></a></li>{% endif -%}
     {%- if pagination['next'] > 0 %}<li><a href="{% url 'thread' slug=thread.slug, thread=thread.id, page=pagination['next'] %}" class="tooltip-top" title="{% trans %}Newest Posts{% endtrans %}"><i class="icon-chevron-right"></i></a></li>{% endif -%}
     {%- if pagination['next'] > 0 and pagination['next'] < pagination['total'] %}<li><a href="{% url 'thread' slug=thread.slug, thread=thread.id, page=pagination['total'] %}" class="tooltip-top" title="{% trans %}Go to last page{% endtrans %}">{% trans %}Last{% endtrans %} <i class="icon-chevron-right"></i></a></li>{% endif -%}
-    <li class="count">
-    {%- trans current_page=pagination['page'], pages=pagination['total'] -%}
-    Page {{ current_page }} of {{ pages }}
-    {%- endtrans -%}
-    </li>
+    {% endif %}
     {% if extra and user.is_authenticated() %}
-    {% if not is_read %}<li class="unread"><a href="{% url 'thread_new' slug=thread.slug, thread=thread.id %}" class="tooltip-top" title="{% trans %}Go to first unread{% endtrans %}"><i class="icon-star"></i> {% trans %}First Unread{% endtrans %}</a></li>{% endif %}
-    {% if thread.replies_moderated > 0 and acl.threads.can_approve(forum) %}<li class="moderated"><a href="{% url 'thread_moderated' slug=thread.slug, thread=thread.id %}" class="tooltip-top" title="{% trans %}Go to first post awaiting review{% endtrans %}"><i class="icon-eye-close"></i> {% trans %}First Unreviewed{% endtrans %}</a></li>{% endif %}
-    {% if thread.replies_reported > 0 and acl.threads.can_mod_posts(thread) %}<li class="reported"><a href="{% url 'thread_reported' slug=thread.slug, thread=thread.id %}" class="tooltip-top" title="{% trans %}Go to first reported post{% endtrans %}"><i class="icon-fire"></i> {% trans %}First Reported{% endtrans %}</a></li>{% endif %}
+    {% if not is_read %}<li><a href="{% url 'thread_new' slug=thread.slug, thread=thread.id %}" class="tooltip-top" title="{% trans %}Go to first unread{% endtrans %}"><i class="icon-star"></i> {% trans %}First Unread{% endtrans %}</a></li>{% endif %}
+    {% if thread.replies_moderated > 0 and acl.threads.can_approve(forum) %}<li><a href="{% url 'thread_moderated' slug=thread.slug, thread=thread.id %}" class="tooltip-top" title="{% trans %}Go to first post awaiting review{% endtrans %}"><i class="icon-eye-close"></i> {% trans %}First Unreviewed{% endtrans %}</a></li>{% endif %}
+    {% if thread.replies_reported > 0 and acl.threads.can_mod_posts(thread) %}<li><a href="{% url 'thread_reported' slug=thread.slug, thread=thread.id %}" class="tooltip-top" title="{% trans %}Go to first reported post{% endtrans %}"><i class="icon-fire"></i> {% trans %}First Reported{% endtrans %}</a></li>{% endif %}
     {% endif %}
   </ul>
+</div>
 {% endmacro %}
 
 
@@ -370,5 +497,5 @@
 
 
 {% macro editor_extra() %}
-  <button id="editor-preview" name="preview" type="submit" class="btn btn-success pull-right">{% trans %}Full Editor{% endtrans %}</button>
+  <button id="editor-preview" name="preview" type="submit" class="btn pull-right">{% trans %}Full Editor{% endtrans %}</button>
 {% endmacro %}