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

Initial replies list styling.

Browse Source
This commit is contained in:
Nicolas Stepien 2012-01-17 02:41:47 +01:00
parent 1e7d22223e
commit 0f4e47b958
2 changed files with 37 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
4chan_x.user.js
View File

@ -1373,7 +1373,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, #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;}.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>⨯</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><ol><a id=addReply>+</a></ol></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;', "<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, #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 > ol { top: 0; right: 0; bottom: 0; left: 0; margin: 0; padding: 0; overflow: hidden; position: absolute; white-space: nowrap;}#replies > ol:hover { overflow-x: auto;}#replies > ol > li { background-color: rgba(0,0,0,.5); border: 1px solid #000; box-sizing: border-box; color: #FFF; display: inline-block; height: 80px; width: 80px; margin:10px; padding: 2px; opacity: .8; text-shadow: 0 1px 1px #000; -webkit-transition: opacity .25s; -moz-transition: opacity .25s; -o-transition: opacity .25s; transition: opacity .25s;}#replies > ol > li:hover { opacity: .9;}#replies > ol > li#selected { opacity: 1;}.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>⨯</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><ol><a id=addReply>+</a></ol></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();

36
script.coffee
View File

@ -1066,6 +1066,42 @@ qr =
#qr:not(.dump) output {
display: none;
}
#replies {
display: block;
height: 100px;
position: relative;
}
#replies > ol {
top: 0; right: 0; bottom: 0; left: 0;
margin: 0; padding: 0;
overflow: hidden;
position: absolute;
white-space: nowrap;
}
#replies > ol:hover {
overflow-x: auto;
}
#replies > ol > li {
background-color: rgba(0,0,0,.5);
border: 1px solid #000;
box-sizing: border-box;
color: #FFF;
display: inline-block;
height: 80px; width: 80px;
margin:10px; padding: 2px;
opacity: .8;
text-shadow: 0 1px 1px #000;
-webkit-transition: opacity .25s;
-moz-transition: opacity .25s;
-o-transition: opacity .25s;
transition: opacity .25s;
}
#replies > ol > li:hover {
opacity: .9;
}
#replies > ol > li#selected {
opacity: 1;
}
.field {
border: 1px solid #CCC;
color: #333;