twisterarmy
/
twister-html
mirror of https://github.com/twisterarmy/twister-html.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Merge pull request #267 from slr/tasty-markdown 

tasty markdown
master
miguelfreitas 10 years ago
parent
09135eaaf9 72e47e0de4
commit
5145bcf7c9
5 changed files with 500 additions and 278 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 24
      css/style.css
  2. 263
      js/twister_formatpost.js
  3. 32
      theme_calm/css/style.css
  4. 5
      theme_nin/css/style.css
  5. 454
      theme_nin/sass/_postboard.sass

24
css/style.css
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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%

Write Preview
Loading…
Cancel
Save