diff --git a/css/zerobin.css b/css/zerobin.css
index 2bd230bb..ad26c61e 100644
--- a/css/zerobin.css
+++ b/css/zerobin.css
@@ -3,25 +3,25 @@
/* CSS Reset from YUI 3.4.1 (build 4118) - Copyright 2011 Yahoo! Inc. All rights reserved.
Licensed under the BSD License. - http://yuilibrary.com/license/ */
-html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}input,textarea,select{*font-size:100%}legend{color:#000}
+html{color:#000;background:#FFF}body,div,menu,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:disc}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}input,textarea,select{*font-size:100%}legend{color:#000}
-html {
-background-color:#455463;
-color:white;
-min-height:100%;
-background-image: linear-gradient(bottom, #0F1823 0%, #455463 100%);
-background-image: -o-linear-gradient(bottom, #0F1823 0%, #455463 100%);
-background-image: -moz-linear-gradient(bottom, #0F1823 0%, #455463 100%);
-background-image: -webkit-linear-gradient(bottom, #0F1823 0%, #455463 100%);
-background-image: -ms-linear-gradient(bottom, #0F1823 0%, #455463 100%);
-background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #0F1823), color-stop(1, #455463));
+html {
+ background-color:#455463;
+ color:white;
+ min-height:100%;
+ background-image: linear-gradient(bottom, #0F1823 0%, #455463 100%);
+ background-image: -o-linear-gradient(bottom, #0F1823 0%, #455463 100%);
+ background-image: -moz-linear-gradient(bottom, #0F1823 0%, #455463 100%);
+ background-image: -webkit-linear-gradient(bottom, #0F1823 0%, #455463 100%);
+ background-image: -ms-linear-gradient(bottom, #0F1823 0%, #455463 100%);
+ background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #0F1823), color-stop(1, #455463));
}
body {
-font-family: Arial, Helvetica, sans-serif;
-font-size: 0.8em;
-margin-bottom:15px;
-padding-left:60px; padding-right:60px;
+ font-family: Arial, Helvetica, sans-serif;
+ font-size: 0.8em;
+ margin-bottom:15px;
+ padding-left:60px; padding-right:60px;
}
a { color:#0F388F; }
@@ -44,23 +44,21 @@ left:1px;
cursor:pointer;
}
-h2 {
+header > h1 + p {
color:#000;
-font-size:1em;
-display:inline;
+font-size:1em;
font-style:italic;
font-weight:bold;
position:relative;
bottom:8px;}
-h3 {
+header > h1 + p + p {
color:#94a3b4;
font-size:0.7em;
-display:inline;
position:relative;
bottom:8px;}
-#aboutbox {
+#about {
font-size:0.85em;
color: #94a3b4;
padding: 4px 8px 4px 16px;
@@ -71,8 +69,8 @@ float:right;
width:60%;
}
-div#aboutbox a { color: #94a3b4; }
-textarea#message,div#cleartext,.replymessage, code {
+#about a { color: #94a3b4; }
+textarea#message,main,.replymessage, code {
clear:both;
color:black;
background-color:#fff;
@@ -89,14 +87,14 @@ box-sizing:border-box;
width:100%;
}
-
-div#status {
+#status {
clear:both;
padding:5px 10px;
}
-div#pasteresult {
+#pasteresult {
+display: block;
background-color:#1F2833;
color:white;
padding:4px 12px;
@@ -105,13 +103,14 @@ clear:both;
-webkit-box-shadow: inset 0px 2px 2px #000;
box-shadow: inset 0px 2px 5px #000;
}
-div#pasteresult a { color:white; }
-div#pasteresult button { margin-left:11px }
-div#deletelink { float:right; }
-div#toolbar, div#status { margin-bottom:5px; }
+#pasteresult a { color:white; }
+#pasteresult button { margin-left:11px }
+#pastelink { display:inline; }
+#deletelink { display:inline; float:right; }
+menu[type=toolbar], #status { margin-bottom:5px; }
#copyhint { color: #666; font-size:8pt; }
-button,.button,div#expiration {
+button,.button,#expiration {
color:#fff;
background-color:#323B47;
background-repeat:no-repeat;
@@ -164,27 +163,27 @@ position:relative;
top:2px;
}
-div#expiration, div#rawtextbutton, div#burnafterreadingoption, div#opendisc, div#syntaxcoloringoption {
+#expiration, #rawtextbutton, #burnafterreadingoption, #opendisc, #syntaxcoloringoption {
background-color:#414D5A;
padding:6px 8px;
margin:0px 5px 0px 0px;;
position: relative;
bottom:1px; /* WTF ? Why is this shifted by 1 pixel ? */
}
-div#expiration select {
+#expiration select {
color:#eee;
background: transparent;
border: none;
}
-div#expiration select option {
+#expiration select option {
color:#eee;
background: #414D5A;
background-color:#414D5A;
}
-div#remainingtime {
+#remainingtime {
color: #94a3b4;
display:inline;
font-size:0.85em;
@@ -200,6 +199,7 @@ button#newbutton { float:right; margin-right:0px;margin-bottom:5px; display:inli
input { color:#777; font-size:1em; padding:6px; border: 1px solid #28343F; }
.nonworking {
+display:block;
background-color:#fff;
color:#000;
width:100%;
@@ -212,7 +212,7 @@ border-radius:4px;
padding:5px;
}
-div#ienotice {
+#ienotice {
background-color:#7E98AF;
color:#000;
font-size:0.85em;
@@ -224,11 +224,16 @@ border-radius:4px;
display:none;
}
-div#ienotice a {
+#ienotice a {
color:black;
}
-div#oldienotice {
+#ienotice ul {
+display:inline-block;
+text-align:left;
+}
+
+#oldienotice {
display:none;
}
@@ -241,24 +246,26 @@ color:#FF0;
/* --- discussion related CSS ------- */
-div#discussion { /* Discussion container */
+section#comments { /* Discussion container */
margin-top:20px;
width:100%;
-margin-left:-30px;
min-width:200px;
}
-h4 {
+section#comments button {
+margin-top: 1em;
+}
+
+h2 {
font-size:1.2em;
color: #94A3B4;
font-style:italic;
font-weight:bold;
position:relative;
-margin-left:30px;
}
-div.comment /* One single reply */
+article /* One single reply */
{
background-color:#CECED6;
color:#000;
@@ -268,26 +275,30 @@ font-size:9pt;
border-left: 1px solid #859AAE;
border-top: 1px solid #859AAE;
padding:5px 0px 5px 5px;
-margin-left:30px;
-moz-box-shadow: -3px -3px 5px rgba(0,0,0,0.15);
-webkit-box-shadow: -3px -3px 5px rgba(0,0,0,0.15);
box-shadow: -3px -3px 5px rgba(0,0,0,0.15);
min-width:200px;
overflow:auto;
}
+
+article article {
+margin-left:5ex;
+}
/* FIXME: Add min-width */
-div.reply {
+form#reply {
+display:block
margin: 5px 0px 0px 30px;
}
-div#replystatus {
+#replystatus {
display:inline;
padding:1px 7px;
font-family: Arial, Helvetica, sans-serif;
}
-div.comment button {
+article button {
color:#446;
background-color:#aab;
background-repeat:no-repeat;
@@ -295,7 +306,7 @@ background-position:center left;
padding:0px 2px;
font-size:0.73em;
margin: 3px 5px 3px 0px;
-display:inline;
+display:block;
background-image: linear-gradient(bottom, #aab 0%, #ccc 100%);
background-image: -o-linear-gradient(bottom, #aab 0%, #ccc 100%);
background-image: -moz-linear-gradient(bottom, #aab 0%, #ccc 100%);
@@ -311,7 +322,7 @@ box-shadow: inset 0px 1px 2px #eee;
border-radius: 3px;
-moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
}
-div.comment button:hover {
+ article button:hover {
background-image: linear-gradient(bottom, #ccd 0%, #fff 100%);
background-image: -o-linear-gradient(bottom, #ccd 0%, #fff 100%);
background-image: -moz-linear-gradient(bottom, #ccd 0%, #fff 100%);
@@ -319,7 +330,7 @@ background-image: -webkit-linear-gradient(bottom, #ccd 0%, #fff 100%);
background-image: -ms-linear-gradient(bottom, #ccd 0%, #fff 100%);
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #ccd), color-stop(1, #fff));
}
-div.comment button:active {
+article button:active {
background-image: linear-gradient(bottom, #fff 0%, #889 100%);
background-image: -o-linear-gradient(bottom, #fff 0%, #889 100%);
background-image: -moz-linear-gradient(bottom, #fff 0%, #889 100%);
@@ -330,7 +341,7 @@ position:relative;
top:1px;
}
-div.comment input {
+article input {
padding:2px;
}
@@ -338,18 +349,26 @@ textarea#replymessage {
margin-top:5px;
}
-div.commentmeta {
+article > footer {
color: #fff;
background-color:#8EA0B2;
margin-bottom:3px;
padding:0px 0px 0px 3px;
}
-span.commentdate {
+
+article > footer > time::before {
+margin-left: 2ex;
+content: '('
+}
+article > footer > time::after {
+content: ')'
+}
+article > footer > time {
color: #BFCEDE;
}
-img.vizhash {
+article > footer img {
width:16px;
height:16px;
position:relative;
@@ -365,4 +384,10 @@ pre a:hover {
color:#64B9C6;
}
+button.addcomment {
+margin-top: 1em;
+}
+abbr.acronym {
+font-variant: small-caps;
+}
diff --git a/js/zerobin.js b/js/zerobin.js
index a9b6c1d9..2ee12291 100644
--- a/js/zerobin.js
+++ b/js/zerobin.js
@@ -158,7 +158,7 @@ function htmlEntities(str) {
*/
function setElementText(element, text) {
// For IE<10.
- if ($('div#oldienotice').is(":visible")) {
+ if ($('#oldienotice').is(":visible")) {
// IE<10 does not support white-space:pre-wrap; so we have to do this BIG UGLY STINKING THING.
var html = htmlEntities(text).replace(/\n/ig,"\r\n
");
element.html('
'+html+''); @@ -173,13 +173,13 @@ function setElementText(element, text) { */ function applySyntaxColoring() { - if ($('div#cleartext').html().substring(0,11) != '
')
+ if ($('main').html().substring(0,11) != '')
{
// highlight.js expects code to be surrounded by
- $('div#cleartext').html(''+ $('div#cleartext').html()+'
');
+ $('main').html(''+ $('main').html()+'
');
}
- hljs.highlightBlock(document.getElementById('cleartext'));
- $('div#cleartext').css('padding','0'); // Remove white padding around code box.
+ hljs.highlightBlock(document.getElementByTag('main'));
+ $('main').css('padding','0'); // Remove white padding around code box.
}
@@ -193,28 +193,29 @@ function displayMessages(key, comments) {
try { // Try to decrypt the paste.
var cleartext = zeroDecipher(key, comments[0].data);
} catch(err) {
- $('div#cleartext').hide();
+ $('main').hide();
$('button#clonebutton').hide();
showError('Could not decrypt data (Wrong key ?)');
return;
}
- setElementText($('div#cleartext'), cleartext);
- urls2links($('div#cleartext')); // Convert URLs to clickable links.
+ setElementText($('main'), cleartext);
+ urls2links($('main')); // Convert URLs to clickable links.
// comments[0] is the paste itself.
if (comments[0].meta.syntaxcoloring) applySyntaxColoring();
// Display paste expiration.
- if (comments[0].meta.expire_date) $('div#remainingtime').removeClass('foryoureyesonly').text('This document will expire in '+secondsToHuman(comments[0].meta.remaining_time)+'.').show();
+ if (comments[0].meta.expire_date) $('#remainingtime').removeClass('foryoureyesonly').text('This document will expire in '+secondsToHuman(comments[0].meta.remaining_time)+'.').show();
if (comments[0].meta.burnafterreading) {
- $('div#remainingtime').addClass('foryoureyesonly').text('FOR YOUR EYES ONLY. Don\'t close this window, this message can\'t be displayed again.').show();
+ $('#remainingtime').addClass('foryoureyesonly').text('FOR YOUR EYES ONLY. Don\'t close this window, this message can\'t be displayed again.').show();
$('button#clonebutton').hide(); // Discourage cloning (as it can't really be prevented).
}
+ // If the discussion is opened on this paste, display it.
// If the discussion is opened on this paste, display it.
if (comments[0].meta.opendiscussion) {
- $('div#comments').html('');
+ $('#comments').html('Discussion
');
// For each comment.
for (var i = 1; i < comments.length; i++) {
var comment=comments[i];
@@ -222,38 +223,47 @@ function displayMessages(key, comments) {
try {
cleartext = zeroDecipher(key, comment.data);
} catch(err) { }
- var place = $('div#comments');
+ var place = $('#comments');
// If parent comment exists, display below (CSS will automatically shift it right.)
- var cname = 'div#comment_'+comment.meta.parentid
+ var cname = '#comment_'+comment.meta.parentid
// If the element exists in page
if ($(cname).length) {
place = $(cname);
}
- var divComment = $(''
- + ''
- + ''
- + '');
- setElementText(divComment.find('div.commentdata'), cleartext);
- // Convert URLs to clickable links in comment.
- urls2links(divComment.find('div.commentdata'));
- divComment.find('span.nickname').html('(Anonymous)');
+ var article = $(''
+ /*+ ''
+ + ''*/
+ + ' ');
+ var footer = $('');
+ article.append(footer);
// Try to get optional nickname:
try {
- divComment.find('span.nickname').text(zeroDecipher(key, comment.meta.nickname));
- } catch(err) { }
- divComment.find('span.commentdate').text(' ('+(new Date(comment.meta.postdate*1000).toString())+')').attr('title','CommentID: ' + comment.meta.commentid);
+ article.find('footer').text(zeroDecipher(key, comment.meta.nickname));
+ } catch(err) { article.find('footer').text(err) }
// If an avatar is available, display it.
if (comment.meta.vizhash) {
- divComment.find('span.nickname').before('
');
+ article.find('footer').prepend('
');
}
-
- place.append(divComment);
+
+ var articleDate = new Date(comment.meta.postdate*1000);
+ article.find('footer').append('