twisterarmy/twister-html
1
0
Fork 0
mirror of https://github.com/twisterarmy/twister-html.git synced 2025-02-09 21:44:15 +00:00
Code Issues Projects Releases Wiki Activity

Merge pull request #267 from slr/tasty-markdown

Browse Source 
tasty markdown
This commit is contained in:
miguelfreitas 2015-07-15 13:13:20 -03:00
commit 5145bcf7c9
5 changed files with 500 additions and 278 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
css/style.css
View File

@ -1,19 +1,21 @@
@font-face @font-face {
{
font-family: "Open Sans"; font-family: "Open Sans";
src: url("OpenSans-Regular.ttf"); src: url("OpenSans-Regular.ttf");
font-weight: normal;
font-style: normal;
} }
@font-face
{ @font-face {
font-family: "Open Sans"; font-family: "Open Sans";
src: url("OpenSans-Bold.ttf"); src: url("OpenSans-Bold.ttf");
font-weight: bold; font-weight: bold;
} }
@font-face
{ @font-face {
font-family: "Symbola"; font-family: "Symbola";
src: url("Symbola.ttf"); src: url("Symbola.ttf");
} }
html, body, div, span, applet, object, iframe, html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, a, abbr, acronym, address, big, cite, code,
@ -32,7 +34,6 @@ time, mark, audio, video, textarea
padding: 0; padding: 0;
border: 0; border: 0;
font-size: 100%; font-size: 100%;
font: inherit;
vertical-align: baseline; vertical-align: baseline;
box-sizing: border-box; box-sizing: border-box;
font-family: 'Open Sans', sans-serif, Symbola; font-family: 'Open Sans', sans-serif, Symbola;
@ -1024,12 +1025,17 @@ ol.toptrends-list {
opacity: .5; opacity: .5;
text-decoration: none; text-decoration: none;
} }
.post-text
{ .post-text {
font-size: 13px; font-size: 13px;
margin: 2px 10px 4px 60px; margin: 2px 10px 4px 60px;
word-wrap: break-word; word-wrap: break-word;
} }
.post-text samp {
background: #f0efcc;
}
.post-context .post-context
{ {
font-size: 11px; font-size: 11px;

263
js/twister_formatpost.js
View File

@ -226,26 +226,242 @@ function htmlFormatMsg(msg, mentions) {
return i; return i;
} }
function markdown(str, chr, tag) {
function whiteSpace(i, j) {
j++;
for (i += 1; i < j; i++) {
if (p[i].w)
return true;
}
return false;
}
var i, j, t, l, r, strEncoded;
var w = false;
var p = [];
// collecting chars position data
for (i = 0; i < str.length; i++) {
if (str[i] === chr) {
for (j = i + 1; j < str.length; j++) {
if (str[j] !== chr)
break;
}
if (i === 0) {
p.push({i: i, k: j - i, t: -1, w: w, a: -1, p: -1});
w = false;
} else if (j === str.length) {
p.push({i: i, k: j - i, t: 1, w: w, a: -1, p: -1});
w = false;
} else {
if (stopCharsMarkDown.indexOf(str[i - 1]) > -1) {
l = 1;
for (t = i - 2; t > -1; t--) {
if (str[t] === chr) {
l = -1;
break;
} else if (stopCharsMarkDown.indexOf(str[t]) === -1) {
l = whiteSpacesMarkDown.indexOf(str[t]);
break;
}
}
} else
l = whiteSpacesMarkDown.indexOf(str[i - 1]);
if (stopCharsMarkDown.indexOf(str[j]) > -1) {
r = 1;
for (t = j + 1; t < str.length; t++) {
if (str[t] === chr) {
r = -1;
break;
} else if (stopCharsMarkDown.indexOf(str[t]) === -1) {
r = whiteSpacesMarkDown.indexOf(str[t]);
break;
}
}
} else
r = whiteSpacesMarkDown.indexOf(str[j]);
if (l > -1) {
if (r > -1) {
if (j - i > 2) {
l = p.push({i: i, k: j - i - 1, t: -1, w: w, a: -1, p: -1}) - 1;
p[l].a = p.push({i: j - 1, k: 1, t: 1, w: false, a: l, p: -1}) - 1;
}
t = 10;
} else
t = -1;
} else {
if (r > -1)
t = 1;
else
t = 0;
}
if (t !== 10)
p.push({i: i, k: j - i, t: t, w: w, a: -1, p: -1});
w = false;
}
i = j - 1;
} else if (!w && whiteSpaces.indexOf(str[i]) > -1) {
w = true;
}
}
// calculating dependencies
for (i = 0; i < p.length; i++) {
if (p[i].t < 1 && p[i].a === -1) {
t = i;
for (j = i + 1; j < p.length; j++) {
if (p[i].t === 0 && whiteSpace(i, j)) {
i = j - 1;
break;
} else if (p[j].t < 1 && p[j].a === -1) {
p[t].p = j;
t = j;
} else if (p[j].t === 1 && p[j].a === -1) {
p[i].a = j;
p[j].a = i;
i = j;
break;
}
}
}
}
for (i = 0; i < p.length; i++) {
if (p[i].t === -1 && p[i].a === -1) {
for (j = p[i].p; j > -1; j = p[j].p) {
if (whiteSpace(i, j)) {
i = j - 1;
break;
} else if (p[j].t === 0
&& !(p[j].p > -1 && p[p[j].p].t === 0 && !whiteSpace(j, p[j].p))) {
p[j].a = i;
p[i].a = j;
i = j;
break;
}
}
}
}
// changing the string
if (chr === '`') {
for (i = 0; i < p.length; i++) {
if (p[i].a > -1) {
if (p[i].t === -1 || (p[i].t === 0 && p[i].a > i)) {
if (p[i].k > 1)
t = '<' + tag + '>' + Array(p[i].k).join(chr);
else
t = '<' + tag + '>';
j = p[i].a;
t = t + str.slice(p[i].i + p[i].k, p[j].i);
if (p[j].k > 1)
t = t + Array(p[i].k).join(chr) + '</' + tag + '>';
else
t = t + '</' + tag + '>';
html.push(t.replace(/&(?!lt;|gt;)/g, '&amp;'));
strEncoded = '>' + (html.length - 1).toString() + '<';
str = str.slice(0, p[i].i) + strEncoded + str.slice(p[j].i + p[j].k);
l = strEncoded.length - p[j].i - p[j].k + p[i].i;
i = j;
for (j += 1; j < p.length; j++)
p[j].i += l;
}
}
}
} else {
for (i = 0; i < p.length; i++) {
if (p[i].a > -1) {
if (p[i].t === -1 || (p[i].t === 0 && p[i].a > i)) {
if (p[i].k > 1)
html.push('<' + tag + '>' + Array(p[i].k).join(chr));
else
html.push('<' + tag + '>');
} else if (p[i].t === 1 || (p[i].t === 0 && p[i].a < i)) {
if (p[i].k > 1)
html.push(Array(p[i].k).join(chr) + '</' + tag + '>');
else
html.push('</' + tag + '>');
}
strEncoded = '>' + (html.length - 1).toString() + '<';
str = str.slice(0, p[i].i) + strEncoded + str.slice(p[i].i + p[i].k);
l = strEncoded.length - p[i].k;
for (j = i + 1; j < p.length; j++)
p[j].i += l;
}
}
}
return str;
}
function htmlSplitCounter(str) { function htmlSplitCounter(str) {
html.push('<span class="splited-post-counter">' + str + '</span>'); html.push('<span class="splited-post-counter">' + str + '</span>');
return '>' + (html.length - 1).toString() + '<'; return '>' + (html.length - 1).toString() + '<';
} }
function unpackHtml(str) {
var t;
for (var i = 0; i < str.length - 2; i++) {
if (str[i] === '>') {
for (var j = i + 2; j < str.length; j++) {
if (str[j] === '<')
break;
}
t = html[parseInt(str.slice(i + 1, j))];
str = str.slice(0, i) + t + str.slice(j + 1);
i = i + t.length - 1;
}
}
return str;
}
var mentionsChars = 'abcdefghijklmnopqrstuvwxyz_0123456789'; var mentionsChars = 'abcdefghijklmnopqrstuvwxyz_0123456789';
var stopCharsTrailing = '/\\.,:;?!*%\'"[](){}^|«»…\u201C\u201D\u2026\u2014\u4E00\u3002\uFF0C\uFF1A\uFF1F\uFF01\u3010\u3011'; var stopCharsTrailing = '/\\*~_-`.,:;?!%\'"[](){}^|«»…\u201C\u201D\u2026\u2014\u4E00\u3002\uFF0C\uFF1A\uFF1F\uFF01\u3010\u3011';
var stopCharsTrailingUrl = stopCharsTrailing.slice(1); var stopCharsTrailingUrl = stopCharsTrailing.slice(1);
var whiteSpaces = ' \f\n\r\t\v​\u00A0\u1680\u180E\u2000​\u2001\u2002​\u2003\u2004\u2005\u2006​\u2007\u2008​\u2009\u200A\u2028\u2029​\u202F\u205F\u3000'; var whiteSpaces = ' \f\n\r\t\v​\u00A0\u1680\u180E\u2000​\u2001\u2002​\u2003\u2004\u2005\u2006​\u2007\u2008​\u2009\u200A\u2028\u2029​\u202F\u205F\u3000';
var stopCharsLeft = '<' + whiteSpaces; var stopCharsLeft = '<' + whiteSpaces;
var stopCharsRight = '>' + whiteSpaces; var stopCharsRight = '>' + whiteSpaces;
var stopCharsRightHashtags = stopCharsRight + stopCharsTrailing; var stopCharsRightHashtags = '>/\\.,:;?!%\'"[](){}^|«»…\u201C\u201D\u2026\u2014\u4E00\u3002\uFF0C\uFF1A\uFF1F\uFF01\u3010\u3011' // same as stopCharsTrailing but without '*~_-`' plus '>'
var j, str, strEncoded; + whiteSpaces;
var whiteSpacesMarkDown = whiteSpaces + '+=&/\\.,:;?!%\'"[](){}^|«»…\u201C\u201D\u2026\u2014\u4E00\u3002\uFF0C\uFF1A\uFF1F\uFF01\u3010\u3011';
var stopCharsMarkDown = '*~_-`';
var i, j, k, str, strEncoded;
var html = []; var html = [];
msg = escapeHtmlEntities(msg); msg = markdown(escapeHtmlEntities(msg),
'`', 'samp'); // kind of monospace, sequence of chars inside will be escaped from markup
for (var i = 0; i < msg.length - 7; i++) { for (i = 0; i < msg.length - 7; i++) {
if (msg.slice(i, i + 4).toLowerCase() === 'http') { if (msg.slice(i, i + 2) === '](') {
// FIXME there can be text with [] inside [] or links with () wee need to handle it too
j = getStrStart(msg, i - 1, '[', '');
if (j < i) {
k = getStrEnd(msg, i + 2, ')', '');
if (k > i + 1) {
html.push($('#external-page-link-template')[0].outerHTML
.replace(/\bid\s*=\s*"[^]*?"+/ig, '') // $().removeAttr('id')
//.replace(/\bhref\s*=\s*"[^]*?"+/ig, '') // $().removeAttr('href')
.replace(/<a\s+/ig, '<a href="' + proxyURL(msg.slice(i + 2, k + 1)) + '" ') // $().closest('a').attr('href', proxyURL(url))
.replace(/(<a\s+[^]*?>)[^]*?(<\/a>)/ig, '$1'
+ unpackHtml(
markdown(markdown(markdown(markdown(msg.slice(j, i),
'*', 'b'), // bold
'~', 'i'), // italic
'_', 'u'), // underlined
'-', 's') // striketrough
.replace(/&(?!lt;|gt;)/g, '&amp;')
)
+ '$2') // $().closest('a').text(url)
);
strEncoded = '>' + (html.length - 1).toString() + '<';
msg = msg.slice(0, j - 1) + strEncoded + msg.slice(k + 2);
i = j + strEncoded.length - 1;
}
}
} else if (msg.slice(i, i + 4).toLowerCase() === 'http') {
if (msg.slice(i + 4, i + 7) === '://' && stopCharsRight.indexOf(msg[i + 7]) === -1) { if (msg.slice(i + 4, i + 7) === '://' && stopCharsRight.indexOf(msg[i + 7]) === -1) {
j = getStrEnd(msg, i + 7, stopCharsRight, stopCharsTrailingUrl); j = getStrEnd(msg, i + 7, stopCharsRight, stopCharsTrailingUrl);
if (j > i + 6) { if (j > i + 6) {
@ -280,12 +496,12 @@ function htmlFormatMsg(msg, mentions) {
} }
} }
for (var i = 1; i < msg.length - 1; i++) { for (i = 1; i < msg.length - 1; i++) {
if (msg[i] === '@' && stopCharsLeft.indexOf(msg[i - 1]) === -1 if (msg[i] === '@' && stopCharsLeft.indexOf(msg[i - 1]) === -1
&& stopCharsTrailing.indexOf(msg[i - 1]) === -1 && stopCharsRight.indexOf(msg[i + 1]) === -1) { && stopCharsTrailing.indexOf(msg[i - 1]) === -1 && stopCharsRight.indexOf(msg[i + 1]) === -1) {
j = getStrStart(msg, i - 1, stopCharsLeft, stopCharsTrailing); j = getStrStart(msg, i - 1, stopCharsLeft, stopCharsTrailing);
if (j < i) { if (j < i) {
var k = getStrEnd(msg, i + 1, stopCharsRight, stopCharsTrailing); k = getStrEnd(msg, i + 1, stopCharsRight, stopCharsTrailing);
if (k > i) { if (k > i) {
str = msg.slice(j, k + 1); str = msg.slice(j, k + 1);
html.push($('#external-page-link-template')[0].outerHTML html.push($('#external-page-link-template')[0].outerHTML
@ -302,7 +518,7 @@ function htmlFormatMsg(msg, mentions) {
} }
} }
for (var i = 0; i < msg.length - 1; i++) { for (i = 0; i < msg.length - 1; i++) {
if (msg[i] === '@' && mentionsChars.indexOf(msg[i + 1].toLowerCase()) > -1) { if (msg[i] === '@' && mentionsChars.indexOf(msg[i + 1].toLowerCase()) > -1) {
for (j = i + 2; j < msg.length; j++) { for (j = i + 2; j < msg.length; j++) {
if (mentionsChars.indexOf(msg[j].toLowerCase()) === -1) if (mentionsChars.indexOf(msg[j].toLowerCase()) === -1)
@ -322,7 +538,7 @@ function htmlFormatMsg(msg, mentions) {
} }
} }
for (var i = 0; i < msg.length - 1; i++) { for (i = 0; i < msg.length - 1; i++) {
if (msg[i] === '#' && msg[i + 1] !== '#' && stopCharsRight.indexOf(msg[i + 1]) === -1) { if (msg[i] === '#' && msg[i + 1] !== '#' && stopCharsRight.indexOf(msg[i + 1]) === -1) {
j = getStrEnd(msg, i + 1, stopCharsRightHashtags, stopCharsTrailing); j = getStrEnd(msg, i + 1, stopCharsRightHashtags, stopCharsTrailing);
if (j > i) { if (j > i) {
@ -340,34 +556,23 @@ function htmlFormatMsg(msg, mentions) {
} }
} }
msg = msg msg = unpackHtml(
markdown(markdown(markdown(markdown(msg,
'*', 'b'), // bold
'~', 'i'), // italic
'_', 'u'), // underlined
'-', 's') // striketrough
.replace(/\(\d{1,2}\/\d{1,2}\)$/, htmlSplitCounter) .replace(/\(\d{1,2}\/\d{1,2}\)$/, htmlSplitCounter)
.replace(/&(?!lt;|gt;)/g, '&amp;') // FIXME in many cases there is no need to escape ampersand in HTML 5 .replace(/&(?!lt;|gt;)/g, '&amp;') // FIXME in many cases there is no need to escape ampersand in HTML 5
.replace(/"/g, '&quot;') .replace(/"/g, '&quot;')
.replace(/'/g, '&apos;') .replace(/'/g, '&apos;')
; );
for (var i = 0; i < msg.length - 2; i++) {
if (msg[i] === '>') {
for (var j = i + 2; j < msg.length; j++) {
if (msg[j] === '<')
break;
}
str = html[parseInt(msg.slice(i + 1, j))];
msg = msg.slice(0, i) + str + msg.slice(j + 1);
i = i + str.length - 1;
}
}
if ($.Options.displayLineFeeds.val === 'enable') if ($.Options.displayLineFeeds.val === 'enable')
msg = msg.replace(/\n/g, '<br />'); msg = msg.replace(/\n/g, '<br />');
// TODO: add options for emotions; msg = $.emotions(msg); // TODO: add options for emotions; msg = $.emotions(msg);
// TODO: add at least basic markdown (optional) with syntax like this: // TODO make markdown optionally mutable ?
// *text* -> bold text
// ~text~ -> italic text
// _text_ -> underlined text
// -text- -> strikethrough text
return msg; return msg;
} }

32
theme_calm/css/style.css
View File

@ -1,30 +1,32 @@
@font-face @font-face {
{
font-family: "Open Sans"; font-family: "Open Sans";
src: url("OpenSans-Regular.ttf"); src: url("OpenSans-Regular.ttf");
font-weight: normal;
font-style: normal;
} }
@font-face
{ @font-face {
font-family: "Open Sans"; font-family: "Open Sans";
src: url("OpenSans-Bold.ttf"); src: url("OpenSans-Bold.ttf");
font-weight: bold; font-weight: bold;
} }
@font-face
{ @font-face {
font-family: "Open Sans"; font-family: "Open Sans";
src: url("OpenSans-Italic.ttf"); src: url("OpenSans-Italic.ttf");
font-style: italic; font-style: italic;
} }
@font-face
{ @font-face {
font-family: "Open Sans Condensed"; font-family: "Open Sans Condensed";
src: url("OpenSansCondensed300.ttf"); src: url("OpenSansCondensed300.ttf");
} }
@font-face
{ @font-face {
font-family: "Symbola"; font-family: "Symbola";
src: url("/css/Symbola.ttf"); src: url("/css/Symbola.ttf");
} }
html, body, div, span, applet, object, iframe, html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, a, abbr, acronym, address, big, cite, code,
@ -43,7 +45,6 @@ time, mark, audio, video, textarea
padding: 0; padding: 0;
border: 0; border: 0;
font-size: 100%; font-size: 100%;
font: inherit;
vertical-align: baseline; vertical-align: baseline;
box-sizing: border-box; box-sizing: border-box;
font-family: 'Open Sans', sans-serif, Symbola; font-family: 'Open Sans', sans-serif, Symbola;
@ -1229,12 +1230,17 @@ textarea.splited-post {
text-decoration: none; text-decoration: none;
color: #43464d; color: #43464d;
} }
.post-text
{ .post-text {
font-size: 13px; font-size: 13px;
margin: 2px 10px 4px 60px; margin: 2px 10px 4px 60px;
word-wrap: break-word; word-wrap: break-word;
} }
.post-text samp {
background: #eee;
}
.post-context .post-context
{ {
font-size: 11px; font-size: 11px;

5
theme_nin/css/style.css
View File

@ -232,7 +232,6 @@ time, mark, audio, video {
margin: 0; margin: 0;
padding: 0; padding: 0;
border: 0; border: 0;
font: inherit;
font-size: 100%; font-size: 100%;
vertical-align: baseline; vertical-align: baseline;
} }
@ -879,6 +878,10 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
padding: 0; padding: 0;
} }
.post-text samp {
background: #eee;
}
/* line 138, ../sass/_postboard.sass */ /* line 138, ../sass/_postboard.sass */
.post-context { .post-context {
font-size: 11px; font-size: 11px;

454
theme_nin/sass/_postboard.sass
View File

@ -1,311 +1,313 @@
/************* POST BOARD *************/ /************* POST BOARD *************/
.postboard, .following .postboard, .following
padding-left: $column-width + $gut-width padding-left: $column-width + $gut-width
+box-sizing(border-box) +box-sizing(border-box)
width: $postboard-width width: $postboard-width
@extend .clear-fix @extend .clear-fix
.postboard-posts .postboard-posts
position: relative position: relative
z-index: 1 z-index: 1
clear: both clear: both
.postboard-news .postboard-news
font-size: 12px font-size: 12px
box-sizing: border-box box-sizing: border-box
position: relative position: relative
margin-bottom: 1px margin-bottom: 1px
cursor: pointer cursor: pointer
padding: 10px padding: 10px
font-weight: 900 font-weight: 900
clear: both clear: both
color: white color: white
text-align: center text-align: center
text-transform: uppercase text-transform: uppercase
background: $main-color-color background: $main-color-color
.post, .following li .post, .following li
background: $bloc-background-color background: $bloc-background-color
box-sizing: border-box box-sizing: border-box
position: relative position: relative
margin-bottom: 1px margin-bottom: 1px
transition: margin .4s ease-out transition: margin .4s ease-out
-moz-transition: margin .4s ease-out -moz-transition: margin .4s ease-out
.post, .original.post, .post.open .post, .original.post, .post.open
background: $bloc-background-color background: $bloc-background-color
position: relative position: relative
margin-bottom: 1px margin-bottom: 1px
.module.open .module.open
.post .post
color: darken($defaut-font-color, 15%) color: darken($defaut-font-color, 15%)
.post:hover .post:hover
color: darken($defaut-font-color, 15%) color: darken($defaut-font-color, 15%)
.post-data .post-data
padding: 10px padding: 10px
.post.open .post.open
.original, .related .original, .related
margin-bottom: 1px margin-bottom: 1px
.postboard-posts > .post .postboard-posts > .post
&.open &.open
margin-top: 20px margin-top: 20px
margin-bottom: 20px margin-bottom: 20px
&:after &:after
content: "" content: ""
position: absolute position: absolute
right: 0 right: 0
top: 0 top: 0
width: 0 width: 0
height: 100% height: 100%
transition: all .2s linear transition: all .2s linear
&.open:after &.open:after
width: 5px width: 5px
.post:hover .post:hover
cursor: pointer cursor: pointer
.open .open
background: none background: none
&:hover &:hover
background: none background: none
.post-photo .post-photo
margin: 0 margin: 0
display: inline-block display: inline-block
float: left float: left
vertical-align: middle vertical-align: middle
width: 48px width: 48px
height: 48px height: 48px
overflow: hidden overflow: hidden
img img
width: 100% width: 100%
height: 100% height: 100%
.post-info-name .post-info-name
font-weight: 700 font-weight: 700
font-size: 1em font-size: 1em
line-height: 14px line-height: 14px
color: inherit color: inherit
text-decoration: none text-decoration: none
display: inline-block display: inline-block
padding-left: 10px padding-left: 10px
float: left float: left
.post-info-name:hover .post-info-name:hover
text-decoration: none text-decoration: none
color: $main-color-light color: $main-color-light
.post-info-tag .post-info-tag
font-size: 12px font-size: 12px
opacity: .6 opacity: .6
margin-top: 4px margin-top: 4px
display: inline-block display: inline-block
.post-info-time .post-info-time
float: right float: right
font-size: 11px font-size: 11px
line-height: 14px line-height: 14px
text-decoration: none text-decoration: none
color: lighten($dark-grey,30%) color: lighten($dark-grey,30%)
&:hover &:hover
color: lighten($dark-grey,5%) color: lighten($dark-grey,5%)
.post-text .post-text
margin: 0 0 0 58px margin: 0 0 0 58px
word-wrap: break-word word-wrap: break-word
min-height: 25px min-height: 25px
padding: 0 padding: 0
samp
background: #eee
.post-context .post-context
font-size: 11px font-size: 11px
line-height: 11px line-height: 11px
margin: 0 0 1em 0 margin: 0 0 1em 0
color: lighten($dark-grey,30%) color: lighten($dark-grey,30%)
span span
@extend .icon-twistagain @extend .icon-twistagain
@extend .extend-icon @extend .extend-icon
&:before &:before
display: block display: block
float: left float: left
background: $main-color-color background: $main-color-color
text-align: center text-align: center
padding: 1px 2px 2px 2px padding: 1px 2px 2px 2px
line-height: 9px line-height: 9px
font-size: 9px font-size: 9px
+border-radius(3px) +border-radius(3px)
color: white color: white
margin-right: .4em margin-right: .4em
.mini-screen-name .mini-screen-name
font-size: 13px font-size: 13px
color: $dark-grey color: $dark-grey
.post-retransmited-icon .post-retransmited-icon
display: none display: none
.post-interactions .post-interactions
margin: 10px 0 3px 0 margin: 10px 0 3px 0
text-align: right text-align: right
height: 12px height: 12px
line-height: 12px line-height: 12px
span span
color: lighten($dark-grey,30%) color: lighten($dark-grey,30%)
cursor: pointer cursor: pointer
font-size: 12px font-size: 12px
line-height: 12px line-height: 12px
.post-expand .post-expand
color: lighten($dark-grey,30%) color: lighten($dark-grey,30%)
cursor: pointer cursor: pointer
font-size: 12px font-size: 12px
position: absolute position: absolute
left: 10px left: 10px
bottom: 10px bottom: 10px
&:hover &:hover
color: lighten($dark-grey,5%) color: lighten($dark-grey,5%)
.post-reply .post-reply
@extend .extend-icon @extend .extend-icon
@extend .icon-comment @extend .icon-comment
.post-propagate .post-propagate
@extend .extend-icon @extend .extend-icon
@extend .icon-twistagain @extend .icon-twistagain
.post-favorite .post-favorite
display: none!important display: none!important
@extend .extend-icon @extend .extend-icon
@extend .icon-star @extend .icon-star
.post .show-more .post .show-more
display: inline-block display: inline-block
float: right float: right
font-size: 12px font-size: 12px
color: lighten($dark-grey,30%) color: lighten($dark-grey,30%)
@extend .extend-icon @extend .extend-icon
@extend .icon-chat @extend .icon-chat
&:hover &:hover
color: lighten($dark-grey,5%) color: lighten($dark-grey,5%)
.expanded-content.show-pic .expanded-content.show-pic
display: block display: block
.expanded-post .expanded-post
.post-expand, .post-reply, .post-propagate, .post-favorite .post-expand, .post-reply, .post-propagate, .post-favorite
color: lighten($dark-grey,30%) color: lighten($dark-grey,30%)
&:hover &:hover
color: lighten($dark-grey,5%) color: lighten($dark-grey,5%)
.related .post-expand .related .post-expand
display: none display: none
margin: 0 margin: 0
.post-reply, .post-propagate, .post-favorite .post-reply, .post-propagate, .post-favorite
padding-left: 10px padding-left: 10px
display: none display: none
.post:hover, .original.open .post-interactions, .post:hover .original .post-interactions, .related.post:hover .post:hover, .original.open .post-interactions, .post:hover .original .post-interactions, .related.post:hover
.post-reply, .post-propagate, .post-favorite .post-reply, .post-propagate, .post-favorite
display: inline-block display: inline-block
.open .related .open .related
.post-reply, .post-propagate, .post-favorite .post-reply, .post-propagate, .post-favorite
display: none!important display: none!important
&:hover &:hover
.post-reply, .post-propagate/*, .post-favorite*/ .post-reply, .post-propagate/*, .post-favorite*/
display: inline-block!important display: inline-block!important
.post-reply:hover, .post-propagate:hover, .post-favorite:hover .post-reply:hover, .post-propagate:hover, .post-favorite:hover
color: lighten($dark-grey,5%) color: lighten($dark-grey,5%)
.expanded-content .expanded-content
display: none display: none
padding: 5px 5px 0 5px padding: 5px 5px 0 5px
@extend .clear-fix @extend .clear-fix
.image-preview .image-preview
width: 100% width: 100%
display: block display: block
margin: auto margin: auto
.preview-container .preview-container
max-height: 500px max-height: 500px
width: 100% width: 100%
text-align: center text-align: center
overflow-y: auto overflow-y: auto
background: black background: black
.post-stats .post-stats
float: left float: left
li li
display: inline-block display: inline-block
&.stat-count &.stat-count
font-weight: 700 font-weight: 700
font-size: 11px font-size: 11px
float: left float: left
line-height: 20px line-height: 20px
color: llighten($dark-grey,30%) color: llighten($dark-grey,30%)
span:last-child span:last-child
padding-right: 5px padding-right: 5px
a a
position: relative position: relative
text-decoration: none text-decoration: none
display: inline-block display: inline-block
width: 20px width: 20px
height: 20px height: 20px
margin: 0 1px 0 0 margin: 0 1px 0 0
img img
width: 20px width: 20px
height: 20px height: 20px
.user-name-tooltip .user-name-tooltip
display: none display: none
position: absolute position: absolute
background: lighten($main-color-dark,3%) background: lighten($main-color-dark,3%)
font-size: 12px font-size: 12px
white-space: nowrap white-space: nowrap
padding: 3px 5px padding: 3px 5px
color: #fff color: #fff
top: -42px top: -42px
left: 0px left: 0px
&:after &:after
content: "" content: ""
position: absolute position: absolute
width: 0 width: 0
left: 4px left: 4px
bottom: -5px bottom: -5px
border-top: solid 5px lighten($main-color-dark,3%) border-top: solid 5px lighten($main-color-dark,3%)
border-left: solid 5px transparent border-left: solid 5px transparent
border-right: solid 5px transparent border-right: solid 5px transparent
.post-stats a:hover .user-name-tooltip .post-stats a:hover .user-name-tooltip
display: inline-block display: inline-block
.post-replies .sub-replies .post-replies .sub-replies
border-left: solid 3px $main-color-color border-left: solid 3px $main-color-color
margin-left: 1px margin-left: 1px
@ -313,16 +315,16 @@
/* MODAL */ /* MODAL */
.modal-content .modal-content
.postboard .postboard
width: auto!important width: auto!important
padding: 0 padding: 0
clear: none!important clear: none!important
position: relative position: relative
.post-text .post-text
margin: 0 0 0 40px margin: 0 0 0 40px
.post-photo .post-photo
width: 30px width: 30px
height: 30px height: 30px
img img
width: 100% width: 100%
height: 100% height: 100%