Move the QR styling into the main style, decrement.

4chan_x.user.js

@@ -1387,7 +1387,7 @@
         }
       });
       qr.mimeTypes = mimeTypes.split(', ');
-      qr.el = ui.dialog('qr', 'top:0;right:0;', "<style>.autohide:not(:hover) > form {  display: none;}#qr > .move {  min-width: 300px;  overflow: hidden;  box-sizing: border-box;  padding: 0 2px;}#qr > .move > span {  float: right;}#autohide, .close, #addReply, #qr select, #dump, .captcha {  cursor: pointer;}#qr select,#qr > form {  margin: 0;}#dump {  background: -webkit-linear-gradient(#EEE, #CCC);  background: -moz-linear-gradient(#EEE, #CCC);  background: -o-linear-gradient(#EEE, #CCC);  background: linear-gradient(#EEE, #CCC);  width: 10%;}#dump:hover, #dump:focus {  background: -webkit-linear-gradient(#FFF, #DDD);  background: -moz-linear-gradient(#FFF, #DDD);  background: -o-linear-gradient(#FFF, #DDD);  background: linear-gradient(#FFF, #DDD);}#dump:active, .dump #dump:not(:hover):not(:focus) {  background: -webkit-linear-gradient(#CCC, #DDD);  background: -moz-linear-gradient(#CCC, #DDD);  background: -o-linear-gradient(#CCC, #DDD);  background: linear-gradient(#CCC, #DDD);}#qr:not(.dump) output {  display: none;}#replies {  display: block;  height: 100px;  position: relative;}#replies > div {  top: 0; right: 0; bottom: 0; left: 0;  margin: 0; padding: 0;  overflow: hidden;  position: absolute;  white-space: pre;}#replies > div:hover {  overflow-x: auto;}.preview {  background-color: rgba(0,0,0,.2);  background-position: 50% 20%;  background-size: cover;  border: 1px solid #666;  box-sizing: border-box;  color: #FFF;  cursor: pointer;  display: inline-block;  height: 90px; width: 90px;  margin: 5px; padding: 2px;  opacity: .5;  overflow: hidden;  text-shadow: 0 1px 1px #000;  -webkit-transition: opacity .25s;  -moz-transition: opacity .25s;  -o-transition: opacity .25s;  transition: opacity .25s;  vertical-align: top;}.preview:hover, .preview:focus {  opacity: .9;}.preview#selected {  opacity: 1;}.remove {  color: #E00;  font-weight: 700;  padding: 3px;}#addReply {  color: #333;  font-size: 3.5em;  line-height: 100px;}#addReply:hover, #addReply:focus {  color: #000;}.field {  border: 1px solid #CCC;  color: #333;  font: 13px sans-serif;  margin: 0;  padding: 2px 4px 3px;  width: 30%;  -webkit-transition: color .25s, border .25s;  -moz-transition: color .25s, border .25s;  -o-transition: color .25s, border .25s;  transition: color .25s, border .25s;}.field:-moz-placeholder,.field:hover:-moz-placeholder {  color: #AAA;}.field:hover, .field:focus {  border-color: #999;  color: #000;  outline: none;}textarea.field {  min-height: 120px;  width: 100%;}.captcha {  background: #FFF;  text-align: center;}.captcha > img {  height: 57px;  width: 300px;}.field[name=captcha] {  width: 100%;}#qr [type=file] {  width: 80%;}#qr [type=submit] {  padding: 0 -moz-calc(1px); /* Gecko does not respect box-sizing: border-box */  width: 20%;}</style><div class=move>  Quick Reply <input type=checkbox name=autohide id=autohide title=Auto-hide>  <span>" + (g.REPLY ? '' : threads) + " <a class=close>x</a></span></div><form>  <div><input id=dump class=field type=button title='Dump mode' value=+><input name=name title=Name placeholder=Name class=field size=1><input name=email title=E-mail placeholder=E-mail class=field size=1><input name=sub title=Subject placeholder=Subject class=field size=1></div>  <output id=replies><div><a id=addReply href=javascript:;>+</a></div></output>  <div><textarea name=com title=Comment placeholder=Comment class=field></textarea></div>  <div class=captcha><img></div>  <div><input name=captcha title=Verification placeholder=Verification class=field size=1></div>  <div><input type=file name=upfile max=" + ($('[name=MAX_FILE_SIZE]').value) + " accept='" + mimeTypes + "' multiple><input type=submit value=" + (g.dead ? '404 disabled' : 'Submit') + "></div>  <div class=error></div></form>");
+      qr.el = ui.dialog('qr', 'top:0;right:0;', "<div class=move>  Quick Reply <input type=checkbox name=autohide id=autohide title=Auto-hide>  <span>" + (g.REPLY ? '' : threads) + " <a class=close>x</a></span></div><form>  <div><input id=dump class=field type=button title='Dump mode' value=+><input name=name title=Name placeholder=Name class=field size=1><input name=email title=E-mail placeholder=E-mail class=field size=1><input name=sub title=Subject placeholder=Subject class=field size=1></div>  <output id=replies><div><a id=addReply href=javascript:;>+</a></div></output>  <div><textarea name=com title=Comment placeholder=Comment class=field></textarea></div>  <div class=captcha><img></div>  <div><input name=captcha title=Verification placeholder=Verification class=field size=1></div>  <div><input type=file name=upfile max=" + ($('[name=MAX_FILE_SIZE]').value) + " accept='" + mimeTypes + "' multiple><input type=submit value=" + (g.dead ? '404 disabled' : 'Submit') + "></div>  <div class=error></div></form>");
       if (!g.REPLY) {
         $.on($('select', qr.el), 'mousedown', function(e) {
           return e.stopPropagation();
@@ -3077,6 +3077,144 @@
   display: none;\
 }\
 \
+.autohide:not(:hover) > form {\
+  display: none;\
+}\
+#qr > .move {\
+  min-width: 300px;\
+  overflow: hidden;\
+  box-sizing: border-box;\
+  padding: 0 2px;\
+}\
+#qr > .move > span {\
+  float: right;\
+}\
+#autohide, .close, #qr select, #dump, .captcha {\
+  cursor: pointer;\
+}\
+#qr select,\
+#qr > form {\
+  margin: 0;\
+}\
+#dump {\
+  background: -webkit-linear-gradient(#EEE, #CCC);\
+  background: -moz-linear-gradient(#EEE, #CCC);\
+  background: -o-linear-gradient(#EEE, #CCC);\
+  background: linear-gradient(#EEE, #CCC);\
+  width: 10%;\
+}\
+#dump:hover, #dump:focus {\
+  background: -webkit-linear-gradient(#FFF, #DDD);\
+  background: -moz-linear-gradient(#FFF, #DDD);\
+  background: -o-linear-gradient(#FFF, #DDD);\
+  background: linear-gradient(#FFF, #DDD);\
+}\
+#dump:active, .dump #dump:not(:hover):not(:focus) {\
+  background: -webkit-linear-gradient(#CCC, #DDD);\
+  background: -moz-linear-gradient(#CCC, #DDD);\
+  background: -o-linear-gradient(#CCC, #DDD);\
+  background: linear-gradient(#CCC, #DDD);\
+}\
+#qr:not(.dump) output {\
+  display: none;\
+}\
+#replies {\
+  display: block;\
+  height: 100px;\
+  position: relative;\
+}\
+#replies > div {\
+  top: 0; right: 0; bottom: 0; left: 0;\
+  margin: 0; padding: 0;\
+  overflow: hidden;\
+  position: absolute;\
+  white-space: pre;\
+}\
+#replies > div:hover {\
+  overflow-x: auto;\
+}\
+.preview {\
+  background-color: rgba(0,0,0,.2);\
+  background-position: 50% 20%;\
+  background-size: cover;\
+  border: 1px solid #666;\
+  box-sizing: border-box;\
+  color: #FFF;\
+  display: inline-block;\
+  height: 90px; width: 90px;\
+  margin: 5px; padding: 2px;\
+  opacity: .5;\
+  overflow: hidden;\
+  text-shadow: 0 1px 1px #000;\
+  -webkit-transition: opacity .25s;\
+  -moz-transition: opacity .25s;\
+  -o-transition: opacity .25s;\
+  transition: opacity .25s;\
+  vertical-align: top;\
+}\
+.preview:hover, .preview:focus {\
+  opacity: .9;\
+}\
+.preview#selected {\
+  opacity: 1;\
+}\
+.remove {\
+  color: #E00;\
+  font-weight: 700;\
+  padding: 3px;\
+}\
+#addReply {\
+  color: #333;\
+  font-size: 3.5em;\
+  line-height: 100px;\
+}\
+#addReply:hover, #addReply:focus {\
+  color: #000;\
+}\
+.field {\
+  border: 1px solid #CCC;\
+  color: #333;\
+  font: 13px sans-serif;\
+  margin: 0;\
+  padding: 2px 4px 3px;\
+  width: 30%;\
+  -webkit-transition: color .25s, border .25s;\
+  -moz-transition: color .25s, border .25s;\
+  -o-transition: color .25s, border .25s;\
+  transition: color .25s, border .25s;\
+}\
+.field:-moz-placeholder,\
+.field:hover:-moz-placeholder {\
+  color: #AAA;\
+}\
+.field:hover, .field:focus {\
+  border-color: #999;\
+  color: #000;\
+  outline: none;\
+}\
+textarea.field {\
+  min-height: 120px;\
+  width: 100%;\
+}\
+.captcha {\
+  background: #FFF;\
+  text-align: center;\
+}\
+.captcha > img {\
+  height: 57px;\
+  width: 300px;\
+}\
+.field[name=captcha] {\
+  width: 100%;\
+}\
+#qr [type=file] {\
+  width: 80%;\
+}\
+#qr [type=submit] {\
+  padding: 0 -moz-calc(1px); /* Gecko does not respect box-sizing: border-box */\
+  width: 20%;\
+}\
+\
 .new {\
   background: lime;\
 }\
@@ -3221,8 +3359,7 @@
 }\
 .filtered {\
   text-decoration: line-through;\
-      }\
+}'
-    '
   };
 
   Main.init();

script.coffee

@@ -1032,147 +1032,6 @@ qr =
           'image/' + type
     qr.mimeTypes = mimeTypes.split ', '
     qr.el = ui.dialog 'qr', 'top:0;right:0;', "
-<style>
-.autohide:not(:hover) > form {
-  display: none;
-}
-#qr > .move {
-  min-width: 300px;
-  overflow: hidden;
-  box-sizing: border-box;
-  padding: 0 2px;
-}
-#qr > .move > span {
-  float: right;
-}
-#autohide, .close, #addReply, #qr select, #dump, .captcha {
-  cursor: pointer;
-}
-#qr select,
-#qr > form {
-  margin: 0;
-}
-#dump {
-  background: -webkit-linear-gradient(#EEE, #CCC);
-  background: -moz-linear-gradient(#EEE, #CCC);
-  background: -o-linear-gradient(#EEE, #CCC);
-  background: linear-gradient(#EEE, #CCC);
-  width: 10%;
-}
-#dump:hover, #dump:focus {
-  background: -webkit-linear-gradient(#FFF, #DDD);
-  background: -moz-linear-gradient(#FFF, #DDD);
-  background: -o-linear-gradient(#FFF, #DDD);
-  background: linear-gradient(#FFF, #DDD);
-}
-#dump:active, .dump #dump:not(:hover):not(:focus) {
-  background: -webkit-linear-gradient(#CCC, #DDD);
-  background: -moz-linear-gradient(#CCC, #DDD);
-  background: -o-linear-gradient(#CCC, #DDD);
-  background: linear-gradient(#CCC, #DDD);
-}
-#qr:not(.dump) output {
-  display: none;
-}
-#replies {
-  display: block;
-  height: 100px;
-  position: relative;
-}
-#replies > div {
-  top: 0; right: 0; bottom: 0; left: 0;
-  margin: 0; padding: 0;
-  overflow: hidden;
-  position: absolute;
-  white-space: pre;
-}
-#replies > div:hover {
-  overflow-x: auto;
-}
-.preview {
-  background-color: rgba(0,0,0,.2);
-  background-position: 50% 20%;
-  background-size: cover;
-  border: 1px solid #666;
-  box-sizing: border-box;
-  color: #FFF;
-  cursor: pointer;
-  display: inline-block;
-  height: 90px; width: 90px;
-  margin: 5px; padding: 2px;
-  opacity: .5;
-  overflow: hidden;
-  text-shadow: 0 1px 1px #000;
-  -webkit-transition: opacity .25s;
-  -moz-transition: opacity .25s;
-  -o-transition: opacity .25s;
-  transition: opacity .25s;
-  vertical-align: top;
-}
-.preview:hover, .preview:focus {
-  opacity: .9;
-}
-.preview#selected {
-  opacity: 1;
-}
-.remove {
-  color: #E00;
-  font-weight: 700;
-  padding: 3px;
-}
-#addReply {
-  color: #333;
-  font-size: 3.5em;
-  line-height: 100px;
-}
-#addReply:hover, #addReply:focus {
-  color: #000;
-}
-.field {
-  border: 1px solid #CCC;
-  color: #333;
-  font: 13px sans-serif;
-  margin: 0;
-  padding: 2px 4px 3px;
-  width: 30%;
-  -webkit-transition: color .25s, border .25s;
-  -moz-transition: color .25s, border .25s;
-  -o-transition: color .25s, border .25s;
-  transition: color .25s, border .25s;
-}
-.field:-moz-placeholder,
-.field:hover:-moz-placeholder {
-  color: #AAA;
-}
-.field:hover, .field:focus {
-  border-color: #999;
-  color: #000;
-  outline: none;
-}
-textarea.field {
-  min-height: 120px;
-  width: 100%;
-}
-.captcha {
-  background: #FFF;
-  text-align: center;
-}
-.captcha > img {
-  height: 57px;
-  width: 300px;
-}
-.field[name=captcha] {
-  width: 100%;
-}
-#qr [type=file] {
-  width: 80%;
-}
-#qr [type=submit] {
-  padding: 0 -moz-calc(1px); /* Gecko does not respect box-sizing: border-box */
-  width: 20%;
-}
-</style>
-
 <div class=move>
   Quick Reply <input type=checkbox name=autohide id=autohide title=Auto-hide>
   <span>#{if g.REPLY then '' else threads} <a class=close>x</a></span>
@@ -2569,6 +2428,144 @@ Main =
   display: none;
 }
 
+.autohide:not(:hover) > form {
+  display: none;
+}
+#qr > .move {
+  min-width: 300px;
+  overflow: hidden;
+  box-sizing: border-box;
+  padding: 0 2px;
+}
+#qr > .move > span {
+  float: right;
+}
+#autohide, .close, #qr select, #dump, .captcha {
+  cursor: pointer;
+}
+#qr select,
+#qr > form {
+  margin: 0;
+}
+#dump {
+  background: -webkit-linear-gradient(#EEE, #CCC);
+  background: -moz-linear-gradient(#EEE, #CCC);
+  background: -o-linear-gradient(#EEE, #CCC);
+  background: linear-gradient(#EEE, #CCC);
+  width: 10%;
+}
+#dump:hover, #dump:focus {
+  background: -webkit-linear-gradient(#FFF, #DDD);
+  background: -moz-linear-gradient(#FFF, #DDD);
+  background: -o-linear-gradient(#FFF, #DDD);
+  background: linear-gradient(#FFF, #DDD);
+}
+#dump:active, .dump #dump:not(:hover):not(:focus) {
+  background: -webkit-linear-gradient(#CCC, #DDD);
+  background: -moz-linear-gradient(#CCC, #DDD);
+  background: -o-linear-gradient(#CCC, #DDD);
+  background: linear-gradient(#CCC, #DDD);
+}
+#qr:not(.dump) output {
+  display: none;
+}
+#replies {
+  display: block;
+  height: 100px;
+  position: relative;
+}
+#replies > div {
+  top: 0; right: 0; bottom: 0; left: 0;
+  margin: 0; padding: 0;
+  overflow: hidden;
+  position: absolute;
+  white-space: pre;
+}
+#replies > div:hover {
+  overflow-x: auto;
+}
+.preview {
+  background-color: rgba(0,0,0,.2);
+  background-position: 50% 20%;
+  background-size: cover;
+  border: 1px solid #666;
+  box-sizing: border-box;
+  color: #FFF;
+  display: inline-block;
+  height: 90px; width: 90px;
+  margin: 5px; padding: 2px;
+  opacity: .5;
+  overflow: hidden;
+  text-shadow: 0 1px 1px #000;
+  -webkit-transition: opacity .25s;
+  -moz-transition: opacity .25s;
+  -o-transition: opacity .25s;
+  transition: opacity .25s;
+  vertical-align: top;
+}
+.preview:hover, .preview:focus {
+  opacity: .9;
+}
+.preview#selected {
+  opacity: 1;
+}
+.remove {
+  color: #E00;
+  font-weight: 700;
+  padding: 3px;
+}
+#addReply {
+  color: #333;
+  font-size: 3.5em;
+  line-height: 100px;
+}
+#addReply:hover, #addReply:focus {
+  color: #000;
+}
+.field {
+  border: 1px solid #CCC;
+  color: #333;
+  font: 13px sans-serif;
+  margin: 0;
+  padding: 2px 4px 3px;
+  width: 30%;
+  -webkit-transition: color .25s, border .25s;
+  -moz-transition: color .25s, border .25s;
+  -o-transition: color .25s, border .25s;
+  transition: color .25s, border .25s;
+}
+.field:-moz-placeholder,
+.field:hover:-moz-placeholder {
+  color: #AAA;
+}
+.field:hover, .field:focus {
+  border-color: #999;
+  color: #000;
+  outline: none;
+}
+textarea.field {
+  min-height: 120px;
+  width: 100%;
+}
+.captcha {
+  background: #FFF;
+  text-align: center;
+}
+.captcha > img {
+  height: 57px;
+  width: 300px;
+}
+.field[name=captcha] {
+  width: 100%;
+}
+#qr [type=file] {
+  width: 80%;
+}
+#qr [type=submit] {
+  padding: 0 -moz-calc(1px); /* Gecko does not respect box-sizing: border-box */
+  width: 20%;
+}
+
 .new {
   background: lime;
 }
@@ -2713,7 +2710,6 @@ Main =
 }
 .filtered {
   text-decoration: line-through;
-      }
+}'
-    '
 
 Main.init()