watch.js: pinned boards styling for regular boardlist

2 files changed, 21 insertions, 1 deletions

diff --git a/js/watch.js b/js/watch.js
index 79cf144d..dea8b6cd 100644
--- a/js/watch.js
+++ b/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) {
diff --git a/stylesheets/style.css b/stylesheets/style.css
index 129c89c1..befe1816 100644
--- a/stylesheets/style.css
+++ b/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;
+}