It continues~

src/General/Header.coffee

@@ -269,13 +269,16 @@ Header =
       top -= headRect.top + headRect.height
     window.scrollBy 0, top
 
-  addShortcut: (el, order) ->
+  addShortcut: do ->
-    order = order[if Conf["Icon Orientation"] is "horizontal" then 0 else 1]
+    span = $.el 'span',
-    shortcut = $.el 'span',
+      className: 'shortcut'
-      className: 'shortcut brackets-wrap'
+  
-    shortcut.style.cssText = "order: #{order}; -webkit-order: #{order};"
+    (el, order) ->
-    $.add shortcut, el
+      order = order[if Conf["Icon Orientation"] is "horizontal" then 0 else 1]
-    $.prepend Header.shortcuts, shortcut
+      shortcut = span.cloneNode()
+      shortcut.style.cssText = "order: #{order}; -webkit-order: #{order};"
+      $.add shortcut, el
+      $.prepend Header.shortcuts, shortcut
 
   menuToggle: (e) ->
     Header.menu.toggle e, @, g

src/General/css/icons.base.css

@@ -1,30 +1,35 @@
 #main-menu,
-body > div.navLinks > a:first-of-type::after,
+#returnIcon,
-.slideout-watcher #sowIcon,
+#sowIcon,
-.announcements-slideout #psaIcon,
+#psaIcon,
 #slideNav,
 #img-controls,
 #catalog,
-#fappeTyme {
+#fappeTyme,
+.shortcut .icon {
   z-index: 18;
   display: inline-block;
   width: 15px;
   height: 15px;
   content: "";
   opacity: 0.5;
+  cursor: pointer;
 }
 .invisible-icons #main-menu,
-.invisible-icons body > div.navLinks > a:first-of-type::after,
+.invisible-icons #returnIcon,
-.invisible-icons.slideout-watcher #sowIcon,
+.invisible-icons #sowIcon,
-.invisible-icons.announcements-slideout #psaIcon,
+.invisible-icons #psaIcon,
 .invisible-icons #slideNav,
 .invisible-icons #img-controls,
 .invisible-icons #catalog,
-.invisible-icons #fappeTyme {
+.invisible-icons #fappeTyme,
+.invisible-icons #navPrev,
+.invisible-icons #navNext,
+.invisible-icons .shortcut .icon {
   opacity: 0;
 }
 #navtopright .exlinksOptionsLink,
-body > div.navLinks > a:first-of-type,
+#returnIcon,
 #{if Conf['Slideout Watcher'] then '#thread-watcher,' else ''}
 #{if Conf['Announcements'] is 'slideout' then '#globalMessage,' else ''}
 #boardNavDesktopFoot,
@@ -32,27 +37,24 @@ body > div.navLinks > a:first-of-type,
   z-index: 16;
 }
 #navtopright .exlinksOptionsLink:hover,
-body > div.navLinks > a:first-of-type:hover,
+#returnIcon:hover,
-.slideout-watcher #thread-watcher:hover,
+#thread-watcher:hover,
-.announcements-slideout #globalMessage:hover,
+#globalMessage:hover,
 #slideNav:hover,
 #img-controls,
 #catalog:hover {
   z-index: 17;
 }
 #main-menu {
-  visibility: visible;
   background-position: 0 0;
-  cursor: pointer;
 }
-body > div.navLinks > a:first-of-type::after {
+#returnIcon {
-  cursor: pointer;
   background-position: 0 -15px;
 }
-.slideout-watcher #sowIcon {
+#sowIcon {
   background-position: 0 -30px;
 }
-.announcements-slideout #psaIcon {
+#psaIcon {
   background-position: 0 -45px;
 }
 #slideNav {
@@ -61,27 +63,25 @@ body > div.navLinks > a:first-of-type::after {
 #img-controls {
   background-position: 0 -90px;
 }
-#navtopright .exlinksOptionsLink::after {
-  background-position: 0 -105px;
-}
 #catalog {
-  visibility: visible;
   background-position: 0 -120px;
 }
 #fappeTyme {
   background-position: 0 -135px;
 }
 #slideNav:hover,
-.announcements-slideout #psaIcon:hover,
+#psaIcon:hover,
 #img-controls:hover,
-#navlinks a:hover,
+#navPrev:hover,
+#navNext:hover,
 #appchanOptions:hover,
 #main-menu:hover,
 #qr #qrtab,
-.slideout-watcher #sowIcon:hover,
+#sowIcon:hover,
 .thumbnail#selected,
-div.navLinks > a:first-of-type:hover::after,
+#returnIcon:hover,
-#catalog:hover::after,
+#catalog:hover,
-#fappeTyme:hover {
+#fappeTyme:hover,
+.shortcut .icon:hover {
   opacity: 1 !important;
 }

src/General/css/layout.css

@@ -55,7 +55,6 @@ body > hr {
   display: none !important;
 }
 /* Hidden UI */
-#navlinks,
 #navtopright,
 #svg_filters,
 .cataloglink,
@@ -184,19 +183,18 @@ th {
   content: "] ";
 }
 /* Thread / Reply Nav */
-#navlinks a {
+#navPrev,
-  position: fixed;
+#navNext {
-  z-index: 12;
-  opacity: 0.5;
   display: inline-block;
   border-right: 6px solid transparent;
   border-left: 6px solid transparent;
-  margin: 1.5px;
+  opacity: 0.5;
+  margin: 3px 2px;
 }
-#navlinks a:first-of-type {
+#navPrev {
   border-bottom: 11px solid rgb(130,130,130);
 }
-#navlinks a:last-of-type {
+#navNext {
   border-top: 11px solid rgb(130,130,130);
 }
 /* Header */
@@ -256,9 +254,17 @@ th {
   word-spacing: 2px;
 }
 #shortcuts {
-  float: right;
+  position: fixed;
   display: flex;
   display: -webkit-flex;
+  top: 1px;
+}
+.sidebar-location-right #shortcuts {
+  right: 0;
+  text-align: right;
+}
+.sidebar-location-left #shortcuts {
+  left: 0;
 }
 .fixed #header-bar.autohide {
   z-index: 24;
@@ -487,7 +493,7 @@ th {
 }
 /* Icons */
 .icons-4chan-ss #main-menu,
-.icons-4chan-ss .navLinks > a:first-of-type::after,
+.icons-4chan-ss #returnIcon,
 .icons-4chan-ss #sowIcon,
 .icons-4chan-ss #psaIcon,
 .icons-4chan-ss #slideNav,
@@ -497,7 +503,7 @@ th {
   background-image: url("data:image/png;base64,<%= grunt.file.read("src/General/img/icons/4chanSS.png",  {encoding: "base64"}) %>");
 }
 .icons-oneechan #main-menu,
-.icons-oneechan .navLinks > a:first-of-type::after,
+.icons-oneechan #returnIcon,
 .icons-oneechan #sowIcon,
 .icons-oneechan #psaIcon,
 .icons-oneechan #slideNav,

src/General/css/theme.css

@@ -341,15 +341,15 @@ a .name {
 #selectrice li:not(:first-of-type) {
   border-top: 1px solid #{if Style.lightTheme then "rgba(0,0,0,0.05)" else "rgba(255,255,255,0.025)"};
 }
-#navtopright .exlinksOptionsLink::after,
 #main-menu,
-.navLinks > a:first-of-type::after,
+#returnIcon,
-#thread-watcher::after,
+#sowIcon,
-#globalMessage::after,
+#psaIcon,
-#boardNavDesktopFoot::after,
+#slideNav,
 #img-controls,
 #catalog,
-#fappeTyme {
+#fappeTyme,
+.icon {
   #{unless Style.lightTheme then "<%= filter %>: url(\"#icons-filter\");" else ""}
 }
 .alternate-post-colors #threads > .thread:nth-of-type(2n+1),

src/Miscellaneous/Nav.coffee

@@ -21,8 +21,6 @@ Nav =
     $.on prev, 'click', @prev
     $.on next, 'click', @next
 
-    $.on d, '4chanXInitFinished', append
-
   prev: ->
     if g.VIEW is 'thread'
       window.scrollTo 0, 0

src/Monitoring/ThreadStats.coffee

@@ -8,7 +8,7 @@ ThreadStats =
         id:        'thread-stats'
         title: 'Post Count / File Count' + (if Conf["Page Count in Stats"] then " / Page Count" else "")
       $.ready ->
-        Header.addShortcut sc, [10,10]
+        Header.addShortcut [$.tn('['), sc, $.tn("]\u00A0")], [10,10]
     else 
       @dialog = sc = UI.dialog 'thread-stats', 'bottom: 0px; right: 0px;',
         "<div class=move title='Post Count / File Count#{if Conf["Page Count in Stats"] then " / Page Count" else ""}'><span id=post-count>0</span> / <span id=file-count>0</span>#{if Conf["Page Count in Stats"] then " / <span id=page-count>0</span>" else ""}</div>"

src/Monitoring/ThreadUpdater.coffee

@@ -9,7 +9,7 @@ ThreadUpdater =
         innerHTML: "<span id=update-status></span><span id=update-timer title='Update now'></span>"
         id:        'updater'
       $.ready ->
-        Header.addShortcut sc [0,0]
+        Header.addShortcut [$.tn('['), sc, $.tn("]\u00A0")], [0,0]
     else 
       @dialog = sc = UI.dialog 'updater', 'bottom: 0px; left: 0px;',
         "<div class=move><span id=update-status></span><span id=update-timer title='Update now'></span></div>"

src/Posting/QuickReply.coffee

@@ -17,8 +17,8 @@ QR =
     return unless Conf['Header Shortcut'] or Conf['Page Shortcut']
 
     sc = $.el 'a',
-      className: "qr-shortcut icon icon-comment #{unless Conf['Persistent QR'] then 'disabled' else ''}"
+      className: "qr-shortcut icon #{unless Conf['Persistent QR'] then 'disabled' else ''}"
-      textContent: 'QR'
+      textContent: '\uf075'
       title: 'Quick Reply'
       href: 'javascript:;'
 

src/Theming/Style.coffee

@@ -133,7 +133,11 @@ Style =
   silhouette: ([fg]) ->
     "0 0 0 0 #{fg.r} 0 0 0 0 #{fg.g} 0 0 0 0 #{fg.b}"
 
-  layout: """<%= grunt.file.read('src/General/css/layout.css').replace(/\s+/g, ' ').trim() %>"""
+  layout: """<%=
+    grunt.file.read('src/General/css/layout.css').replace(/\s+/g, ' ').trim()
+    + ' ' +
+    grunt.file.read('src/General/css/font-awesome.css').replace(/\s+/g, ' ').replace(/\\/g, '\\\\').trim()
+  %>"""
 
   dynamic: ->
     sidebarLocation = if Conf["Sidebar Location"] is "left"
@@ -174,7 +178,7 @@ Style =
     # Slideout Navigation
     slideNav = $.el 'i', id: 'slideNav'
     $.add $.id('boardNavDesktopFoot'), slideNav
-    Header.addShortcut slideNav, [120, 110] if Conf['Slideout Navigation'] isnt 'hide'
+    Header.addShortcut slideNav, [50, 110] if Conf['Slideout Navigation'] isnt 'hide'
 
     # Announcements
     if Conf['Announcements'] is 'slideout'