Redo mascot positioning to be less dumb.

src/General/Settings.coffee

@@ -514,19 +514,19 @@ Settings =
       $.add nodes, fs
 
     $.get items, (items) ->
-      cb = Settings.cb
+      cb = Settings.cb.style
       for key, val of items
         input = inputs[key]
         if input.type is 'checkbox'
           input.checked = val
-          $.on input, 'change', cb.style.checked
+          $.on input, 'change', cb.checked
         else if input.nodeName is 'SELECT'
-          input.value   = val
+          input.value = val
-          $.on input, 'change', cb.style.select
+          $.on input, 'change', cb.select
         else
-          input.value   = val
+          input.value = val
-          $.on input, 'change', cb.style.value
+          $.on input, 'change', cb.value
-        
+
         if key is 'Icon Orientation'
           $.on input, 'change', Style.iconPositions
 
@@ -805,9 +805,11 @@ Settings =
         $.cb.checked.call @
         hyphenated = @name.toLowerCase().replace(/^4/, 'four').replace /\s+/g, '-'
         (if @checked then $.addClass else $.rmClass) doc, hyphenated
+
       value: ->
         $.cb.value.call @
-        Style.dynamicCSS = Style.dynamic()
+        Style.dynamicCSS.textContent = Style.dynamic()
+
       select: ->
         $.cb.value.call @
         for option in @options

src/General/css/layout.css

@@ -207,7 +207,7 @@ th {
 }
 .sidebar-location-left.sidebar-normal:not(.pagination-on-side) .pagelist,
 .sidebar-location-left #header-bar {
-  left: 248px;
+  left: 252px;
 }
 .sidebar-location-left.sidebar-minimal:not(.pagination-on-side):not(.fourchan-ss-navigation) .pagelist,
 .sidebar-location-left.sidebar-minimal:not(.fourchan-ss-navigation) #header-bar {
@@ -219,7 +219,7 @@ th {
 }
 .sidebar-location-right.sidebar-normal:not(.pagination-on-side) .pagelist,
 .sidebar-location-right #header-bar {
-  right: 248px;
+  right: 252px;
 }
 .sidebar-location-right.sidebar-minimal:not(.pagination-on-side):not(.fourchan-ss-navigation) .pagelist,
 .sidebar-location-right.sidebar-minimal:not(.fourchan-ss-navigation) #header-bar {
@@ -438,20 +438,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 {
@@ -1224,6 +1224,8 @@ input:checked + .rice {
   padding: 1px;
   border: 1px solid transparent;
   min-width: 248px;
+  background: transparent;
+  border: 1px solid transparent;
 }
 .sidebar-large #qr {
   min-width: 299px;
@@ -1244,11 +1246,11 @@ input:checked + .rice {
   left: auto !important;
 }
 :root:not(.post-form-style-float) #qr {
-  bottom: 0;
+  bottom: 0 !important;
 }
-.fourchan-ss-navigation:not(.post-form-style-float).fixed.bottom #qr,
+.fourchan-ss-navigation.fixed.bottom:not(.post-form-style-float) #qr,
 .fourchan-ss-navigation.index.pagination-sticky-bottom:not(.post-form-style-float) #qr {
-  bottom: 1.5em;
+  bottom: 1.5em !important;
 }
 .post-form-style-slideout #qr {
   top: auto !important;
@@ -1324,14 +1326,14 @@ input:checked + .rice {
   opacity: 1;
   <%= agent %>transition: opacity .3s linear;
 }
-:root:not(.show-post-form-header):not(.post-form-style-tabbed-slideout) #qrtab,
+:root:not(.show-post-form-header):not(.post-form-style-tabbed-slideout):not(.post-form-style-float) #qrtab,
 .post-form-style-float .autohide:not(:hover):not(.has-focus) > form,
 .show-post-form-header.post-form-style-fixed .autohide:not(:hover):not(.has-focus) > form,
 .show-post-form-header.post-form-style-transparent-fade .autohide:not(:hover):not(.has-focus) > form {
   display: none !important;
 }
 :root:not(.post-form-style-tabbed-slideout) #qrtab {
-  margin-bottom: 1px;
+  margin-bottom: .1em;
 }
 .post-form-slideout-transitions.post-form-style-slideout #qr,
 .post-form-slideout-transitions.post-form-style-tabbed-slideout #qr {
@@ -1380,7 +1382,10 @@ input:checked + .rice {
 .compact-post-form-inputs .persona input.field {
   width: 33%;
 }
-.compact-post-form-inputs .persona input.field:not(:first-child) {
+.compact-post-form-inputs .persona input.field:first-child {
+  margin: 0;
+}
+.compact-post-form-inputs .persona input.field {
   margin: 0 0 0 0.5%;
 }
 .compact-post-form-inputs #qr textarea.field {
@@ -1406,7 +1411,7 @@ input:checked + .rice {
   resize: none;
 }
 .captcha-img {
-  margin: 1px 0 0;
+  margin: .1em 0 0;
   text-align: center;
   line-height: 0;
 }
@@ -1417,7 +1422,7 @@ input:checked + .rice {
 }
 .captcha-input {
   width: 100%;
-  margin: 1px 0 0;
+  margin: .1em 0 0;
 }
 .field,
 .selectrice,
@@ -1425,7 +1430,7 @@ button,
 input:not([type=radio]) {
   <%= sizing %>: border-box;
   height: 1.6em;
-  margin: 1px 0 0;
+  margin: .1em 0 0;
   vertical-align: bottom;
   padding: 0 1px;
 }

src/General/css/mascot.css

@@ -0,0 +1,108 @@
+#mascot {
+  display: none;
+}
+.mascots #mascot {
+  display: block;
+}
+.sidebar-location-left #mascot img {
+  <%= sizing %>transform: scaleX(-1);
+}
+.sidebar-location-right.mascot-location-sidebar #mascot img,
+.sidebar-location-left #mascot img {
+  right: 0;
+  left: auto;
+  margin-right: #{mascot.hOffset}px;
+}
+.sidebar-location-right.sidebar-large.mascot-location-sidebar #mascot img,
+.sidebar-location-left.sidebar-large #mascot img {
+  right: #{if mascot.center then 25 else 0}px;
+}
+.sidebar-location-left.mascot-location-sidebar #mascot img,
+.sidebar-location-right #mascot img {
+  left: 0;
+  right: auto;
+  margin-left: #{mascot.hOffset}px;
+}
+.sidebar-location-left.sidebar-large.mascot-location-sidebar #mascot img,
+.sidebar-location-right.sidebar-large #mascot img {
+  left: #{if mascot.center then 25 else 0}px;
+}
+#mascot img {
+  position: fixed;
+  z-index: -1;
+  bottom: 18.5em;
+  height: #{
+    if mascot.height and isNaN parseFloat mascot.height
+      mascot.height
+    else if mascot.height
+      parseInt(mascot.height, 10) + 'px'
+    else
+      'auto'
+  };
+  width: #{
+    if mascot.width and isNaN parseFloat mascot.width
+      mascot.width
+    else if mascot.width
+      parseInt(mascot.width,  10) + 'px'
+    else
+      'auto'
+  };
+  margin-bottom: #{mascot.vOffset or 0}px;
+  cursor: pointer;
+}
+.fourchan-ss-navigation.bottom.fixed.posting-disabled #mascot img,
+.fourchan-ss-navigation.bottom.fixed.mascot-position-bottom #mascot img,
+.fourchan-ss-navigation.index.pagination-sticky-bottom.mascot-position-bottom #mascot img,
+.fourchan-ss-navigation.bottom.fixed:not(.post-form-style-fixed):not(.post-form-style-transparent-fade) #mascot img,
+.fourchan-ss-navigation.index.pagination-sticky-bottom:not(.post-form-style-fixed):not(.post-form-style-transparent-fade) #mascot img {
+  bottom: 1.5em;
+}
+.fourchan-ss-navigation.bottom.fixed.post-form-style-fixed #mascot img,
+.fourchan-ss-navigation.index.pagination-sticky-bottom.post-form-style-fixed #mascot img,
+.fourchan-ss-navigation.bottom.fixed.post-form-style-transparent-fade #mascot img,
+.fourchan-ss-navigation.index.pagination-sticky-bottom.post-form-style-transparent-fade #mascot img {
+  bottom: 20.1em;
+}
+.post-form-style-fixed.show-post-form-header #mascot img,
+.post-form-style-transparent-fade.show-post-form-header #mascot img,
+.fourchan-ss-navigation.bottom.fixed.post-form-style-fixed.post-form-decorations #mascot img,
+.fourchan-ss-navigation.index.pagination-sticky-bottom.post-form-style-fixed.post-form-decorations #mascot img,
+.fourchan-ss-navigation.bottom.fixed.post-form-style-transparent-fade.post-form-decorations #mascot img,
+.fourchan-ss-navigation.index.pagination-sticky-bottom.post-form-style-transparent-fade.post-form-decorations #mascot img {
+  bottom: 20.3em;
+}
+.fourchan-ss-navigation.bottom.fixed.show-post-form-header.post-form-style-fixed #mascot img,
+.fourchan-ss-navigation.index.pagination-sticky-bottom.show-post-form-header.post-form-style-fixed #mascot img,
+.fourchan-ss-navigation.bottom.fixed.show-post-form-header.post-form-style-transparent-fade #mascot img,
+.fourchan-ss-navigation.index.pagination-sticky-bottom.show-post-form-header.post-form-style-transparent-fade #mascot img {
+  bottom: 21.6em;
+}
+.fourchan-ss-navigation.bottom.fixed.post-form-style-fixed.post-form-decorations.show-post-form-header #mascot img,
+.fourchan-ss-navigation.index.pagination-sticky-bottom.post-form-style-fixed.post-form-decorations.show-post-form-header #mascot img,
+.fourchan-ss-navigation.bottom.fixed.post-form-style-transparent-fade.post-form-decorations.show-post-form-header #mascot img,
+.fourchan-ss-navigation.index.pagination-sticky-bottom.post-form-style-transparent-fade.post-form-decorations.show-post-form-header #mascot img {
+  bottom: 21.8em;
+}
+.post-form-style-fixed.post-form-decorations #mascot img,
+.post-form-style-transparent-fade.post-form-decorations #mascot img {
+  bottom: 18.8em;
+}
+.mascot-position-default:not(.post-form-style-fixed):not(.post-form-style-transparent-fade) #mascot img,
+.mascot-position-bottom #mascot img,
+.mascot-position-default.posting-disabled #mascot img {
+  bottom: 0;
+}
+.mascots-overlap-posts #mascot img {
+  z-index: 3;
+}
+.mascot-position-middle #mascot img {
+  bottom: 50%;
+  <%= sizing %>transform: translateY(50%);
+}
+.mascot-position-top #mascot img {
+  bottom: auto !important;
+  top: 17px;
+}
+.grayscale-mascots #mascot img {
+  filter: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filters"><feColorMatrix id="color" type="saturate" values="0" /></filter></svg>#filters');
+}

src/General/css/theme.css

@@ -58,16 +58,14 @@ html {
 .captcha-img img {
   #{Style.filter theme["Text"], theme["Input Background"]}
 }
-#boardTitle,
+#boardTitle {
-:root:not(.post-form-decorations) #spoilerLabel {
   text-shadow:
      1px  1px #{backgroundC},
     -1px -1px #{backgroundC},
      1px -1px #{backgroundC},
     -1px  1px #{backgroundC};
 }
-.sidebar-glow #boardTitle,
+.sidebar-glow #boardTitle {
-:root.sidebar-glow:not(.post-form-decorations) #spoilerLabel {
   text-shadow:
      1px  1px  1px #{backgroundC},
     -1px -1px  1px #{backgroundC},
@@ -100,6 +98,7 @@ html {
 #appchanx-settings,
 #qrtab,
 .post-form-decorations #qr,
+.post-form-style-float #qr,
 input[type="submit"],
 input[value="Report"],
 span[style="left: 5px; position: absolute;"] a {

src/Theming/Mascots.coffee

@@ -8,7 +8,7 @@ MascotTools =
 
     unless @el
       @el = $ '#mascot img', d.body
-      
+
     el = @el
 
     if !Conf['Mascots'] or (Conf['Hide Mascots on Catalog'] and g.VIEW is 'catalog')
@@ -20,7 +20,7 @@ MascotTools =
     else
       $.addClass doc, 'mascot-position-default'
       $.rmClass doc, 'mascot-position-bottom'
-    
+
     unless mascot
       if name and not mascot = Mascots[name]
         if el then el.src = "" else null
@@ -29,105 +29,7 @@ MascotTools =
 
     MascotTools.addMascot mascot
 
-    Style.mascot.textContent = """
+    Style.mascot.textContent = """<%= grunt.file.read('src/General/css/mascot.css') %>"""
-#mascot {
-  display: none;
-}
-.mascots #mascot {
-  display: block;
-}
-.sidebar-location-left #mascot img {
-  <%= sizing %>transform: scaleX(-1);
-}
-.sidebar-location-right.mascot-location-sidebar #mascot img,
-.sidebar-location-left #mascot img {
-  right: 0;
-  left: auto;
-  margin-right: #{mascot.hOffset}px;
-}
-.sidebar-location-right.sidebar-large.mascot-location-sidebar #mascot img,
-.sidebar-location-left.sidebar-large #mascot img {
-  right: #{if mascot.center then 25 else 0}px;
-}
-.sidebar-location-left.mascot-location-sidebar #mascot img,
-.sidebar-location-right #mascot img {
-  left: 0;
-  right: auto;
-  margin-left: #{mascot.hOffset}px;
-}
-.sidebar-location-left.sidebar-large.mascot-location-sidebar #mascot img,
-.sidebar-location-right.sidebar-large #mascot img {
-  left: #{if mascot.center then 25 else 0}px;
-}
-#mascot img {
-  position: fixed;
-  z-index: -1;
-  bottom: 20.1em;
-  height: #{
-    if mascot.height and isNaN parseFloat mascot.height
-      mascot.height
-    else if mascot.height
-      parseInt(mascot.height, 10) + 'px'
-    else
-      'auto'
-  };
-  width: #{
-    if mascot.width and isNaN parseFloat mascot.width
-      mascot.width
-    else if mascot.width
-      parseInt(mascot.width,  10) + 'px'
-    else
-      'auto'
-  };
-  margin-bottom: #{mascot.vOffset or 0}px;
-  cursor: pointer;
-}
-.fourchan-ss-navigation.bottom.fixed.posting-disabled #mascot img,
-.fourchan-ss-navigation.bottom.fixed.mascot-position-bottom #mascot img,
-.fourchan-ss-navigation.index.pagination-sticky-bottom.mascot-position-bottom #mascot img,
-.fourchan-ss-navigation.bottom.fixed:not(.post-form-style-fixed):not(.post-form-style-transparent-fade) #mascot img,
-.fourchan-ss-navigation.index.pagination-sticky-bottom:not(.post-form-style-fixed):not(.post-form-style-transparent-fade) #mascot img {
-  bottom: 1.5em;
-}
-.fourchan-ss-navigation.bottom.fixed #mascot img,
-.fourchan-ss-navigation.index.pagination-sticky-bottom #mascot img {
-  bottom: 21.6em;
-}
-.fourchan-ss-navigation.bottom.fixed.post-form-decorations #mascot img,
-.fourchan-ss-navigation.index.pagination-sticky-bottom.post-form-decorations #mascot img {
-  bottom: 21.8em;
-}
-.fourchan-ss-navigation.bottom.fixed.show-post-form-header.post-form-style-fixed #mascot img,
-.fourchan-ss-navigation.index.pagination-sticky-bottom.show-post-form-header.post-form-style-fixed #mascot img,
-.fourchan-ss-navigation.bottom.fixed.show-post-form-header.post-form-style-transparent-fade #mascot img,
-.fourchan-ss-navigation.index.pagination-sticky-bottom.show-post-form-header.post-form-style-transparent-fade #mascot img {
-  bottom: 22.9em;
-}
-.fourchan-ss-navigation.bottom.fixed.show-post-form-header.post-form-style-fixed.post-form-decorations #mascot img,
-.fourchan-ss-navigation.index.pagination-sticky-bottom.show-post-form-header.post-form-style-fixed.post-form-decorations #mascot img,
-.fourchan-ss-navigation.bottom.fixed.show-post-form-header.post-form-style-transparent-fade.post-form-decorations #mascot img,
-.fourchan-ss-navigation.index.pagination-sticky-bottom.show-post-form-header.post-form-style-transparent-fade.post-form-decorations #mascot img {
-  bottom: 23.1em;
-}
-.mascot-position-bottom #mascot img,
-.mascot-position-default.posting-disabled #mascot img {
-  bottom: 0;
-}
-.mascots-overlap-posts #mascot img {
-  z-index: 3;
-}
-.mascot-position-middle #mascot img {
-  bottom: 50%;
-  <%= sizing %>transform: translateY(50%);
-}
-.mascot-position-top #mascot img {
-  bottom: auto !important;
-  top: 17px;
-}
-.grayscale-mascots #mascot img {
-  filter: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filters"><feColorMatrix id="color" type="saturate" values="0" /></filter></svg>#filters');
-}
-"""
 
   categories: [
     'Anime'
@@ -334,8 +236,8 @@ MascotTools =
     reader.readAsDataURL file
 
   addMascot: (mascot) ->
-    image = 
+    image =
-      if Array.isArray mascot.image 
+      if Array.isArray mascot.image
         if Style.lightTheme
           mascot.image[1]
         else
@@ -349,7 +251,7 @@ MascotTools =
         innerHTML: "<img src='#{image}'>"
 
       @el = div.firstElementChild
-      
+
       $.on @el, 'mousedown', MascotTools.click
 
       $.add d.body, div