watch.js: pinned boards styling for regular boardlist

js/watch.js

@@ -129,7 +129,7 @@ $(function(){
 
     var bl = $('.boardlist').first();
     $('#watch-pinned, .watch-menu').remove();
-    var pinned = $('<div id="watch-pinned"></div>').css('display', 'inline-block').css('vertical-align', 'middle').appendTo(bl);
+    var pinned = $('<div id="watch-pinned"></div>').appendTo(bl);
 
     var st = storage();
     for (var i in st) {

stylesheets/style.css

@@ -548,3 +548,23 @@ form.ban-appeal textarea {
         text-align: right;
 }
 
+.boardlist:not(.compact-boardlist) #watch-pinned::before {
+	content: " [ ";
+}
+.boardlist:not(.compact-boardlist) #watch-pinned::after {
+	content: " ] ";
+}
+.boardlist:not(.compact-boardlist) #watch-pinned {
+        display: inline;
+}
+.boardlist:not(.compact-boardlist) #watch-pinned a {
+	margin-left: 3pt;
+}
+.boardlist:not(.compact-boardlist) #watch-pinned a:first-child {
+        margin-left: 0pt;
+}
+
+.compact-boardlist #watch-pinned {
+        display: inline-block;
+	vertical-align: middle;
+}