Progress is pretty.

LICENSE

@@ -1,5 +1,5 @@
 /*
-* appchan x - Version 2.0.6 - 2013-05-30
+* appchan x - Version 2.0.6 - 2013-05-31
 *
 * Licensed under the MIT license.
 * https://github.com/zixaphir/appchan-x/blob/master/LICENSE

src/General/css/dynamic.css

@@ -1,7 +1,6 @@
-body {
+#boardNavDesktopFoot a,
-  padding: 0 #{parseInt(_conf["Right Thread Padding"], 10) + editSpace["right"]}px 0 #{parseInt(_conf["Left Thread Padding"], 10) + editSpace["left"]}px;
-}
 #header-bar a,
+.deleteform::before,
 .hide-navigation-decorations .pages a,
 body,
 button,
@@ -9,12 +8,36 @@ input,
 textarea {
   font-size: #{parseInt _conf["Font Size"], 10}px;
 }
+#boardTitle,
+.boardTitle a {
+  font-size: #{parseInt(_conf["Font Size"], 10) + 10}px;
+}
+.boardSubtitle,
+.boardSubtitle a {
+  font-size: #{parseInt(_conf["Font Size"], 10) - 1}px;
+}
 body,
 button,
 input,
 textarea {
   font-family: #{_conf["Font"]};
 }
+body {
+  padding: 0 #{parseInt(_conf["Right Thread Padding"], 10) + editSpace["right"]}px 0 #{parseInt(_conf["Left Thread Padding"], 10) + editSpace["left"]}px;
+}
+.board > .thread {
+  margin: #{parseInt _conf["Top Thread Padding"], 10}px 0 #{parseInt _conf["Bottom Thread Padding"], 10}px 0;
+}
+.post,
+.summary {
+  margin-bottom: #{Conf["Post Spacing"]}px;
+}
+.thread > .threadContainer:last-of-type {
+  margin-bottom: -#{Conf["Post Spacing"]}px;
+}
+.postMessage {
+  margin: #{_conf['Vertical Post Padding']}px #{_conf['Horizontal Post Padding']}px;
+}
 .sidebar-location-left.sidebar-large:not(.fourchan-ss-navigation) #header-bar {
   left: #{303 + parseInt(_conf["Left Thread Padding"], 10) + editSpace["right"]}px;
   right: #{parseInt(_conf["Right Thread Padding"], 10) + editSpace["left"] + 2}px;"
@@ -79,3 +102,5 @@ textarea {
   right: #{2 + parseInt(_conf["Right Thread Padding"], 10) + editSpace["right"]}px;
   left: #{parseInt(_conf["Left Thread Padding"], 10) + editSpace["left"] + 2}px;"
 }
+/* Emoji */
+#{unless _conf["Emoji"] is "disable" then Emoji.css _conf["Emoji Position"] else ""}

src/General/css/layout.css

@@ -403,20 +403,20 @@ th {
   border: 0 none !important;
   text-align: right;
 }
-.pagination-on-side.post-form-style-fixed.show-post-form-header.post-form-decorations .pagelist,
+.pagination-on-side..post-form-style-fixed.show-post-form-header.post-form-decorations .pagelist,
-.pagination-on-side.post-form-style-transparent-fade.show-post-form-header.post-form-decorations .pagelist {
+.pagination-on-side..post-form-style-transparent-fade.show-post-form-header.post-form-decorations .pagelist {
   bottom: 23.3em;
 }
-.pagination-on-side.post-form-style-fixed.show-post-form-header .pagelist,
+.pagination-on-side..post-form-style-fixed.show-post-form-header .pagelist,
-.pagination-on-side.post-form-style-transparent-fade.show-post-form-header .pagelist {
+.pagination-on-side..post-form-style-transparent-fade.show-post-form-header .pagelist {
   bottom: 23.1em;
 }
-.pagination-on-side.post-form-style-fixed.post-form-decorations .pagelist,
+.pagination-on-side..post-form-style-fixed.post-form-decorations .pagelist,
-.pagination-on-side..post-form-style-transparent-fade.post-form-decorations .pagelist {
+.pagination-on-side...post-form-style-transparent-fade.post-form-decorations .pagelist {
   bottom: 21.8em;
 }
-.pagination-on-side.post-form-style-fixed .pagelist,
+.pagination-on-side..post-form-style-fixed .pagelist,
-.pagination-on-side.post-form-style-transparent-fade .pagelist {
+.pagination-on-side..post-form-style-transparent-fade .pagelist {
   bottom: 21.6em;
 }
 .sidebar-location-left.pagination-on-side .pagelist {
@@ -470,7 +470,7 @@ th {
   display: inline-block;
   margin: 0 3px;
 }
-/* Banner */
+/* Banner & Board Title */
 .boardBanner {
   line-height: 0;
 }
@@ -490,7 +490,7 @@ th {
   bottom: -100%;
   content: '';
   left: 0;
-  mask: url(\"data:image/svg+xml,<svg version='1.1' xmlns='http://www.w3.org/2000/svg'><defs><linearGradient gradientUnits='objectBoundingBox' id='gradient' x2='0' y2='1'><stop stop-offset='0'/><stop stop-color='white' offset='1'/></linearGradient><mask id='mask' maskUnits='objectBoundingBox' maskContentUnits='objectBoundingBox' x='0' y='0' width='100%' height='100%'> <rect fill='url(%23gradient)' width='1' height='1' /></mask></defs></svg>#mask\");
+  mask: url("data:image/svg+xml,<svg version='1.1' xmlns='http://www.w3.org/2000/svg'><defs><linearGradient gradientUnits='objectBoundingBox' id='gradient' x2='0' y2='1'><stop stop-offset='0'/><stop stop-color='white' offset='1'/></linearGradient><mask id='mask' maskUnits='objectBoundingBox' maskContentUnits='objectBoundingBox' x='0' y='0' width='100%' height='100%'> <rect fill='url(%23gradient)' width='1' height='1' /></mask></defs></svg>#mask");
   opacity: 0.3;
   position: absolute;
   right: 0;
@@ -517,21 +517,33 @@ th {
 .fourchan-banner-under-post-form .boardBanner {
   bottom: 130px;
 }
+.board-title-at-sidebar-top.sidebar-location-right #boardTitle,
+.board-title-at-sidebar-bottom.sidebar-location-right #boardTitle,
+.board-title-under-post-form.sidebar-location-right #boardTitle,
 .fourchan-banner-at-sidebar-top.sidebar-location-right .boardBanner,
 .fourchan-banner-at-sidebar-bottom.sidebar-location-right .boardBanner,
 .fourchan-banner-under-post-form.sidebar-location-right .boardBanner {
   right: 2px;
 }
+.board-title-at-sidebar-top.sidebar-location-left #boardTitle,
+.board-title-at-sidebar-bottom.sidebar-location-left #boardTitle,
+.board-title-under-post-form.sidebar-location-left #boardTitle,
 .fourchan-banner-at-sidebar-top.sidebar-location-left .boardBanner,
 .fourchan-banner-at-sidebar-bottom.sidebar-location-left .boardBanner,
 .fourchan-banner-under-post-form.sidebar-location-left .boardBanner {
   left: 2px;
 }
+.board-title-at-sidebar-top #boardTitle,
+.board-title-at-sidebar-bottom #boardTitle,
+.board-title-under-post-form #boardTitle,
 .fourchan-banner-at-sidebar-top .boardBanner img,
 .fourchan-banner-at-sidebar-bottom .boardBanner img,
 .fourchan-banner-under-post-form .boardBanner img {
   width: 248px;
 }
+.board-title-at-sidebar-top.sidebar-large #boardTitle,
+.board-title-at-sidebar-bottom.sidebar-large #boardTitle,
+.board-title-under-post-form.sidebar-large #boardTitle,
 .fourchan-banner-at-sidebar-top.sidebar-large .boardBanner img,
 .fourchan-banner-at-sidebar-bottom.sidebar-large .boardBanner img,
 .fourchan-banner-under-post-form.sidebar-large .boardBanner img {
@@ -543,53 +555,39 @@ th {
   margin: 12px auto;
   text-align: center;
 }
-fourchan-banner-hide .boardBanner {
+:root:not(.board-subtitle) .boardSubtitle,
+.board-title-hide #boardTitle,
+.fourchan-banner-hide .boardBanner {
   display: none;
 }
-/* Board Title */
 #boardTitle {
-  font-size: #{parseInt(_conf["Font Size"], 10) + 10}px;
   text-align: center;
   z-index: 4;
-#{{
+}
-"at sidebar top": "
+.board-title-at-sidebar-top #boardTitle,
+.board-title-at-sidebar-bottom #boardTitle,
+.board-title-under-post-form #boardTitle {
   position: fixed;
-  #{Style.sidebarLocation[0]}: 2px;
+}
-  top: #{(if Style.logoOffset is 0 and _conf["Icon Orientation"] isnt "vertical" then 40 else 21) + Style.logoOffset}px;
+.board-title-at-sidebar-top.fourchan-banner-at-sidebar-top.sidebar-large.icon-orientation-vertical #boardTitle {
-  width: #{width}px;
+  top: 121px;
-"
+}
-
+.board-title-at-sidebar-top.fourchan-banner-at-sidebar-top.icon-orientation-vertical #boardTitle {
-"at sidebar bottom": "
+  top: 104px;
-  position: fixed;
+}
-  #{Style.sidebarLocation[0]}: 2px;
+.board-title-at-sidebar-top #boardTitle {
+  top: 40px;
+}
+.board-title-at-sidebar-top.icon-orientation-vertical #boardTitle {
+  top: 21px;
+}
+.board-title-at-sidebar-bottom .boardBanner {
   bottom: 280px;
-  width: #{width}px;
+}
-"
+.board-title-under-post-form .boardBanner {
-
-"under post form": "
-  position: fixed;
-  #{Style.sidebarLocation[0]}: 2px;
   bottom: 140px;
-  width: #{width}px;
-"
-
-"at top": "
-  margin: 12px 0;
-"
-
-"hide": "
-  display: none;
-"}[_conf["Board Title"]]}
 }
-.boardTitle a {
+/* Hover UI */
-  font-size: #{parseInt(_conf["Font Size"], 10) + 10}px;
-}
-.boardSubtitle,
-.boardSubtitle a {
-  font-size: #{parseInt(_conf["Font Size"], 10) - 1}px;
-}
-#{unless _conf['Board Subtitle'] then ".boardSubtitle { display: none; }" else ""}
-/* Dialogs */
 .move {
   cursor: pointer;
 }
@@ -623,22 +621,18 @@ fourchan-banner-hide .boardBanner {
   max-width: 100%;
   width: 100%;
 }
-#{if _conf['Images Overlap Post Form'] then "
+.images-overlap-post-form .full-image {
-.full-image {
   position: relative;
   z-index: 21;
-}" else ""
 }
 /* Delete Buttons */
-#{if _conf['Hide Delete UI'] then "
+.hide-delete-ui .deleteform,
-.deleteform,
+.hide-delete-ui .post:not(#exlinks-options) .rice {
-.post:not(#exlinks-options) .rice {
   display: none;
 }
-.postInfo {
+.hide-delete-ui .postInfo {
   padding: 0 0 0 3px;
 }
-" else "
 .deleteform {
   position: fixed;
   z-index: 18;
@@ -662,7 +656,6 @@ fourchan-banner-hide .boardBanner {
   position: fixed;
   bottom: 0;
   right: 0;
-  font-size: #{_conf['Font Size']}px;
   <%= sizing %>: border-box;
   height: 1.6em;
   width: 1.4em;
@@ -673,22 +666,25 @@ fourchan-banner-hide .boardBanner {
 }
 .deleteform input {
   margin: 0 1px 0 0;
-}"}
+}
 /* Slideout Navigation */
 #boardNavDesktopFoot {
   position: fixed;
-  width: #{width}px;
-  #{Style.sidebarLocation[0]}: 2px;
   text-align: center;
   font-size: 0;
   color: transparent;
   overflow: hidden;
   <%= sizing %>: border-box;
+  width: 248px;
 }
-#boardNavDesktopFoot a,
+.sidebar-large #boardNavDesktopFoot {
-#boardNavDesktopFoot a::after,
+  width: 299px;
-#boardNavDesktopFoot a::before {
+}
-  font-size: #{_conf['Font Size']}px;
+.sidebar-location-right #boardNavDesktopFoot {
+  right: 2px;
+}
+.sidebar-location-left #boardNavDesktopFoot {
+  left: 2px;
 }
 #boardNavDesktopFoot:hover {
   overflow-y: auto;
@@ -702,69 +698,35 @@ fourchan-banner-hide .boardBanner {
   padding: 0;
   border: 0 none;
 }
-#{{
+.slideout-navigation-compact #boardNavDesktopFoot {
-compact: "
-#boardNavDesktopFoot {
   word-spacing: 1px;
 }
-"
+.slideout-navigation-list #boardNavDesktopFoot a {
-list: "
-#boardNavDesktopFoot a {
   display: block;
 }
-#boardNavDesktopFoot:hover {
+.slideout-navigation-list #boardNavDesktopFoot:hover {
   max-height: 400px;
 }
-#boardNavDesktopFoot a::after {
+.slideout-navigation-list #boardNavDesktopFoot a::after {
   content: ' - ' attr(title);
 }
-#boardNavDesktopFoot a[href*='//boards.4chan.org/']::after,
+.slideout-navigation-list #boardNavDesktopFoot a[href*='//boards.4chan.org/']::after,
-#boardNavDesktopFoot a[href*='//rs.4chan.org/']::after {
+.slideout-navigation-list #boardNavDesktopFoot a[href*='//rs.4chan.org/']::after {
   content: '/ - ' attr(title);
 }
-#boardNavDesktopFoot a[href*='//boards.4chan.org/']::before,
+.slideout-navigation-list #boardNavDesktopFoot a[href*='//boards.4chan.org/']::before,
-#boardNavDesktopFoot a[href*='//rs.4chan.org/']::before {
+.slideout-navigation-list #boardNavDesktopFoot a[href*='//rs.4chan.org/']::before {
   content: '/';
 }
-"
+.slideout-navigation-hide #boardNavDesktopFoot {
-hide: "
-#boardNavDesktopFoot {
   display: none;
-}"}[_conf["Slideout Navigation"]]}
+}
 /* Watcher */
 #watcher {
   position: fixed;
   z-index: 14;
   padding: 2px;
-  #{if _conf["Rounded Edges"] then "border-radius: 3px;" else ""}
 }
-#watcher > div {
-  max-height: 1.3em;
-  overflow: hidden;
-}
-#{if _conf['Slideout Watcher'] then "
-#watcher {
-  width: #{width}px;
-  #{Style.sidebarLocation[0]}: 2px !important;
-  #{Style.sidebarLocation[1]}: auto !important;
-  <%= sizing %>: border-box;
-}
-#watcher .move {
-  cursor: default;
-  text-decoration: #{if _conf["Underline Links"] then "underline" else "none"};
-}
-#watcher > div {
-  overflow: hidden;
-}
-#watcher:hover {
-  overflow-y: auto;
-}
-#watcher:not(:hover) {
-  height: 0;
-  overflow: hidden;
-  border: 0 none;
-  padding: 0;
-}" else "
 #watcher {
   width: 200px;
 }
@@ -772,7 +734,46 @@ hide: "
   max-height: 200px;
   overflow: hidden;
 }
-"}
+.rounded-edges #watcher {
+  border-radius: 3px;
+}
+#watcher > div {
+  max-height: 1.3em;
+  overflow: hidden;
+}
+.slideout-watcher #watcher {
+  <%= sizing %>: border-box;
+  width: 248px;
+}
+.slideout-watcher.sidebar-large #boardNavDesktopFoot {
+  width: 299px;
+}
+.slideout-watcher.sidebar-location-right #watcher {
+  left: auto;
+  right: 2px;
+}
+.slideout-watcher.sidebar-location-left #watcher {
+  right: auto;
+  left: 2px;
+}
+.slideout-watcher #watcher .move {
+  cursor: default;
+}
+.slideout-watcher.underline-links #watcher .move {
+  text-decoration: underline;
+}
+.slideout-watcher #watcher > div {
+  overflow: hidden;
+}
+.slideout-watcher #watcher:hover {
+  overflow-y: auto;
+}
+.slideout-watcher #watcher:not(:hover) {
+  height: 0;
+  overflow: hidden;
+  border: 0 none;
+  padding: 0;
+}
 .watch-thread-link {
   padding-top: 18px;
   width: 18px;
@@ -789,42 +790,49 @@ hide: "
 /* Announcements */
 #globalMessage {
   text-align: center;
-  #{if _conf["Rounded Edges"] then "border-radius: 3px;" else ""}
 }
-#{{
+.rounded-edges #globalMessage {
-'slideout': "
+  border-radius: 3px;
-#globalMessage {
+}
+.announcements-slideout #globalMessage {
   position: fixed;
   padding: 2px;
-  width: #{width}px;
+  width: 248px;
-  #{Style.sidebarLocation[0]}: 2px !important;
-  #{Style.sidebarLocation[1]}: auto !important;
 }
-#globalMessage h3 {
+.announcements-slideout.sidebar-location-right #globalMessage {
+  left: auto;
+  right: 2px;
+}
+.announcements-slideout.sidebar-location-left #globalMessage {
+  right: auto;
+  left: 2px;
+}
+.announcements-slideout.sidebar-large #globalMessage {
+  width: 299px;
+}
+.announcements-slideout #globalMessage h3 {
   margin: 0;
 }
-#globalMessage:hover {
+.announcements-slideout #globalMessage:hover {
   <%= sizing %>: border-box;
   overflow-y: auto;
 }
-#globalMessage:not(:hover) {
+.announcements-slideout #globalMessage:not(:hover) {
   height: 0;
   overflow: hidden;
   padding: 0;
   border: 0 none;
-}"
+}
-'hide': "
+.announcements-hide #globalMessage {
-#globalMessage {
   display: none !important;
 }
-"}[_conf['Announcements']] or ""}
 /* Threads */
-.thread {
+.rounded-edges .board > .thread{
-  margin: #{parseInt _conf["Top Thread Padding"], 10}px 0 #{parseInt _conf["Bottom Thread Padding"], 10}px 0;
+  border-radius: 4px;
-  #{if _conf["Rounded Edges"] then "border-radius: 4px;" else ""}
 }
 /* Thread Clearfix */
-.thread > div:last-of-type::after {
+.thread > .threadContainer:last-of-type::after,
+.thread > .replyContainer:last-of-type::after {
   display: block;
   content: ' ';
   clear: both;
@@ -842,12 +850,7 @@ hide: "
 .expanded-image > .post > .file > .fileThumb > .full-image {
   display: block;
 }
-.post,
+.thread > .replyContainer:last-of-type .post {
-.summary,
-.threadContainer {
-  margin-bottom: #{Style.replyMargin}px;
-}
-.replyContainer:last-of-type .post {
   margin-bottom: 0;
 }
 .menu-button {
@@ -880,24 +883,23 @@ hide: "
 .hidden_thread {
   text-align: right;
 }
-#{if _conf['Color user IDs'] then "
+.color-user-ids .posteruid .hand {
-.posteruid .hand {
   padding: .1em .3em;
   border-radius: 1em;
   font-size: 80%;
-}" else ""}
+}
 .postInfo > span {
   vertical-align: bottom;
 }
-.subject,
+.bolds .subject,
-.name {
+.bolds .name {
-  #{if _conf["Bolds"] then 'font-weight: 600;' else ''}
+  font-weight: 600;
 }
-.postertrip {
+.italics .postertrip {
-  #{if _conf["Italics"] then 'font-style: italic;' else ''}
+  font-style: italic;
 }
-.replylink {
+.underline-links .replylink {
-  text-decoration: #{if _conf["Underline Links"] then "underline" else "none"};
+  text-decoration: underline;
 }
 .fileInfo {
   padding: 0 3px;
@@ -909,37 +911,29 @@ hide: "
 }
 .reply.post {
   <%= sizing %>: border-box;
+  display: inline-block;
 }
-#{if _conf["Fit Width Replies"] then "
+.fit-width-replies .reply.post {
-.reply.post {
   display: block;
   overflow: hidden;
 }
-.expanded-image .reply.post,
+.fit-width-replies .expanded-image .reply.post,
-.hasInline .reply.post {
+.fit-width-replies .hasInline .reply.post {
   width: 100%;
 }
-" else "
+.indent-replies #unread-line,
-.reply.post {
+.indent-replies .thread > .replyContainer,
-  display: inline-block;
+.indent-replies .threadContainer > .replyContainer {
-}
-"}
-#{if _conf["Indent Replies"] then "
-.thread > .replyContainer,
-.threadContainer > .replyContainer {
   margin-left: 2em;
-}" else ''}
+}
 .expanded-image .reply.post,
 .hasInline .reply.post {
   display: inline-block;
   overflow: visible;
   clear: both;
 }
-.post {
+.rounded-edges .post {
-  #{if _conf["Rounded Edges"] then "border-radius: 3px;" else ""}
+  border-radius: 3px;
-}
-.postMessage {
-  margin: #{_conf['Vertical Post Padding']}px #{_conf['Horizontal Post Padding']}px;
 }
 .spoiler,
 s {
@@ -949,27 +943,22 @@ s {
 .reply.post .postMessage {
   clear: right;
 }
-#{if _conf['Force Reply Break'] or _conf["OP Background"] then "
+.op-background .op.post .postMessage::after,
-.op.post .postMessage::after {
+.force-reply-break .op.post .postMessage::after {
   display: block;
   content: ' ';
   clear: both;
 }
-" else ""
-}
 /* OP */
 .favicon {
   vertical-align: bottom;
 }
-#{if _conf["OP Background"] then "
+.op-background .op.post {
-.op.post {
   <%= sizing %>: border-box;
-}" else ""}
+}
 /* Summary */
-#{
+.force-reply-break .summary {
-if _conf["Force Reply Break"]
+  clear: both;
-  ".summary { clear: both;}"
-else ""
 }
 /* Inlined */
 .inline {
@@ -991,12 +980,11 @@ else ""
 .inlined {
   opacity: .5;
 }
-.quotelink {
+.underline-links .quotelink {
-  text-decoration: #{if _conf["Underline Links"] then "underline" else "none"};
+  text-decoration: underline;
 }
 .filtered,
 .quotelink.filtered {
-  text-decoration: underline;
   text-decoration: line-through !important;
 }
 .inline + .hashlink {
@@ -1004,92 +992,68 @@ else ""
 }
 /* Quote Threading */
 .threadContainer {
-  #{if _conf["Indent Replies"] then "margin" else "padding"}-left: 2em;
+  padding-left: 2em;
   border-left: 1px solid;
 }
+.indent-replies .threadContainer {
+  margin-left: 2em;
+  padding-left: 0;
+}
 .threadOP {
   clear: both;
 }
 /* Backlinks */
-.backlink {
+.underline-links .backlink {
-  text-decoration: #{if _conf["Underline Links"] then "underline" else "none"};
+  text-decoration: underline;
 }
 .backlink.dead {
   text-decoration: none;
 }
-#{
+.filtered-backlinks .filtered.backlink {
-if _conf["Filtered Backlinks"] then "
-.filtered.backlink {
   display: none;
-}"
 }
-#{{
+backlinks-position-lower-left .container,
-"lower left": "
+backlinks-position-lower-right .container {
-.container {
-  padding: 0 5px;
   max-width: 100%;
+  padding: 0 5px;
 }
-.reply.quoted {
+backlinks-position-lower-left .reply.quoted,
+backlinks-position-lower-right .reply.quoted {
   position: relative;
   padding-bottom: 1.7em;
 }
-.reply .container {
+backlinks-position-lower-right .reply .container,
+backlinks-position-lower-left .reply .container {
   position: absolute;
+  bottom: 0;
+  padding: 0 5px;
+}
+backlinks-position-lower-left .reply .container {
   left: 0;
-  bottom: 0;
-  padding: 0 5px;
 }
-.reply .container::before {
+backlinks-position-lower-right .reply .container {
-  content: 'REPLIES: ';
-}
-#qp .container {
-  position: static;
-  max-width: 100%;
-}
-#qp .container::before {
-  content: '';
-}
-.inline .container {
-  position: static;
-  max-width: 100%;
-}
-.inline .container::before {
-  content: '';
-}"
-
-'lower right': "
-.reply.quoted {
-  position: relative;
-  padding-bottom: 1.7em;
-}
-.reply .container {
-  position: absolute;
   right: 0;
-  bottom: 0;
 }
-.container::before {
+backlinks-position-lower-right .container::before,
+backlinks-position-lower-left .reply .container::before {
   content: 'REPLIES: ';
 }
-.container {
+backlinks-position-lower-left #qp .container,
-  max-width: 100%;
+backlinks-position-lower-left .inline .container,
-  padding: 0 5px;
+backlinks-position-lower-right .inline .container,
-}
+backlinks-position-lower-right #qp .container {
-#qp .container {
   position: static;
   max-width: 100%;
 }
-#qp .container::before {
+backlinks-position-lower-left #qp .container::before,
+backlinks-position-lower-left .inline .container::before,
+backlinks-position-lower-right #qp .container::before,
+backlinks-position-lower-right .inline .container::before {
   content: '';
 }
-.inline .container {
+backlinks-position-lower-right .inline .container {
-  position: static;
   float: none;
 }
-.inline .container::before {
-  content: '';
-}"
-
-'default': ""}[_conf["Backlinks Position"]]}
 /* Code */
 .prettyprint {
   <%= sizing %>: border-box;
@@ -1135,14 +1099,11 @@ if _conf["Filtered Backlinks"] then "
   display: block;
 }
 /* Stubs */
-#{if _conf['Fit Width Replies'] then "
+.fit-width-replies .stub {
-.stub {
   display: block;
   text-align: right;
-}" else ""}
+}
-/* Emoji */
+/* Element Replacing: */
-#{unless _conf["Emoji"] is "disable" then Emoji.css _conf["Emoji Position"] else ""}
-/* Element Replacing */
 /* Checkboxes */
 .rice {
   cursor: pointer;
@@ -1151,8 +1112,12 @@ if _conf["Filtered Backlinks"] then "
   margin: 2px 3px 3px;
   display: inline-block;
   vertical-align: bottom;
-  #{if _conf["Rounded Edges"] then "border-radius: 2px;" else ""}
+}
-  #{if _conf["Circle Checkboxes"] then "border-radius: 6px;" else ""}
+.rounded-edges .rice {
+  border-radius: 2px;}
+}
+.circle-checkboxes .rice {
+  border-radius: 6px;}
 }
 input:checked + .rice {
   background-attachment: scroll;
@@ -1207,94 +1172,107 @@ input:checked + .rice {
   position: fixed;
   padding: 1px;
   border: 1px solid transparent;
-  min-width: #{width}px;
+  min-width: 248px;
-  #{if _conf["Rounded Edges"] then "border-radius: 3px 3px 0 0;" else ""}
 }
-#qrtab {
+.sidebar-large #qr {
-  #{if _conf["Rounded Edges"] then "border-radius: 3px 3px 0 0;" else ""}
+  min-width: 299px;
 }
-
+.rounded-edges #qr,
-#{{
+.rounded-edges #qrtab {
-"fixed": "
+  border-radius: 3px 3px 0 0;
-#qr {
+}
+.post-form-style-fixed #qr {
   top: auto !important;
-  bottom: #{Style.pfOffset}em !important;
-  #{Style.sidebarLocation[0]}: 0 !important;
-  #{Style.sidebarLocation[1]}: auto !important;
-}"
-
-"slideout": "
-#qrtab input,
-#qrtab .rice {
-  display: none;
 }
-#qr {
+.sidebar-location-left:not(.post-form-style-float) #qr {
+  left: 0 !important;
+  right: auto !important;
+}
+.sidebar-location-right:not(.post-form-style-float) #qr {
+  right: 0 !important;
+  left: auto !important;
+}
+:root:not(.post-form-style-float) #qr {
+  bottom: 0;
+}
+.fourchan-ss-navigation:not(.post-form-style-float).fixed.bottom #qr,
+.fourchan-ss-navigation.index.pagination-sticky-bottom:not(.post-form-style-float) #qr {
+  bottom: 1.5em;
+}
+.post-form-style-slideout #qr {
   top: auto !important;
-  bottom: #{Style.pfOffset}em !important;
-  #{Style.sidebarLocation[0]}: 0 !important;
-  #{Style.sidebarLocation[1]}: auto !important;
-  <%= agent %>transform: translateX(#{xOffset}93%);
 }
-#qr:hover,
+.post-form-style-slideout.sidebar-location-left #qr {
-#qr.has-focus,
+  <%= agent %>transform: translateX(-93%);
-#qr.dump {
+}
+.post-form-style-slideout.sidebar-location-right #qr {
+  <%= agent %>transform: translateX(93%);
+}
+.post-form-style-slideout #qr:hover,
+.post-form-style-slideout #qr.has-focus,
+.post-form-style-slideout #qr.dump {
   <%= agent %>transform: translate(0);
-}"
-
-"tabbed slideout": "
-#qr {
-  top: auto !important;
-  bottom: #{Style.pfOffset}em !important;
-  #{Style.sidebarLocation[0]}: 0 !important;
-  #{Style.sidebarLocation[1]}: auto !important;
-  <%= agent %>transform: translateX(#{xOffset}100%);
 }
-#qr:hover,
+.post-form-style-tabbed-slideout #qr {
-#qr.has-focus,
+  top: auto !important;
-#qr.dump {
+}
+.post-form-style-tabbed-slideout.sidebar-location-left #qr {
+  <%= agent %>transform: translateX(-100%);
+}
+.post-form-style-tabbed-slideout.sidebar-location-right #qr {
+  <%= agent %>transform: translateX(100%);
+}
+.post-form-style-tabbed-slideout #qr:hover,
+.post-form-style-tabbed-slideout #qr.has-focus,
+.post-form-style-tabbed-slideout #qr.dump {
   <%= agent %>transform: translateX(0);
 }
-#qrtab {
+.post-form-style-tabbed-slideout #qrtab {
-  <%= agent %>transform: rotate(#{(if Style.sidebarLocation[0] is "left" then "" else "-")}90deg);
-  <%= agent %>transform-origin: bottom #{Style.sidebarLocation[0]};
   position: absolute;
   top: 0;
-  #{Style.sidebarLocation[0]}: 100%;
   width: 110px;
   text-align: center;
   border-width: 1px 1px 0 1px;
   cursor: default;
 }
-#qr:hover #qrtab,
+.post-form-style-tabbed-slideout.sidebar-location-left #qrtab {
-#qr.has-focus #qrtab,
+  <%= agent %>transform: rotate(90deg);
-#qr.dump #qrtab {
+  <%= agent %>transform-origin: bottom right;
+  left: 100%;
+}
+.post-form-style-tabbed-slideout.sidebar-location-right #qrtab {
+  <%= agent %>transform: rotate(-90deg);
+  <%= agent %>transform-origin: bottom right;
+  right: 100%;
+}
+.post-form-style-tabbed-slideout #qr:hover #qrtab,
+.post-form-style-tabbed-slideout #qr.has-focus #qrtab,
+.post-form-style-tabbed-slideout #qr.dump #qrtab {
   opacity: 0;
 }
-#qrtab input,
+.post-form-style-slideout #qrtab input,
-#qrtab .close,
+.post-form-style-slideout #qrtab .rice,
-#qrtab .rice,
+.post-form-style-tabbed-slideout #qrtab input,
-#qrtab .selectrice,
+.post-form-style-tabbed-slideout #qrtab .close,
-#qrtab span {
+.post-form-style-tabbed-slideout #qrtab .rice,
+.post-form-style-tabbed-slideout #qrtab span {
   display: none;
-}"
+}
-
+.post-form-style-tabbed-slideout #qrtab .selectrice {
-"transparent fade": "
+  text-align: center;
-#qr {
+}
+.post-form-style-transparent-fade #qr {
   overflow: visible;
   top: auto !important;
-  bottom: #{Style.pfOffset}em !important;
-  #{Style.sidebarLocation[0]}: 2px !important;
-  #{Style.sidebarLocation[1]}: auto !important;
   opacity: 0.2;
   <%= agent %>transition: opacity .3s ease-in-out 1s;
 }
-#qr:hover,
+.post-form-style-transparent-fade #qr:hover,
-#qr.has-focus,
+.post-form-style-transparent-fade #qr.has-focus,
-#qr.dump {
+.post-form-style-transparent-fade #qr.dump {
   opacity: 1;
   <%= agent %>transition: opacity .3s linear;
-}"
+}
-}[_conf['Post Form Style']] or ""}
 
 #{
 unless _conf['Post Form Style'] is 'tabbed slideout'

src/General/css/theme.css

@@ -176,7 +176,7 @@ textarea.field:focus {
   border-style: solid;
   border-color: #{theme["Navigation Border"]};
 }
-.thread {
+.board > .thread {
   background: #{theme["Thread Wrapper Background"]};
   border: 1px solid #{theme["Thread Wrapper Border"]};
 }

src/Theming/Style.coffee

@@ -13,7 +13,9 @@ Style =
     <% } else { %>
     $.addClass doc, 'gecko'
     <% } %>
+    $.addClass doc, 'fourchan-x'
     $.addClass doc, 'appchan-x'
+    $.addClass doc, g.VIEW
     
     for title, cat of Config.style
       for name, setting of cat
@@ -161,8 +163,7 @@ Style =
 
   layout: ->
     # Remove after classes rewrite
-    _conf   = Conf
+    _conf = Conf
-    xOffset = if _conf["Sidebar Location"] is "left" then '-' else ''
     
     Style.pfOffset = if _conf['4chan SS Navigation'] and
       ((_conf['Bottom Header'] and _conf['Fixed Header']) or
@@ -178,21 +179,6 @@ Style =
       large:    303
     }[_conf['Sidebar']]
 
-    Style.logoOffset =
-      if _conf["4chan Banner"] is "at sidebar top"
-        if _conf["Sidebar"] is "large"
-          100
-        else
-          83
-      else
-        0
-
-    width = 
-      if _conf["Sidebar"] is "large"
-        299
-      else
-        248
-
     Style.sidebarLocation = if _conf["Sidebar Location"] is "left"
       ["left",  "right"]
     else
@@ -207,13 +193,10 @@ Style =
         left:   0
         right:  0
 
-    Style.replyMargin = _conf["Post Spacing"]
-
     css = """<%= grunt.file.read('src/General/css/layout.css') %>"""
   
   dynamic: ->
     _conf   = Conf
-    xOffset = if _conf["Sidebar Location"] is "left" then '-' else ''
     
     Style.pfOffset = if _conf['4chan SS Navigation'] and
       ((_conf['Bottom Header'] and _conf['Fixed Header']) or
@@ -229,15 +212,6 @@ Style =
       large:    303
     }[_conf['Sidebar']]
 
-    Style.logoOffset =
-      if _conf["4chan Banner"] is "at sidebar top"
-        if _conf["Sidebar"] is "large"
-          100
-        else
-          83
-      else
-        0
-
     Style.sidebarLocation = if _conf["Sidebar Location"] is "left"
       ["left",  "right"]
     else
@@ -252,8 +226,6 @@ Style =
         left:   0
         right:  0
 
-    Style.replyMargin = _conf["Post Spacing"]
-
     css = """<%= grunt.file.read('src/General/css/dynamic.css') %>"""
 
   theme: (theme) ->