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 = $('
(Anonymous)
'); + 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('[vizhash]'); } - - place.append(divComment); + + var articleDate = new Date(comment.meta.postdate*1000); + article.find('footer').append('