Add support for 4chan's various themes.

On the catalog, it allows dialogs to be correctly themed as it didn't have the same stylesheets.
Fix #919.

changelog

@@ -13,6 +13,7 @@ alpha
   Fix Chrome's install warning saying that 4chan X would execute on all domains.
   Fix Quote Backlinks not affecting inlined quotes.
   Fix Quote Highlighting not affecting inlined quotes.
+  Fix unreadable inlined posts with the Tomorrow theme.
 
 master
 - Mayhem

css/burichan.css

@@ -0,0 +1,28 @@
+/* general */
+:root.burichan .dialog {
+  background-color: #D6DAF0;
+  border-color: #B7C5D9;
+}
+
+/* Header */
+:root.burichan #header-bar {
+  font-size: 11pt;
+  color: #89A;
+}
+:root.burichan #header-bar a {
+  color: #34345C;
+}
+
+/* quote */
+:root.burichan .inline {
+  border-color: #B7C5D9;
+  background-color: rgba(255, 255, 255, .14);
+}
+
+/* Menu */
+:root.burichan .entry:not(:last-child) {
+  border-bottom: 1px solid #B7C5D9;
+}
+:root.burichan .focused.entry {
+  background: rgba(255, 255, 255, .33);
+}

css/futaba.css

@@ -0,0 +1,28 @@
+/* general */
+:root.futaba .dialog {
+  background-color: #F0E0D6;
+  border-color: #D9BFB7;
+}
+
+/* Header */
+:root.futaba #header-bar {
+  font-size: 11pt;
+  color: #B86;
+}
+:root.futaba #header-bar a {
+  color: #800000;
+}
+
+/* quote */
+:root.futaba .inline {
+  border-color: #D9BFB7;
+  background-color: rgba(255, 255, 255, .14);
+}
+
+/* Menu */
+:root.futaba .entry:not(:last-child) {
+  border-bottom: 1px solid #D9BFB7;
+}
+:root.futaba .focused.entry {
+  background: rgba(255, 255, 255, .33);
+}

css/photon.css

@@ -0,0 +1,28 @@
+/* general */
+:root.photon .dialog {
+  background-color: #DDD;
+  border-color: #CCC;
+}
+
+/* Header */
+:root.photon #header-bar {
+  font-size: 9pt;
+  color: #333;
+}
+:root.photon #header-bar a {
+  color: #FF6600;
+}
+
+/* quote */
+:root.photon .inline {
+  border-color: #CCC;
+  background-color: rgba(255, 255, 255, .14);
+}
+
+/* Menu */
+:root.photon .entry:not(:last-child) {
+  border-bottom: 1px solid #CCC;
+}
+:root.photon .focused.entry {
+  background: rgba(255, 255, 255, .33);
+}

css/style.css

@@ -1,7 +1,8 @@
 /* general */
-.dialog.reply {
+.dialog {
+  box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
+  border: 1px solid;
   display: block;
-  border: 1px solid rgba(0, 0, 0, .25);
   padding: 0;
 }
 .move {
@@ -60,26 +61,22 @@ a[href="javascript:;"] {
   z-index: 10;
 }
 
-/* XXX support different styles */
+/* Header */
-#header-bar {
+.fourchan-x body {
-  font-size: 9pt;
-  color: #89A;
-  background-color: #D6DAF0;
-  border-color: #B7C5D9;
-  border-width: 0 0 1px;
-  border-style: solid;
-}
-
-/* header */
-.fourchan_x body {
   margin-top: 2em;
 }
+.fourchan-x #boardNavDesktop,
+.fourchan-x #navtopright,
+.fourchan-x #boardNavDesktopFoot {
+  display: none !important;
+}
 #header {
   top: 0;
   right: 0;
   left: 0;
 }
 #header-bar {
+  border-width: 0 0 1px;
   padding: 4px;
   position: relative;
   transition: all .1s ease-in-out;
@@ -117,11 +114,6 @@ a[href="javascript:;"] {
   float: right;
   padding: 0;
 }
-body > #boardNavDesktop,
-#navtopright,
-#boardNavDesktopFoot {
-  display: none !important;
-}
 
 /* notifications */
 #notifications {
@@ -142,16 +134,16 @@ body > #boardNavDesktop,
   -webkit-transition: all .25s ease-in-out;
 }
 .notification.error {
-  background-color: hsl(0, 100%, 40%);
+  background-color: hsla(0, 100%, 40%, .9);
 }
 .notification.warning {
-  background-color: hsl(36, 100%, 40%);
+  background-color: hsla(36, 100%, 40%, .9);
 }
 .notification.info {
-  background-color: hsl(200, 100%, 40%);
+  background-color: hsla(200, 100%, 40%, .9);
 }
 .notification.success {
-  background-color: hsl(104, 100%, 40%);
+  background-color: hsla(104, 100%, 40%, .9);
 }
 .notification > .close {
   color: white;
@@ -208,12 +200,13 @@ body > #boardNavDesktop,
   text-decoration: underline line-through;
 }
 .inline {
-  border: 1px solid rgba(128, 128, 128, .5);
+  border: 1px solid;
   display: table;
   margin: 2px 0;
 }
 .inline .post {
   border: 0 !important;
+  background-color: transparent !important;
   display: table !important;
   margin: 0 !important;
   padding: 1px 2px !important;
@@ -260,7 +253,7 @@ body > #boardNavDesktop,
 }
 .filter-highlight > .reply.qphl {
   box-shadow: -5px 0 rgba(255, 0, 0, .5),
-              0 0 0 2px rgba(216, 94, 49, .7)
+              0 0 0 2px rgba(216, 94, 49, .7);
 }
 
 /* Thread & Reply Hiding */
@@ -292,7 +285,6 @@ body > #boardNavDesktop,
   outline: none;
 }
 .entry {
-  border-bottom: 1px solid rgba(0, 0, 0, .25);
   cursor: pointer;
   display: block;
   outline: none;
@@ -301,12 +293,6 @@ body > #boardNavDesktop,
   text-decoration: none;
   white-space: nowrap;
 }
-.entry:last-child {
-  border: none;
-}
-.focused.entry {
-  background: rgba(255, 255, 255, .33);
-}
 .entry.has-submenu {
   padding-right: 20px;
 }

css/tomorrow.css

@@ -0,0 +1,28 @@
+/* general */
+:root.tomorrow .dialog {
+  background-color: #282A2E;
+  border-color: #111;
+}
+
+/* Header */
+:root.tomorrow #header-bar {
+  font-size: 9pt;
+  color: #C5C8C6;
+}
+:root.tomorrow #header-bar a {
+  color: #81A2BE;
+}
+
+/* quote */
+:root.tomorrow .inline {
+  border-color: #111;
+  background-color: rgba(0, 0, 0, .14);
+}
+
+/* Menu */
+:root.tomorrow .entry:not(:last-child) {
+  border-bottom: 1px solid #111;
+}
+:root.tomorrow .focused.entry {
+  background: rgba(0, 0, 0, .33);
+}

css/yotsuba-b.css

@@ -0,0 +1,28 @@
+/* general */
+:root.yotsuba-b .dialog {
+  background-color: #D6DAF0;
+  border-color: #B7C5D9;
+}
+
+/* Header */
+:root.yotsuba-b #header-bar {
+  font-size: 9pt;
+  color: #89A;
+}
+:root.yotsuba-b #header-bar a {
+  color: #34345C;
+}
+
+/* quote */
+:root.yotsuba-b .inline {
+  border-color: #B7C5D9;
+  background-color: rgba(255, 255, 255, .14);
+}
+
+/* Menu */
+:root.yotsuba-b .entry:not(:last-child) {
+  border-bottom: 1px solid #B7C5D9;
+}
+:root.yotsuba-b .focused.entry {
+  background: rgba(255, 255, 255, .33);
+}

css/yotsuba.css

@@ -0,0 +1,28 @@
+/* general */
+:root.yotsuba .dialog {
+  background-color: #F0E0D6;
+  border-color: #D9BFB7;
+}
+
+/* Header */
+:root.yotsuba #header-bar {
+  font-size: 9pt;
+  color: #B86;
+}
+:root.yotsuba #header-bar a {
+  color: #800000;
+}
+
+/* quote */
+:root.yotsuba .inline {
+  border-color: #D9BFB7;
+  background-color: rgba(255, 255, 255, .14);
+}
+
+/* Menu */
+:root.yotsuba .entry:not(:last-child) {
+  border-bottom: 1px solid #D9BFB7;
+}
+:root.yotsuba .focused.entry {
+  background: rgba(255, 255, 255, .33);
+}

lib/ui.coffee

@@ -1,7 +1,7 @@
 UI = (->
   dialog = (id, position, html) ->
     el = d.createElement 'div'
-    el.className = 'reply dialog'
+    el.className = 'dialog'
     el.innerHTML = html
     el.id        = id
     el.style.cssText = localStorage.getItem("#{g.NAMESPACE}#{id}.position") or position
@@ -23,7 +23,7 @@ UI = (->
 
     makeMenu: ->
       menu = $.el 'div',
-        className: 'reply dialog'
+        className: 'dialog'
         id:        'menu'
         tabIndex:  0
       $.on menu, 'click', (e) -> e.stopPropagation()
@@ -89,7 +89,7 @@ UI = (->
         # Reset sub menu, remove irrelevant entries.
         $.rm submenu
       submenu = $.el 'div',
-        className: 'reply dialog submenu'
+        className: 'dialog submenu'
       for subEntry in entry.subEntries
         @insertEntry subEntry, submenu, data
       $.add entry.el, submenu

src/features.coffee

@@ -4,7 +4,7 @@ Header =
 
     @headerEl = $.el 'div',
       id:        'header'
-      innerHTML: '<div id=header-bar></div><div id=notifications></div>'
+      innerHTML: '<div id=header-bar class=dialog></div><div id=notifications></div>'
 
     headerBar = $('#header-bar', @headerEl)
     if $.get 'autohideHeaderBar', false
@@ -1733,7 +1733,7 @@ QuotePreview =
 
     qp = $.el 'div',
       id: 'qp'
-      className: 'reply dialog'
+      className: 'dialog'
     $.add d.body, qp
     Get.postClone board, threadID, postID, qp, Get.contextFromLink @
 

src/main.coffee

@@ -337,7 +337,7 @@ Main =
           break
       $.addClass doc, style
     $.addClass doc, $.engine
-    $.addClass doc, 'fourchan_x'
+    $.addClass doc, 'fourchan-x'
     setStyle()
     if MutationObserver = window.MutationObserver or window.WebKitMutationObserver or window.OMutationObserver
       observer = new MutationObserver setStyle
@@ -349,7 +349,7 @@ Main =
       $.on mainStyleSheet, 'DOMAttrModified', setStyle
 
   initReady: ->
-    unless $.hasClass doc, 'fourchan_x'
+    unless $.hasClass doc, 'fourchan-x'
       # Something might go wrong!
       Main.initStyle()
 
@@ -435,6 +435,14 @@ Main =
       textContent: error
     [message, error]
 
-  css: """<%= grunt.file.read('css/style.css') %>"""
+  css: """
+  <%= grunt.file.read('css/style.css') %>
+  <%= grunt.file.read('css/yotsuba.css') %>
+  <%= grunt.file.read('css/yotsuba-b.css') %>
+  <%= grunt.file.read('css/futaba.css') %>
+  <%= grunt.file.read('css/burichan.css') %>
+  <%= grunt.file.read('css/tomorrow.css') %>
+  <%= grunt.file.read('css/photon.css') %>
+  """
 
 Main.init()