Goyslop/4chan-x
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Move the QR styling into the main style, decrement.

Browse Source
This commit is contained in:
Nicolas Stepien 2012-01-17 15:48:36 +01:00
parent 3fb41810d2
commit 771964993a
2 changed files with 587 additions and 454 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

317
4chan_x.user.js
View File

@ -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,74 +3056,212 @@
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 {\
float: right;\
}\
#autohide, .close, #qr select, #dump, .captcha {\
cursor: pointer;\ cursor: pointer;\
}\ }\
td.replyhider {\ #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;\ 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 {\
background: lime;\
}\
.error {\
color: red;\
}\
#error {\
cursor: default;\
}\
#error[href] {\
cursor: pointer;\
}\
td.replyhider {\
vertical-align: top;\
}\
\
.filesize + br + a {\
float: left;\ float: left;\
pointer-events: none;\ pointer-events: none;\
}\ }\
img[md5], img[md5] + img {\ img[md5], img[md5] + img {\
pointer-events: all;\ pointer-events: all;\
}\ }\
.fitwidth img[md5] + img {\ .fitwidth img[md5] + img {\
max-width: 100%;\ max-width: 100%;\
}\ }\
.gecko > .fitwidth img[md5] + img,\ .gecko > .fitwidth img[md5] + img,\
.presto > .fitwidth img[md5] + img {\ .presto > .fitwidth img[md5] + img {\
width: 100%;\ width: 100%;\
}\ }\
\ \
#qr, #qp, #updater, #stats, #ihover, #overlay, #navlinks {\ #qr, #qp, #updater, #stats, #ihover, #overlay, #navlinks {\
position: fixed;\ position: fixed;\
}\ }\
\ \
#ihover {\ #ihover {\
max-height: 100%;\ max-height: 100%;\
max-width: 75%;\ max-width: 75%;\
}\ }\
\ \
#navlinks {\ #navlinks {\
font-size: 16px;\ font-size: 16px;\
top: 25px;\ top: 25px;\
right: 5px;\ right: 5px;\
}\ }\
\ \
#overlay {\ #overlay {\
top: 0;\ top: 0;\
right: 0;\ right: 0;\
left: 0;\ left: 0;\
@ -3131,98 +3269,97 @@
text-align: center;\ text-align: center;\
background: rgba(0,0,0,.5);\ background: rgba(0,0,0,.5);\
z-index: 1;\ z-index: 1;\
}\ }\
#overlay::after {\ #overlay::after {\
content: "";\ content: "";\
display: inline-block;\ display: inline-block;\
height: 100%;\ height: 100%;\
vertical-align: middle;\ vertical-align: middle;\
}\ }\
#options {\ #options {\
display: inline-block;\ display: inline-block;\
padding: 5px;\ padding: 5px;\
text-align: left;\ text-align: left;\
vertical-align: middle;\ vertical-align: middle;\
width: 500px;\ width: 500px;\
}\ }\
#credits {\ #credits {\
float: right;\ float: right;\
}\ }\
#options ul {\ #options ul {\
list-style: none;\ list-style: none;\
padding: 0;\ padding: 0;\
}\ }\
#options label {\ #options label {\
text-decoration: underline;\ text-decoration: underline;\
}\ }\
#content > div {\ #content > div {\
height: 450px;\ height: 450px;\
overflow: auto;\ overflow: auto;\
}\ }\
#content textarea {\ #content textarea {\
margin: 0;\ margin: 0;\
min-height: 100px;\ min-height: 100px;\
resize: vertical;\ resize: vertical;\
width: 100%;\ width: 100%;\
}\ }\
#flavors {\ #flavors {\
height: 100%;\ height: 100%;\
}\ }\
\ \
#updater {\ #updater {\
text-align: right;\ text-align: right;\
}\ }\
#updater input[type=text] {\ #updater input[type=text] {\
width: 50px;\ width: 50px;\
}\ }\
#updater:not(:hover) {\ #updater:not(:hover) {\
border: none;\ border: none;\
background: transparent;\ background: transparent;\
}\ }\
\ \
#stats {\ #stats {\
border: none;\ border: none;\
}\ }\
\ \
#watcher {\ #watcher {\
position: absolute;\ position: absolute;\
}\ }\
#watcher > div {\ #watcher > div {\
overflow: hidden;\ overflow: hidden;\
padding-right: 5px;\ padding-right: 5px;\
padding-left: 5px;\ padding-left: 5px;\
text-overflow: ellipsis;\ text-overflow: ellipsis;\
max-width: 200px;\ max-width: 200px;\
white-space: nowrap;\ white-space: nowrap;\
}\ }\
#watcher > div.move {\ #watcher > div.move {\
text-decoration: underline;\ text-decoration: underline;\
padding-top: 5px;\ padding-top: 5px;\
}\ }\
#watcher > div:last-child {\ #watcher > div:last-child {\
padding-bottom: 5px;\ padding-bottom: 5px;\
}\ }\
\ \
#qp {\ #qp {\
padding-bottom: 5px;\ padding-bottom: 5px;\
}\ }\
.qphl {\ .qphl {\
outline: 2px solid rgba(216, 94, 49, .7);\ outline: 2px solid rgba(216, 94, 49, .7);\
}\ }\
.inlined {\ .inlined {\
opacity: .5;\ opacity: .5;\
}\ }\
.inline td.reply {\ .inline td.reply {\
background-color: rgba(255, 255, 255, 0.15);\ background-color: rgba(255, 255, 255, 0.15);\
border: 1px solid rgba(128, 128, 128, 0.5);\ border: 1px solid rgba(128, 128, 128, 0.5);\
}\ }\
.filetitle, .replytitle, .postername, .commentpostername, .postertrip {\ .filetitle, .replytitle, .postername, .commentpostername, .postertrip {\
background: none;\ background: none;\
}\ }\
.filtered {\ .filtered {\
text-decoration: line-through;\ text-decoration: line-through;\
}\ }'
'
}; };
Main.init(); Main.init();

456
script.coffee
View File

@ -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,74 +2407,212 @@ 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 {
float: right;
}
#autohide, .close, #qr select, #dump, .captcha {
cursor: pointer; cursor: pointer;
} }
td.replyhider { #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; 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 {
background: lime;
}
.error {
color: red;
}
#error {
cursor: default;
}
#error[href] {
cursor: pointer;
}
td.replyhider {
vertical-align: top;
}
.filesize + br + a {
float: left; float: left;
pointer-events: none; pointer-events: none;
} }
img[md5], img[md5] + img { img[md5], img[md5] + img {
pointer-events: all; pointer-events: all;
} }
.fitwidth img[md5] + img { .fitwidth img[md5] + img {
max-width: 100%; max-width: 100%;
} }
.gecko > .fitwidth img[md5] + img, .gecko > .fitwidth img[md5] + img,
.presto > .fitwidth img[md5] + img { .presto > .fitwidth img[md5] + img {
width: 100%; width: 100%;
} }
#qr, #qp, #updater, #stats, #ihover, #overlay, #navlinks { #qr, #qp, #updater, #stats, #ihover, #overlay, #navlinks {
position: fixed; position: fixed;
} }
#ihover { #ihover {
max-height: 100%; max-height: 100%;
max-width: 75%; max-width: 75%;
} }
#navlinks { #navlinks {
font-size: 16px; font-size: 16px;
top: 25px; top: 25px;
right: 5px; right: 5px;
} }
#overlay { #overlay {
top: 0; top: 0;
right: 0; right: 0;
left: 0; left: 0;
@ -2623,97 +2620,96 @@ Main =
text-align: center; text-align: center;
background: rgba(0,0,0,.5); background: rgba(0,0,0,.5);
z-index: 1; z-index: 1;
} }
#overlay::after { #overlay::after {
content: ""; content: "";
display: inline-block; display: inline-block;
height: 100%; height: 100%;
vertical-align: middle; vertical-align: middle;
} }
#options { #options {
display: inline-block; display: inline-block;
padding: 5px; padding: 5px;
text-align: left; text-align: left;
vertical-align: middle; vertical-align: middle;
width: 500px; width: 500px;
} }
#credits { #credits {
float: right; float: right;
} }
#options ul { #options ul {
list-style: none; list-style: none;
padding: 0; padding: 0;
} }
#options label { #options label {
text-decoration: underline; text-decoration: underline;
} }
#content > div { #content > div {
height: 450px; height: 450px;
overflow: auto; overflow: auto;
} }
#content textarea { #content textarea {
margin: 0; margin: 0;
min-height: 100px; min-height: 100px;
resize: vertical; resize: vertical;
width: 100%; width: 100%;
} }
#flavors { #flavors {
height: 100%; height: 100%;
} }
#updater { #updater {
text-align: right; text-align: right;
} }
#updater input[type=text] { #updater input[type=text] {
width: 50px; width: 50px;
} }
#updater:not(:hover) { #updater:not(:hover) {
border: none; border: none;
background: transparent; background: transparent;
} }
#stats { #stats {
border: none; border: none;
} }
#watcher { #watcher {
position: absolute; position: absolute;
} }
#watcher > div { #watcher > div {
overflow: hidden; overflow: hidden;
padding-right: 5px; padding-right: 5px;
padding-left: 5px; padding-left: 5px;
text-overflow: ellipsis; text-overflow: ellipsis;
max-width: 200px; max-width: 200px;
white-space: nowrap; white-space: nowrap;
} }
#watcher > div.move { #watcher > div.move {
text-decoration: underline; text-decoration: underline;
padding-top: 5px; padding-top: 5px;
} }
#watcher > div:last-child { #watcher > div:last-child {
padding-bottom: 5px; padding-bottom: 5px;
} }
#qp { #qp {
padding-bottom: 5px; padding-bottom: 5px;
} }
.qphl { .qphl {
outline: 2px solid rgba(216, 94, 49, .7); outline: 2px solid rgba(216, 94, 49, .7);
} }
.inlined { .inlined {
opacity: .5; opacity: .5;
} }
.inline td.reply { .inline td.reply {
background-color: rgba(255, 255, 255, 0.15); background-color: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(128, 128, 128, 0.5); border: 1px solid rgba(128, 128, 128, 0.5);
} }
.filetitle, .replytitle, .postername, .commentpostername, .postertrip { .filetitle, .replytitle, .postername, .commentpostername, .postertrip {
background: none; background: none;
} }
.filtered { .filtered {
text-decoration: line-through; text-decoration: line-through;
} }'
'
Main.init() Main.init()