This will do until I feel like putting some polish into this.

src/General/Settings.coffee

@@ -526,6 +526,9 @@ Settings =
         else
           input.value   = val
           $.on input, 'change', cb.style.value
+        
+        if key is 'Icon Orientation'
+          $.on input, 'change', Style.iconPositions
 
       Rice.nodes nodes
       $.add section, nodes

src/General/css/icons.base.css

@@ -1,9 +1,8 @@
-
 #navtopright .exlinksOptionsLink::after,
 #appchanOptions,
 body > div.navLinks > a:first-of-type::after,
-#{if Conf['Slideout Watcher'] then '#watcher::after,' else ''}
+.slideout-watcher #watcher::after,
-#{if Conf['Announcements'] is 'slideout' then '#globalMessage::after,' else ''}
+.announcements-slideout #globalMessage::after,
 #boardNavDesktopFoot::after,
 body > a[style="cursor: pointer; float: right;"]::after,
 #img-controls,
@@ -16,7 +15,28 @@ body > a[style="cursor: pointer; float: right;"]::after,
   width: 15px;
   height: 15px;
   content: "";
-  opacity: #{if Conf['Invisible Icons'] then 0 else 0.5};
+  opacity: 0.5;
+}
+body::after {
+  content: "";
+  display: block;
+  position: fixed;
+  z-index: 5;
+  width: 18px;
+  height: 18px;
+}
+.invisible-icons #navtopright .exlinksOptionsLink::after,
+.invisible-icons #appchanOptions,
+.invisible-icons body > div.navLinks > a:first-of-type::after,
+.invisible-icons.slideout-watcher #watcher::after,
+.invisible-icons.announcements-slideout #globalMessage::after,
+.invisible-icons #boardNavDesktopFoot::after,
+.invisible-icons body > a[style="cursor: pointer; float: right;"]::after,
+.invisible-icons #img-controls,
+.invisible-icons #main-menu,
+.invisible-icons #catalog::after,
+.invisible-icons #fappeTyme {
+  opacity: 0;
 }
 #navtopright .exlinksOptionsLink,
 body > div.navLinks > a:first-of-type,
@@ -30,8 +50,8 @@ body > a[style="cursor: pointer; float: right;"],
 }
 #navtopright .exlinksOptionsLink:hover,
 body > div.navLinks > a:first-of-type:hover,
-#{if Conf['Slideout Watcher'] then '#watcher:hover,' else ''}
+.slideout-watcher #watcher:hover,
-#{if Conf['Announcements'] is 'slideout' then '#globalMessage:hover,' else ''}
+.announcements-slideout #globalMessage:hover,
 #boardNavDesktopFoot:hover,
 body > a[style="cursor: pointer; float: right;"]:hover,
 #img-controls,
@@ -46,10 +66,10 @@ body > div.navLinks > a:first-of-type::after {
   cursor: pointer;
   background-position: 0 -15px;
 }
-#watcher::after {
+.slideout-watcher #watcher::after {
   background-position: 0 -30px;
 }
-#globalMessage::after {
+.announcements-slideout #globalMessage::after {
   background-position: 0 -45px;
 }
 #boardNavDesktopFoot::after {
@@ -74,18 +94,18 @@ body > a[style="cursor: pointer; float: right;"]::after {
   background-position: 0 -135px;
 }
 #boardNavDesktopFoot:hover::after,
-#globalMessage:hover::after,
+.announcements-slideout #globalMessage:hover::after,
 #img-controls:hover,
 #navlinks a:hover,
 #appchanOptions:hover,
 #main-menu:hover,
 #navtopright .exlinksOptionsLink:hover::after,
 #qr #qrtab,
-#watcher:hover::after,
+.slideout-watcher #watcher:hover::after,
 .thumbnail#selected,
 body > a[style="cursor: pointer; float: right;"]:hover::after,
 div.navLinks > a:first-of-type:hover::after,
 #catalog:hover::after,
 #fappeTyme:hover {
-  opacity: 1;
+  opacity: 1 !important;
 }

src/General/css/icons.horz.css

@@ -1,5 +1,7 @@
-
 /* 4chan X Options */
+body::after {
+  #{align}: #{position[i] - 1}px;
+}
 #appchanOptions {
   #{align}: #{position[i++]}px;
 }
@@ -8,11 +10,11 @@
   #{align}: #{position[i++]}px;
 }
 /* Global Message */
-#globalMessage::after {
+.announcements-slideout #globalMessage::after {
   #{align}: #{position[i++]}px;
 }
 /* Watcher */
-#watcher::after {
+.slideout-watcher #watcher::after {
   #{align}: #{position[i++]}px;
 }
 /* ExLinks */
@@ -54,11 +56,15 @@ div.navLinks > a:first-of-type::after {
 #navlinks a:first-of-type {
   #{align}: #{position[i++]}px;
 }
+body::after {
+  width: #{position[i] - 2}px;
+  top: 0;
+}
 #boardNavDesktopFoot::after,
 #navtopright .exlinksOptionsLink::after,
 #appchanOptions,
-#watcher::after,
+.slideout-watcher #watcher::after,
-#globalMessage::after,
+.announcements-slideout #globalMessage::after,
 #img-controls,
 #main-menu,
 #fappeTyme,
@@ -67,14 +73,18 @@ div.navLinks > a:first-of-type::after,
 body > a[style="cursor: pointer; float: right;"]::after {
   top: 1px !important;
 }
-#{if _conf["Announcements"] is "slideout" then "#globalMessage," else ""}
+.slideout-watcher #globalMessage,
-#{if _conf["Slideout Watcher"] then "#watcher," else ""}
+.slideout-watcher #watcher,
 #boardNavDesktopFoot {
   top: 16px !important;
 }
-.fixed.top #header-bar#{if _conf['Pagination'] is 'top' or _conf['Pagination'] is 'sticky top' then ',\n.pagelist' else ''} {
+.fourchan-ss-navigation.fixed.top #header-bar,
-  #{if _conf['4chan SS Navigation']
+.fourchan-ss-navigation.pagination-top .pagelist,
-    "padding-#{align}: #{iconOffset}px;"
+.fourchan-ss-navigation.pagination-sticky-top .pagelist {
-  else
+  padding-#{align}: #{iconOffset}px;
-    "margin-#{align}: #{iconOffset}px;"}
+}
-}\n
+.fixed.top:not(.fourchan-ss-navigation) #header-bar,
+.pagination-top:not(.fourchan-ss-navigation) .pagelist,
+.pagination-sticky-top:not(.fourchan-ss-navigation) .pagelist {
+  margin-#{align}: #{iconOffset}px;
+}

src/General/css/icons.vert.css

@@ -1,5 +1,7 @@
-
 /* Expand Images */
+body::after {
+  top: #{position[i] - 1}px;
+}
 #img-controls {
   top: #{position[i++]}px;
 }
@@ -17,12 +19,13 @@
   top: #{position[i++]}px;
 }
 /* Global Message */
-#globalMessage,
+.announcements-slideout #globalMessage,
-#globalMessage::after {
+.announcements-slideout #globalMessage::after {
   top: #{position[i++]}px;
 }
 /* Watcher */
-#{if _conf["Slideout Watcher"] then "#watcher, #watcher::after" else ""} {
+.slideout-watcher #watcher,
+.slideout-watcher #watcher::after {
   top: #{position[i++]}px !important;
 }
 /* 4sight */
@@ -52,6 +55,10 @@ div.navLinks > a:first-of-type::after {
 #navlinks a:last-of-type {
   top: #{position[i++]}px !important;
 }
+body::after {
+  height: #{position[i] - 2}px;
+  #{align}: 2px;
+}
 #navlinks a,
 #navtopright .exlinksOptionsLink::after,
 #appchanOptions,
@@ -70,13 +77,21 @@ div.navLinks > a:first-of-type::after {
 #globalMessage,
 #watcher {
   <%= sizing %>: border-box;
-  width: #{Style.sidebar - 18}px !important;
+  width: 230px !important;
-  min-width: 230px;
   #{align}: 18px !important;
 }
-.fixed.top #header-bar#{if _conf['Pagination'] is 'top' or _conf['Pagination'] is 'sticky top' then ',\n.pagelist' else ''} {
+.sidebar-large #boardNavDesktopFoot,
-  #{if _conf['4chan SS Navigation']
+.sidebar-large #globalMessage,
-    "padding-#{align}: #{iconOffset}px;"
+.sidebar-large #watcher {
-  else
+  width: 288px !important;
-    "margin-#{align}: #{iconOffset}px;"}
+}
+.fourchan-ss-navigation.fixed.top #header-bar,
+.fourchan-ss-navigation.pagination-top .pagelist,
+.fourchan-ss-navigation.pagination-sticky-top .pagelist {
+  padding-#{align}: #{iconOffset}px;
+}
+.fixed.top:not(.fourchan-ss-navigation) #header-bar,
+.pagination-top:not(.fourchan-ss-navigation) .pagelist,
+.pagination-sticky-top:not(.fourchan-ss-navigation) .pagelist {
+  margin-#{align}: #{iconOffset}px;
 }

src/General/css/theme.css

@@ -421,6 +421,10 @@ data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><filter id='filters'
   background: #{theme["Highlighted Reply Background"]};
   border: 1px solid #{theme["Highlighted Reply Border"]};
 }
+body::after {
+  background: #{backgroundC};
+}
+.fourchan-ss-sidebar body::after,
 .fourchan-ss-sidebar body::before {
   background: none repeat scroll 0% 0% rgba(#{if background = new Style.color Style.colorToHex theme["Reply Background"] then background.shiftRGB -18}, 0.8);
 }

src/Theming/Mascots.coffee

@@ -1,15 +1,24 @@
 MascotTools =
-  init: (mascot = Conf[g.MASCOTSTRING][Math.floor(Math.random() * Conf[g.MASCOTSTRING].length)]) ->
+  init: (mascot) ->
+    unless mascot and typeof mascot is string
+      mascot = Conf[g.MASCOTSTRING][Math.floor(Math.random() * Conf[g.MASCOTSTRING].length)]
 
     Conf['mascot'] = mascot
     @el = el = $('#mascot img', d.body)
 
-    if !Conf['Mascots'] or (g.CATALOG and Conf['Hide Mascots on Catalog'])
+    if !Conf['Mascots'] or (Conf['Hide Mascots on Catalog'] and g.VIEW is 'catalog')
       return if el then el.src = "" else null
 
+    pfOffset = if Conf['4chan SS Navigation'] and
+      ((Conf['Bottom Header'] and Conf['Fixed Header']) or
+      (g.VIEW is 'index' and Conf['Pagination'] is 'sticky bottom'))
+        1.5
+    else
+        0
+      
     position = "#{
       if Conf['Mascot Position'] is 'bottom' or (Conf['Mascot Position'] is "default" and Conf['Post Form Style'] isnt "fixed")
-        0 + Style.pfOffset
+        0 + pfOffset
       else
         20.1 + (
           if Conf['Show Post Form Header'] and ['fixed', 'transparent fade', 'slideout'].contains Conf['Post Form Style']
@@ -20,7 +29,7 @@ MascotTools =
             0.2
           else
             0
-        ) + Style.pfOffset
+        ) + pfOffset
     }em"
 
     # If we're editting anything, let's not change mascots any time we change a value.
@@ -54,6 +63,9 @@ MascotTools =
       filters.push '<feColorMatrix id="color" type="saturate" values="0" />'
 
     Style.mascot.textContent = """
+.sidebar-location-left #mascot img {
+  <%= sizing %>transform: scaleX(-1);
+}
 #mascot img {
   position: fixed;
   z-index: #{
@@ -62,7 +74,6 @@ MascotTools =
     else
       '-1'
   };
-  #{if Style.sidebarLocation[0] is "left" then "<%= sizing %>transform: scaleX(-1);" else ""}
   bottom: #{
     if mascot.position is 'top'
       'auto'

src/Theming/Style.coffee

@@ -70,14 +70,14 @@ Style =
     , 500
 
   setup: ->
-    theme = Themes[Conf['theme']]
+    theme = Themes[Conf['theme']] or Themes['Yotsuba B']
     $.extend Style,
-      layoutCSS:    $.addStyle Style.layout(),     'layout'
+      layoutCSS:    $.addStyle Style.layout,       'layout'
       themeCSS:     $.addStyle Style.theme(theme), 'theme'
       icons:        $.addStyle "",                 'icons'
       paddingSheet: $.addStyle "",                 'padding'
       mascot:       $.addStyle "",                 'mascotSheet'
-      dynamic:      $.addStyle Style.dynamic(),    'dynamic'
+      dynamicCSS:   $.addStyle Style.dynamic(),    'dynamic'
 
     # Non-customizable
     $.addStyle JSColor.css(), 'jsColor'
@@ -118,11 +118,11 @@ Style =
   addStyle: (theme) ->
     _conf = Conf
     unless theme
-      theme = Themes[_conf['theme']]
+      theme = Themes[_conf['theme']] or Themes['Yotsuba B']
 
     MascotTools.init _conf["mascot"]
-    Style.layoutCSS.textContent = Style.layout()
+    Style.dynamicCSS.textContent = Style.dynamic()
-    Style.themeCSS.textContent = Style.theme(theme)
+    Style.themeCSS.textContent   = Style.theme(theme)
     Style.iconPositions()
     Style.padding()
 
@@ -161,66 +161,20 @@ Style =
 
     return """filter: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><filter id='filters' color-interpolation-filters='sRGB'><feColorMatrix values='#{string} 0 0 0 1 0' /></filter></svg>#filters");"""
 
-  layout: ->
+  layout: """<%= grunt.file.read('src/General/css/layout.css') %>"""
-    # Remove after classes rewrite
-    _conf = Conf
-    
-    Style.pfOffset = if _conf['4chan SS Navigation'] and
-      ((_conf['Bottom Header'] and _conf['Fixed Header']) or
-      (g.VIEW is 'index' and _conf['Pagination'] is 'sticky bottom'))
-        1.5
-    else
-        0
-
-    Style.sidebar = {
-      minimal:  20
-      hide:     2
-      normal:   252
-      large:    303
-    }[_conf['Sidebar']]
-
-    Style.sidebarLocation = if _conf["Sidebar Location"] is "left"
-      ["left",  "right"]
-    else
-      ["right", "left" ]
-
-    if _conf['editMode'] is "theme"
-      editSpace = {}
-      editSpace[Style.sidebarLocation[1]] = 300
-      editSpace[Style.sidebarLocation[0]] = 0
-    else
-      editSpace =
-        left:   0
-        right:  0
-
-    css = """<%= grunt.file.read('src/General/css/layout.css') %>"""
   
   dynamic: ->
     _conf   = Conf
-    
-    Style.pfOffset = if _conf['4chan SS Navigation'] and
-      ((_conf['Bottom Header'] and _conf['Fixed Header']) or
-      (g.VIEW is 'index' and _conf['Pagination'] is 'sticky bottom'))
-        1.5
-    else
-        0
 
-    Style.sidebar = {
+    sidebarLocation = if _conf["Sidebar Location"] is "left"
-      minimal:  20
-      hide:     2
-      normal:   252
-      large:    303
-    }[_conf['Sidebar']]
-
-    Style.sidebarLocation = if _conf["Sidebar Location"] is "left"
       ["left",  "right"]
     else
       ["right", "left" ]
 
     if _conf['editMode'] is "theme"
       editSpace = {}
-      editSpace[Style.sidebarLocation[1]] = 300
+      editSpace[sidebarLocation[1]] = 300
-      editSpace[Style.sidebarLocation[0]] = 0
+      editSpace[sidebarLocation[0]] = 0
     else
       editSpace =
         left:   0
@@ -240,7 +194,13 @@ Style =
   iconPositions: ->
     css = """<%= grunt.file.read('src/General/css/icons.base.css') %>"""
     i = 0
-    align = Style.sidebarLocation[0]
+    align = Conf['Sidebar Location']
+    sidebar = {
+      minimal:  20
+      hide:     2
+      normal:   252
+      large:    303
+    }[_conf['Sidebar']]
 
     _conf = Conf
     notCatalog = g.VIEW isnt 'catalog'
@@ -287,7 +247,7 @@ Style =
         position[position.length - 1] - (if _conf['4chan SS Navigation']
           0
         else
-          Style.sidebar + parseInt(_conf["Right Thread Padding"], 10))
+          sidebar + parseInt(_conf["Right Thread Padding"], 10))
       if iconOffset < 0 then iconOffset = 0
 
       css += """<%= grunt.file.read('src/General/css/icons.horz.css') %>"""
@@ -295,7 +255,7 @@ Style =
     else
 
       position = aligner(
-        2 + (if _conf["4chan Banner"] is "at sidebar top" then (Style.logoOffset + 19) else 0)
+        2
         [
           notEither and _conf['Image Expansion']
           true
@@ -324,7 +284,7 @@ Style =
         if _conf['4chan SS Navigation']
           0
         else
-          Style.sidebar + parseInt _conf[align.capitalize() + " Thread Padding"], 10
+          sidebar + parseInt _conf[align.capitalize() + " Thread Padding"], 10
       )
 
       css += """<%= grunt.file.read('src/General/css/icons.vert.css') %>"""