Fix mascot positionings

src/General/css/layout.css

@@ -1446,10 +1446,12 @@ input:checked + .rice {
   line-height: 0;
 }
 .captcha-img img {
-  width: 100%;
-  height: 4em;
   width: 246px;
 }
+.captcha-img,
+.captcha-img img {
+  height: 4em;
+}
 .captcha-input {
   width: 100%;
   margin: 1px 0 0;
@@ -1659,12 +1661,9 @@ a:only-of-type > .remove {
   line-height: 0;
   cursor: pointer;
 }
-.mascot-position-above-post-form.post-form-style-fixed #qr ~ #mascot img {
+.mascot-position-above-post-form.post-form-style-fixed #mascot img {
   margin-bottom: -2px;
 }
-.mascot-position-above-post-form.post-form-style-fixed.post-form-decorations #qr ~ #mascot img {
-  margin-bottom: 1px;
-}
 .mascots #mascot {
   display: block;
 }
@@ -1680,16 +1679,12 @@ a:only-of-type > .remove {
 .sidebar-location-right.mascot-location-opposite #mascot img {
   <%= transform %>: scaleX(-1);
 }
-.fourchan-ss-navigation.bottom.fixed.qr-hidden #mascot,
 .fourchan-ss-navigation.bottom.fixed.mascot-position-bottom #mascot,
 .fourchan-ss-navigation.index.pagination-sticky-bottom.mascot-position-bottom #mascot,
 .fourchan-ss-navigation.bottom.fixed:not(.post-form-style-fixed) #mascot,
 .fourchan-ss-navigation.index.pagination-sticky-bottom:not(.post-form-style-fixed) #mascot {
   bottom: 1.5em
 }
-#qr #mascot {
-  z-index: -1;
-}
 .mascots-overlap-posts #mascot {
   z-index: 3;
 }

src/General/css/mascot.css

@@ -22,4 +22,7 @@
 .sidebar-large #mascot {
   left: #{if mascot.center then 25 else 0}px;
   right: #{if mascot.center then 25 else 0}px;
+}
+.mascot-position-above-post-form.post-form-style-fixed #mascot {
+  <%= transform %>: translateY(-#{if QR.nodes then QR.nodes.el.getBoundingClientRect().height else 0}px);
 }

src/General/html/Features/MascotDialog.html

@@ -0,0 +1,13 @@
+<div id=mascotcontent>
+  <center>
+    PROTIP: Shift-Click the Mascot Image field to upload your own images!
+    <br>
+    <a href='https://github.com/zixaphir/appchan-x/issues/126#issuecomment-14365049'>This may have some caveats.</a>
+  </center>
+</div>
+<div id=save>
+  <a href='javascript:;'>Save Mascot</a>
+</div>
+<div id=close>
+  <a href='javascript:;'>Close</a>
+</div>

src/Theming/Mascots.coffee

@@ -14,6 +14,8 @@ MascotTools =
       if Conf['Click to Toggle']
         $.on @el, 'mousedown', MascotTools.click
 
+      $.on doc, 'QRDialogCreation', MascotTools.reposition
+
       $.asap (-> d.body), =>
         $.add d.body, @el
 
@@ -122,22 +124,10 @@ MascotTools =
     dialog = $.el "div",
       id: "mascotConf"
       className: "reply dialog"
-      innerHTML: "
+      innerHTML: """<%= grunt.file.read('src/General/html/Features/MascotDialog.html').replace(/>\s+</g, '><').trim() %>"""
-<div id=mascotcontent>
+    
-  <center>
+    container = $ "#mascotcontent", dialog
-    PROTIP: Shift-Click the Mascot Image field to upload your own images!
+
-    <br>
-    <a href='https://github.com/zixaphir/appchan-x/issues/126#issuecomment-14365049'>This may have some caveats.</a>
-  </center>
-</div>
-<div id=save>
-  <a href='javascript:;'>Save Mascot</a>
-</div>
-<div id=close>
-  <a href='javascript:;'>Close</a>
-</div>
-"
-    nodes = []
     for name, item of layout
       value = editMascot[name] or= item[1]
 
@@ -211,12 +201,10 @@ MascotTools =
             editMascot[@name] = if @checked then true else false
             MascotTools.init editMascot
 
-      nodes.push div
+      $.add container, div
 
     MascotTools.init editMascot
 
-    $.add $("#mascotcontent", dialog), nodes
-
     $.on $('#save > a', dialog), 'click', ->
       MascotTools.save editMascot
 
@@ -337,4 +325,8 @@ MascotTools =
       $.rm $("#mascotContainer", d.body)
       Settings.open 'Mascots'
 
-    reader.readAsText(file)
+    reader.readAsText(file)
+
+  reposition: ->
+    mascot = Mascots[Conf['mascot']]
+    Style.mascot.textContent = """<%= grunt.file.read('src/General/css/mascot.css') %>"""