Move the QR styling into the main style, decrement.
This commit is contained in:
Nicolas Stepien
parent
3fb41810d2
commit
771964993a
451
4chan_x.user.js
451
4chan_x.user.js
@ -1387,7 +1387,7 @@
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
qr.mimeTypes = mimeTypes.split(', ');
|
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) {
|
if (!g.REPLY) {
|
||||||
$.on($('select', qr.el), 'mousedown', function(e) {
|
$.on($('select', qr.el), 'mousedown', function(e) {
|
||||||
return e.stopPropagation();
|
return e.stopPropagation();
|
||||||
@ -3056,173 +3056,310 @@
|
|||||||
return _results;
|
return _results;
|
||||||
},
|
},
|
||||||
css: '\
|
css: '\
|
||||||
/* dialog styling */\
|
/* dialog styling */\
|
||||||
.dialog {\
|
.dialog {\
|
||||||
border: 1px solid rgba(0,0,0,.25);\
|
border: 1px solid rgba(0,0,0,.25);\
|
||||||
}\
|
}\
|
||||||
.move {\
|
.move {\
|
||||||
cursor: move;\
|
cursor: move;\
|
||||||
}\
|
}\
|
||||||
label, .favicon {\
|
label, .favicon {\
|
||||||
cursor: pointer;\
|
cursor: pointer;\
|
||||||
}\
|
}\
|
||||||
a[href="javascript:;"] {\
|
a[href="javascript:;"] {\
|
||||||
text-decoration: none;\
|
text-decoration: none;\
|
||||||
}\
|
}\
|
||||||
\
|
\
|
||||||
.thread.stub > :not(.block),\
|
.thread.stub > :not(.block),\
|
||||||
#content > [name=tab]:not(:checked) + div,\
|
#content > [name=tab]:not(:checked) + div,\
|
||||||
#updater:not(:hover) > :not(.move),\
|
#updater:not(:hover) > :not(.move),\
|
||||||
#qp > input, #qp .inline, .forwarded {\
|
#qp > input, #qp .inline, .forwarded {\
|
||||||
display: none;\
|
display: none;\
|
||||||
}\
|
}\
|
||||||
\
|
\
|
||||||
.new {\
|
.autohide:not(:hover) > form {\
|
||||||
background: lime;\
|
display: none;\
|
||||||
}\
|
}\
|
||||||
.error {\
|
#qr > .move {\
|
||||||
color: red;\
|
min-width: 300px;\
|
||||||
}\
|
overflow: hidden;\
|
||||||
#error {\
|
box-sizing: border-box;\
|
||||||
cursor: default;\
|
padding: 0 2px;\
|
||||||
}\
|
}\
|
||||||
#error[href] {\
|
#qr > .move > span {\
|
||||||
cursor: pointer;\
|
float: right;\
|
||||||
}\
|
}\
|
||||||
td.replyhider {\
|
#autohide, .close, #qr select, #dump, .captcha {\
|
||||||
vertical-align: top;\
|
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%;\
|
||||||
|
}\
|
||||||
\
|
\
|
||||||
.filesize + br + a {\
|
.new {\
|
||||||
float: left;\
|
background: lime;\
|
||||||
pointer-events: none;\
|
}\
|
||||||
}\
|
.error {\
|
||||||
img[md5], img[md5] + img {\
|
color: red;\
|
||||||
pointer-events: all;\
|
}\
|
||||||
}\
|
#error {\
|
||||||
.fitwidth img[md5] + img {\
|
cursor: default;\
|
||||||
max-width: 100%;\
|
}\
|
||||||
}\
|
#error[href] {\
|
||||||
.gecko > .fitwidth img[md5] + img,\
|
cursor: pointer;\
|
||||||
.presto > .fitwidth img[md5] + img {\
|
}\
|
||||||
width: 100%;\
|
td.replyhider {\
|
||||||
}\
|
vertical-align: top;\
|
||||||
|
}\
|
||||||
\
|
\
|
||||||
#qr, #qp, #updater, #stats, #ihover, #overlay, #navlinks {\
|
.filesize + br + a {\
|
||||||
position: fixed;\
|
float: left;\
|
||||||
}\
|
pointer-events: none;\
|
||||||
|
}\
|
||||||
|
img[md5], img[md5] + img {\
|
||||||
|
pointer-events: all;\
|
||||||
|
}\
|
||||||
|
.fitwidth img[md5] + img {\
|
||||||
|
max-width: 100%;\
|
||||||
|
}\
|
||||||
|
.gecko > .fitwidth img[md5] + img,\
|
||||||
|
.presto > .fitwidth img[md5] + img {\
|
||||||
|
width: 100%;\
|
||||||
|
}\
|
||||||
\
|
\
|
||||||
#ihover {\
|
#qr, #qp, #updater, #stats, #ihover, #overlay, #navlinks {\
|
||||||
max-height: 100%;\
|
position: fixed;\
|
||||||
max-width: 75%;\
|
}\
|
||||||
}\
|
|
||||||
\
|
\
|
||||||
#navlinks {\
|
#ihover {\
|
||||||
font-size: 16px;\
|
max-height: 100%;\
|
||||||
top: 25px;\
|
max-width: 75%;\
|
||||||
right: 5px;\
|
}\
|
||||||
}\
|
|
||||||
\
|
\
|
||||||
#overlay {\
|
#navlinks {\
|
||||||
top: 0;\
|
font-size: 16px;\
|
||||||
right: 0;\
|
top: 25px;\
|
||||||
left: 0;\
|
right: 5px;\
|
||||||
bottom: 0;\
|
}\
|
||||||
text-align: center;\
|
|
||||||
background: rgba(0,0,0,.5);\
|
|
||||||
z-index: 1;\
|
|
||||||
}\
|
|
||||||
#overlay::after {\
|
|
||||||
content: "";\
|
|
||||||
display: inline-block;\
|
|
||||||
height: 100%;\
|
|
||||||
vertical-align: middle;\
|
|
||||||
}\
|
|
||||||
#options {\
|
|
||||||
display: inline-block;\
|
|
||||||
padding: 5px;\
|
|
||||||
text-align: left;\
|
|
||||||
vertical-align: middle;\
|
|
||||||
width: 500px;\
|
|
||||||
}\
|
|
||||||
#credits {\
|
|
||||||
float: right;\
|
|
||||||
}\
|
|
||||||
#options ul {\
|
|
||||||
list-style: none;\
|
|
||||||
padding: 0;\
|
|
||||||
}\
|
|
||||||
#options label {\
|
|
||||||
text-decoration: underline;\
|
|
||||||
}\
|
|
||||||
#content > div {\
|
|
||||||
height: 450px;\
|
|
||||||
overflow: auto;\
|
|
||||||
}\
|
|
||||||
#content textarea {\
|
|
||||||
margin: 0;\
|
|
||||||
min-height: 100px;\
|
|
||||||
resize: vertical;\
|
|
||||||
width: 100%;\
|
|
||||||
}\
|
|
||||||
#flavors {\
|
|
||||||
height: 100%;\
|
|
||||||
}\
|
|
||||||
\
|
\
|
||||||
#updater {\
|
#overlay {\
|
||||||
text-align: right;\
|
top: 0;\
|
||||||
}\
|
right: 0;\
|
||||||
#updater input[type=text] {\
|
left: 0;\
|
||||||
width: 50px;\
|
bottom: 0;\
|
||||||
}\
|
text-align: center;\
|
||||||
#updater:not(:hover) {\
|
background: rgba(0,0,0,.5);\
|
||||||
border: none;\
|
z-index: 1;\
|
||||||
background: transparent;\
|
}\
|
||||||
}\
|
#overlay::after {\
|
||||||
|
content: "";\
|
||||||
|
display: inline-block;\
|
||||||
|
height: 100%;\
|
||||||
|
vertical-align: middle;\
|
||||||
|
}\
|
||||||
|
#options {\
|
||||||
|
display: inline-block;\
|
||||||
|
padding: 5px;\
|
||||||
|
text-align: left;\
|
||||||
|
vertical-align: middle;\
|
||||||
|
width: 500px;\
|
||||||
|
}\
|
||||||
|
#credits {\
|
||||||
|
float: right;\
|
||||||
|
}\
|
||||||
|
#options ul {\
|
||||||
|
list-style: none;\
|
||||||
|
padding: 0;\
|
||||||
|
}\
|
||||||
|
#options label {\
|
||||||
|
text-decoration: underline;\
|
||||||
|
}\
|
||||||
|
#content > div {\
|
||||||
|
height: 450px;\
|
||||||
|
overflow: auto;\
|
||||||
|
}\
|
||||||
|
#content textarea {\
|
||||||
|
margin: 0;\
|
||||||
|
min-height: 100px;\
|
||||||
|
resize: vertical;\
|
||||||
|
width: 100%;\
|
||||||
|
}\
|
||||||
|
#flavors {\
|
||||||
|
height: 100%;\
|
||||||
|
}\
|
||||||
\
|
\
|
||||||
#stats {\
|
#updater {\
|
||||||
border: none;\
|
text-align: right;\
|
||||||
}\
|
}\
|
||||||
|
#updater input[type=text] {\
|
||||||
|
width: 50px;\
|
||||||
|
}\
|
||||||
|
#updater:not(:hover) {\
|
||||||
|
border: none;\
|
||||||
|
background: transparent;\
|
||||||
|
}\
|
||||||
\
|
\
|
||||||
#watcher {\
|
#stats {\
|
||||||
position: absolute;\
|
border: none;\
|
||||||
}\
|
}\
|
||||||
#watcher > div {\
|
|
||||||
overflow: hidden;\
|
|
||||||
padding-right: 5px;\
|
|
||||||
padding-left: 5px;\
|
|
||||||
text-overflow: ellipsis;\
|
|
||||||
max-width: 200px;\
|
|
||||||
white-space: nowrap;\
|
|
||||||
}\
|
|
||||||
#watcher > div.move {\
|
|
||||||
text-decoration: underline;\
|
|
||||||
padding-top: 5px;\
|
|
||||||
}\
|
|
||||||
#watcher > div:last-child {\
|
|
||||||
padding-bottom: 5px;\
|
|
||||||
}\
|
|
||||||
\
|
\
|
||||||
#qp {\
|
#watcher {\
|
||||||
padding-bottom: 5px;\
|
position: absolute;\
|
||||||
}\
|
}\
|
||||||
.qphl {\
|
#watcher > div {\
|
||||||
outline: 2px solid rgba(216, 94, 49, .7);\
|
overflow: hidden;\
|
||||||
}\
|
padding-right: 5px;\
|
||||||
.inlined {\
|
padding-left: 5px;\
|
||||||
opacity: .5;\
|
text-overflow: ellipsis;\
|
||||||
}\
|
max-width: 200px;\
|
||||||
.inline td.reply {\
|
white-space: nowrap;\
|
||||||
background-color: rgba(255, 255, 255, 0.15);\
|
}\
|
||||||
border: 1px solid rgba(128, 128, 128, 0.5);\
|
#watcher > div.move {\
|
||||||
}\
|
text-decoration: underline;\
|
||||||
.filetitle, .replytitle, .postername, .commentpostername, .postertrip {\
|
padding-top: 5px;\
|
||||||
background: none;\
|
}\
|
||||||
}\
|
#watcher > div:last-child {\
|
||||||
.filtered {\
|
padding-bottom: 5px;\
|
||||||
text-decoration: line-through;\
|
}\
|
||||||
}\
|
\
|
||||||
'
|
#qp {\
|
||||||
|
padding-bottom: 5px;\
|
||||||
|
}\
|
||||||
|
.qphl {\
|
||||||
|
outline: 2px solid rgba(216, 94, 49, .7);\
|
||||||
|
}\
|
||||||
|
.inlined {\
|
||||||
|
opacity: .5;\
|
||||||
|
}\
|
||||||
|
.inline td.reply {\
|
||||||
|
background-color: rgba(255, 255, 255, 0.15);\
|
||||||
|
border: 1px solid rgba(128, 128, 128, 0.5);\
|
||||||
|
}\
|
||||||
|
.filetitle, .replytitle, .postername, .commentpostername, .postertrip {\
|
||||||
|
background: none;\
|
||||||
|
}\
|
||||||
|
.filtered {\
|
||||||
|
text-decoration: line-through;\
|
||||||
|
}'
|
||||||
};
|
};
|
||||||
|
|
||||||
Main.init();
|
Main.init();
|
||||||
|
|||||||
590
script.coffee
590
script.coffee
@ -1032,147 +1032,6 @@ qr =
|
|||||||
'image/' + type
|
'image/' + type
|
||||||
qr.mimeTypes = mimeTypes.split ', '
|
qr.mimeTypes = mimeTypes.split ', '
|
||||||
qr.el = ui.dialog 'qr', 'top:0;right:0;', "
|
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>
|
<div class=move>
|
||||||
Quick Reply <input type=checkbox name=autohide id=autohide title=Auto-hide>
|
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>
|
<span>#{if g.REPLY then '' else threads} <a class=close>x</a></span>
|
||||||
@ -2548,172 +2407,309 @@ Main =
|
|||||||
#nothing
|
#nothing
|
||||||
|
|
||||||
css: '
|
css: '
|
||||||
/* dialog styling */
|
/* dialog styling */
|
||||||
.dialog {
|
.dialog {
|
||||||
border: 1px solid rgba(0,0,0,.25);
|
border: 1px solid rgba(0,0,0,.25);
|
||||||
}
|
}
|
||||||
.move {
|
.move {
|
||||||
cursor: move;
|
cursor: move;
|
||||||
}
|
}
|
||||||
label, .favicon {
|
label, .favicon {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
a[href="javascript:;"] {
|
a[href="javascript:;"] {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.thread.stub > :not(.block),
|
.thread.stub > :not(.block),
|
||||||
#content > [name=tab]:not(:checked) + div,
|
#content > [name=tab]:not(:checked) + div,
|
||||||
#updater:not(:hover) > :not(.move),
|
#updater:not(:hover) > :not(.move),
|
||||||
#qp > input, #qp .inline, .forwarded {
|
#qp > input, #qp .inline, .forwarded {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.new {
|
.autohide:not(:hover) > form {
|
||||||
background: lime;
|
display: none;
|
||||||
}
|
}
|
||||||
.error {
|
#qr > .move {
|
||||||
color: red;
|
min-width: 300px;
|
||||||
}
|
overflow: hidden;
|
||||||
#error {
|
box-sizing: border-box;
|
||||||
cursor: default;
|
padding: 0 2px;
|
||||||
}
|
}
|
||||||
#error[href] {
|
#qr > .move > span {
|
||||||
cursor: pointer;
|
float: right;
|
||||||
}
|
}
|
||||||
td.replyhider {
|
#autohide, .close, #qr select, #dump, .captcha {
|
||||||
vertical-align: top;
|
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%;
|
||||||
|
}
|
||||||
|
|
||||||
.filesize + br + a {
|
.new {
|
||||||
float: left;
|
background: lime;
|
||||||
pointer-events: none;
|
}
|
||||||
}
|
.error {
|
||||||
img[md5], img[md5] + img {
|
color: red;
|
||||||
pointer-events: all;
|
}
|
||||||
}
|
#error {
|
||||||
.fitwidth img[md5] + img {
|
cursor: default;
|
||||||
max-width: 100%;
|
}
|
||||||
}
|
#error[href] {
|
||||||
.gecko > .fitwidth img[md5] + img,
|
cursor: pointer;
|
||||||
.presto > .fitwidth img[md5] + img {
|
}
|
||||||
width: 100%;
|
td.replyhider {
|
||||||
}
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
|
||||||
#qr, #qp, #updater, #stats, #ihover, #overlay, #navlinks {
|
.filesize + br + a {
|
||||||
position: fixed;
|
float: left;
|
||||||
}
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
img[md5], img[md5] + img {
|
||||||
|
pointer-events: all;
|
||||||
|
}
|
||||||
|
.fitwidth img[md5] + img {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
.gecko > .fitwidth img[md5] + img,
|
||||||
|
.presto > .fitwidth img[md5] + img {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
#ihover {
|
#qr, #qp, #updater, #stats, #ihover, #overlay, #navlinks {
|
||||||
max-height: 100%;
|
position: fixed;
|
||||||
max-width: 75%;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
#navlinks {
|
#ihover {
|
||||||
font-size: 16px;
|
max-height: 100%;
|
||||||
top: 25px;
|
max-width: 75%;
|
||||||
right: 5px;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
#overlay {
|
#navlinks {
|
||||||
top: 0;
|
font-size: 16px;
|
||||||
right: 0;
|
top: 25px;
|
||||||
left: 0;
|
right: 5px;
|
||||||
bottom: 0;
|
}
|
||||||
text-align: center;
|
|
||||||
background: rgba(0,0,0,.5);
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
#overlay::after {
|
|
||||||
content: "";
|
|
||||||
display: inline-block;
|
|
||||||
height: 100%;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
#options {
|
|
||||||
display: inline-block;
|
|
||||||
padding: 5px;
|
|
||||||
text-align: left;
|
|
||||||
vertical-align: middle;
|
|
||||||
width: 500px;
|
|
||||||
}
|
|
||||||
#credits {
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
#options ul {
|
|
||||||
list-style: none;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
#options label {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
#content > div {
|
|
||||||
height: 450px;
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
#content textarea {
|
|
||||||
margin: 0;
|
|
||||||
min-height: 100px;
|
|
||||||
resize: vertical;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
#flavors {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#updater {
|
#overlay {
|
||||||
text-align: right;
|
top: 0;
|
||||||
}
|
right: 0;
|
||||||
#updater input[type=text] {
|
left: 0;
|
||||||
width: 50px;
|
bottom: 0;
|
||||||
}
|
text-align: center;
|
||||||
#updater:not(:hover) {
|
background: rgba(0,0,0,.5);
|
||||||
border: none;
|
z-index: 1;
|
||||||
background: transparent;
|
}
|
||||||
}
|
#overlay::after {
|
||||||
|
content: "";
|
||||||
|
display: inline-block;
|
||||||
|
height: 100%;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
#options {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 5px;
|
||||||
|
text-align: left;
|
||||||
|
vertical-align: middle;
|
||||||
|
width: 500px;
|
||||||
|
}
|
||||||
|
#credits {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
#options ul {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
#options label {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
#content > div {
|
||||||
|
height: 450px;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
#content textarea {
|
||||||
|
margin: 0;
|
||||||
|
min-height: 100px;
|
||||||
|
resize: vertical;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#flavors {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
#stats {
|
#updater {
|
||||||
border: none;
|
text-align: right;
|
||||||
}
|
}
|
||||||
|
#updater input[type=text] {
|
||||||
|
width: 50px;
|
||||||
|
}
|
||||||
|
#updater:not(:hover) {
|
||||||
|
border: none;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
#watcher {
|
#stats {
|
||||||
position: absolute;
|
border: none;
|
||||||
}
|
}
|
||||||
#watcher > div {
|
|
||||||
overflow: hidden;
|
|
||||||
padding-right: 5px;
|
|
||||||
padding-left: 5px;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
max-width: 200px;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
#watcher > div.move {
|
|
||||||
text-decoration: underline;
|
|
||||||
padding-top: 5px;
|
|
||||||
}
|
|
||||||
#watcher > div:last-child {
|
|
||||||
padding-bottom: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#qp {
|
#watcher {
|
||||||
padding-bottom: 5px;
|
position: absolute;
|
||||||
}
|
}
|
||||||
.qphl {
|
#watcher > div {
|
||||||
outline: 2px solid rgba(216, 94, 49, .7);
|
overflow: hidden;
|
||||||
}
|
padding-right: 5px;
|
||||||
.inlined {
|
padding-left: 5px;
|
||||||
opacity: .5;
|
text-overflow: ellipsis;
|
||||||
}
|
max-width: 200px;
|
||||||
.inline td.reply {
|
white-space: nowrap;
|
||||||
background-color: rgba(255, 255, 255, 0.15);
|
}
|
||||||
border: 1px solid rgba(128, 128, 128, 0.5);
|
#watcher > div.move {
|
||||||
}
|
text-decoration: underline;
|
||||||
.filetitle, .replytitle, .postername, .commentpostername, .postertrip {
|
padding-top: 5px;
|
||||||
background: none;
|
}
|
||||||
}
|
#watcher > div:last-child {
|
||||||
.filtered {
|
padding-bottom: 5px;
|
||||||
text-decoration: line-through;
|
}
|
||||||
}
|
|
||||||
'
|
#qp {
|
||||||
|
padding-bottom: 5px;
|
||||||
|
}
|
||||||
|
.qphl {
|
||||||
|
outline: 2px solid rgba(216, 94, 49, .7);
|
||||||
|
}
|
||||||
|
.inlined {
|
||||||
|
opacity: .5;
|
||||||
|
}
|
||||||
|
.inline td.reply {
|
||||||
|
background-color: rgba(255, 255, 255, 0.15);
|
||||||
|
border: 1px solid rgba(128, 128, 128, 0.5);
|
||||||
|
}
|
||||||
|
.filetitle, .replytitle, .postername, .commentpostername, .postertrip {
|
||||||
|
background: none;
|
||||||
|
}
|
||||||
|
.filtered {
|
||||||
|
text-decoration: line-through;
|
||||||
|
}'
|
||||||
|
|
||||||
Main.init()
|
Main.init()
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user