mirror of
https://github.com/twisterarmy/twister-html.git
synced 2025-02-04 19:14:14 +00:00
miguelfreitas
commit
5145bcf7c9
@ -1,19 +1,21 @@
|
||||
@font-face
|
||||
{
|
||||
@font-face {
|
||||
font-family: "Open Sans";
|
||||
src: url("OpenSans-Regular.ttf");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face
|
||||
{
|
||||
|
||||
@font-face {
|
||||
font-family: "Open Sans";
|
||||
src: url("OpenSans-Bold.ttf");
|
||||
font-weight: bold;
|
||||
}
|
||||
@font-face
|
||||
{
|
||||
|
||||
@font-face {
|
||||
font-family: "Symbola";
|
||||
src: url("Symbola.ttf");
|
||||
}
|
||||
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
@ -32,7 +34,6 @@ time, mark, audio, video, textarea
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font: inherit;
|
||||
vertical-align: baseline;
|
||||
box-sizing: border-box;
|
||||
font-family: 'Open Sans', sans-serif, Symbola;
|
||||
@ -1024,12 +1025,17 @@ ol.toptrends-list {
|
||||
opacity: .5;
|
||||
text-decoration: none;
|
||||
}
|
||||
.post-text
|
||||
{
|
||||
|
||||
.post-text {
|
||||
font-size: 13px;
|
||||
margin: 2px 10px 4px 60px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.post-text samp {
|
||||
background: #f0efcc;
|
||||
}
|
||||
|
||||
.post-context
|
||||
{
|
||||
font-size: 11px;
|
||||
|
||||
@ -226,26 +226,242 @@ function htmlFormatMsg(msg, mentions) {
|
||||
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, '&'));
|
||||
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) {
|
||||
html.push('<span class="splited-post-counter">' + str + '</span>');
|
||||
|
||||
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 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 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 stopCharsRight = '>' + whiteSpaces;
|
||||
var stopCharsRightHashtags = stopCharsRight + stopCharsTrailing;
|
||||
var j, str, strEncoded;
|
||||
var stopCharsRightHashtags = '>/\\.,:;?!%\'"[](){}^|«»…\u201C\u201D\u2026\u2014\u4E00\u3002\uFF0C\uFF1A\uFF1F\uFF01\u3010\u3011' // same as stopCharsTrailing but without '*~_-`' plus '>'
|
||||
+ 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 = [];
|
||||
|
||||
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++) {
|
||||
if (msg.slice(i, i + 4).toLowerCase() === 'http') {
|
||||
for (i = 0; i < msg.length - 7; i++) {
|
||||
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, '&')
|
||||
)
|
||||
+ '$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) {
|
||||
j = getStrEnd(msg, i + 7, stopCharsRight, stopCharsTrailingUrl);
|
||||
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
|
||||
&& stopCharsTrailing.indexOf(msg[i - 1]) === -1 && stopCharsRight.indexOf(msg[i + 1]) === -1) {
|
||||
j = getStrStart(msg, i - 1, stopCharsLeft, stopCharsTrailing);
|
||||
if (j < i) {
|
||||
var k = getStrEnd(msg, i + 1, stopCharsRight, stopCharsTrailing);
|
||||
k = getStrEnd(msg, i + 1, stopCharsRight, stopCharsTrailing);
|
||||
if (k > i) {
|
||||
str = msg.slice(j, k + 1);
|
||||
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) {
|
||||
for (j = i + 2; j < msg.length; j++) {
|
||||
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) {
|
||||
j = getStrEnd(msg, i + 1, stopCharsRightHashtags, stopCharsTrailing);
|
||||
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(/&(?!lt;|gt;)/g, '&') // FIXME in many cases there is no need to escape ampersand in HTML 5
|
||||
.replace(/"/g, '"')
|
||||
.replace(/'/g, ''')
|
||||
;
|
||||
|
||||
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')
|
||||
msg = msg.replace(/\n/g, '<br />');
|
||||
|
||||
// TODO: add options for emotions; msg = $.emotions(msg);
|
||||
// TODO: add at least basic markdown (optional) with syntax like this:
|
||||
// *text* -> bold text
|
||||
// ~text~ -> italic text
|
||||
// _text_ -> underlined text
|
||||
// -text- -> strikethrough text
|
||||
// TODO make markdown optionally mutable ?
|
||||
|
||||
return msg;
|
||||
}
|
||||
|
||||
@ -1,30 +1,32 @@
|
||||
@font-face
|
||||
{
|
||||
@font-face {
|
||||
font-family: "Open Sans";
|
||||
src: url("OpenSans-Regular.ttf");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face
|
||||
{
|
||||
|
||||
@font-face {
|
||||
font-family: "Open Sans";
|
||||
src: url("OpenSans-Bold.ttf");
|
||||
font-weight: bold;
|
||||
}
|
||||
@font-face
|
||||
{
|
||||
|
||||
@font-face {
|
||||
font-family: "Open Sans";
|
||||
src: url("OpenSans-Italic.ttf");
|
||||
font-style: italic;
|
||||
}
|
||||
@font-face
|
||||
{
|
||||
|
||||
@font-face {
|
||||
font-family: "Open Sans Condensed";
|
||||
src: url("OpenSansCondensed300.ttf");
|
||||
}
|
||||
@font-face
|
||||
{
|
||||
|
||||
@font-face {
|
||||
font-family: "Symbola";
|
||||
src: url("/css/Symbola.ttf");
|
||||
}
|
||||
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
@ -43,7 +45,6 @@ time, mark, audio, video, textarea
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font: inherit;
|
||||
vertical-align: baseline;
|
||||
box-sizing: border-box;
|
||||
font-family: 'Open Sans', sans-serif, Symbola;
|
||||
@ -1229,12 +1230,17 @@ textarea.splited-post {
|
||||
text-decoration: none;
|
||||
color: #43464d;
|
||||
}
|
||||
.post-text
|
||||
{
|
||||
|
||||
.post-text {
|
||||
font-size: 13px;
|
||||
margin: 2px 10px 4px 60px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.post-text samp {
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
.post-context
|
||||
{
|
||||
font-size: 11px;
|
||||
|
||||
@ -232,7 +232,6 @@ time, mark, audio, video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font: inherit;
|
||||
font-size: 100%;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
@ -879,6 +878,10 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.post-text samp {
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
/* line 138, ../sass/_postboard.sass */
|
||||
.post-context {
|
||||
font-size: 11px;
|
||||
|
||||
@ -1,311 +1,313 @@
|
||||
/************* POST BOARD *************/
|
||||
|
||||
.postboard, .following
|
||||
padding-left: $column-width + $gut-width
|
||||
+box-sizing(border-box)
|
||||
width: $postboard-width
|
||||
@extend .clear-fix
|
||||
padding-left: $column-width + $gut-width
|
||||
+box-sizing(border-box)
|
||||
width: $postboard-width
|
||||
@extend .clear-fix
|
||||
|
||||
|
||||
.postboard-posts
|
||||
position: relative
|
||||
z-index: 1
|
||||
clear: both
|
||||
position: relative
|
||||
z-index: 1
|
||||
clear: both
|
||||
|
||||
.postboard-news
|
||||
font-size: 12px
|
||||
box-sizing: border-box
|
||||
position: relative
|
||||
margin-bottom: 1px
|
||||
cursor: pointer
|
||||
padding: 10px
|
||||
font-weight: 900
|
||||
clear: both
|
||||
color: white
|
||||
text-align: center
|
||||
text-transform: uppercase
|
||||
background: $main-color-color
|
||||
font-size: 12px
|
||||
box-sizing: border-box
|
||||
position: relative
|
||||
margin-bottom: 1px
|
||||
cursor: pointer
|
||||
padding: 10px
|
||||
font-weight: 900
|
||||
clear: both
|
||||
color: white
|
||||
text-align: center
|
||||
text-transform: uppercase
|
||||
background: $main-color-color
|
||||
|
||||
|
||||
.post, .following li
|
||||
background: $bloc-background-color
|
||||
box-sizing: border-box
|
||||
position: relative
|
||||
margin-bottom: 1px
|
||||
transition: margin .4s ease-out
|
||||
-moz-transition: margin .4s ease-out
|
||||
background: $bloc-background-color
|
||||
box-sizing: border-box
|
||||
position: relative
|
||||
margin-bottom: 1px
|
||||
transition: margin .4s ease-out
|
||||
-moz-transition: margin .4s ease-out
|
||||
|
||||
|
||||
|
||||
|
||||
.post, .original.post, .post.open
|
||||
background: $bloc-background-color
|
||||
position: relative
|
||||
margin-bottom: 1px
|
||||
|
||||
.post, .original.post, .post.open
|
||||
background: $bloc-background-color
|
||||
position: relative
|
||||
margin-bottom: 1px
|
||||
|
||||
|
||||
|
||||
|
||||
.module.open
|
||||
.post
|
||||
color: darken($defaut-font-color, 15%)
|
||||
.post
|
||||
color: darken($defaut-font-color, 15%)
|
||||
.post:hover
|
||||
color: darken($defaut-font-color, 15%)
|
||||
color: darken($defaut-font-color, 15%)
|
||||
|
||||
.post-data
|
||||
padding: 10px
|
||||
padding: 10px
|
||||
|
||||
|
||||
.post.open
|
||||
.original, .related
|
||||
margin-bottom: 1px
|
||||
.post.open
|
||||
.original, .related
|
||||
margin-bottom: 1px
|
||||
|
||||
.postboard-posts > .post
|
||||
&.open
|
||||
margin-top: 20px
|
||||
margin-bottom: 20px
|
||||
&:after
|
||||
content: ""
|
||||
position: absolute
|
||||
right: 0
|
||||
top: 0
|
||||
width: 0
|
||||
height: 100%
|
||||
transition: all .2s linear
|
||||
&.open:after
|
||||
width: 5px
|
||||
&.open
|
||||
margin-top: 20px
|
||||
margin-bottom: 20px
|
||||
&:after
|
||||
content: ""
|
||||
position: absolute
|
||||
right: 0
|
||||
top: 0
|
||||
width: 0
|
||||
height: 100%
|
||||
transition: all .2s linear
|
||||
&.open:after
|
||||
width: 5px
|
||||
|
||||
.post:hover
|
||||
cursor: pointer
|
||||
cursor: pointer
|
||||
|
||||
|
||||
.open
|
||||
background: none
|
||||
&:hover
|
||||
background: none
|
||||
background: none
|
||||
&:hover
|
||||
background: none
|
||||
|
||||
.post-photo
|
||||
margin: 0
|
||||
display: inline-block
|
||||
float: left
|
||||
vertical-align: middle
|
||||
width: 48px
|
||||
height: 48px
|
||||
overflow: hidden
|
||||
img
|
||||
width: 100%
|
||||
height: 100%
|
||||
margin: 0
|
||||
display: inline-block
|
||||
float: left
|
||||
vertical-align: middle
|
||||
width: 48px
|
||||
height: 48px
|
||||
overflow: hidden
|
||||
img
|
||||
width: 100%
|
||||
height: 100%
|
||||
|
||||
|
||||
|
||||
|
||||
.post-info-name
|
||||
font-weight: 700
|
||||
font-size: 1em
|
||||
line-height: 14px
|
||||
color: inherit
|
||||
text-decoration: none
|
||||
display: inline-block
|
||||
padding-left: 10px
|
||||
float: left
|
||||
font-weight: 700
|
||||
font-size: 1em
|
||||
line-height: 14px
|
||||
color: inherit
|
||||
text-decoration: none
|
||||
display: inline-block
|
||||
padding-left: 10px
|
||||
float: left
|
||||
|
||||
|
||||
.post-info-name:hover
|
||||
text-decoration: none
|
||||
color: $main-color-light
|
||||
text-decoration: none
|
||||
color: $main-color-light
|
||||
|
||||
.post-info-tag
|
||||
font-size: 12px
|
||||
opacity: .6
|
||||
margin-top: 4px
|
||||
display: inline-block
|
||||
font-size: 12px
|
||||
opacity: .6
|
||||
margin-top: 4px
|
||||
display: inline-block
|
||||
|
||||
.post-info-time
|
||||
float: right
|
||||
font-size: 11px
|
||||
line-height: 14px
|
||||
text-decoration: none
|
||||
color: lighten($dark-grey,30%)
|
||||
&:hover
|
||||
color: lighten($dark-grey,5%)
|
||||
float: right
|
||||
font-size: 11px
|
||||
line-height: 14px
|
||||
text-decoration: none
|
||||
color: lighten($dark-grey,30%)
|
||||
&:hover
|
||||
color: lighten($dark-grey,5%)
|
||||
|
||||
.post-text
|
||||
margin: 0 0 0 58px
|
||||
word-wrap: break-word
|
||||
min-height: 25px
|
||||
padding: 0
|
||||
margin: 0 0 0 58px
|
||||
word-wrap: break-word
|
||||
min-height: 25px
|
||||
padding: 0
|
||||
samp
|
||||
background: #eee
|
||||
|
||||
.post-context
|
||||
font-size: 11px
|
||||
line-height: 11px
|
||||
margin: 0 0 1em 0
|
||||
color: lighten($dark-grey,30%)
|
||||
span
|
||||
@extend .icon-twistagain
|
||||
@extend .extend-icon
|
||||
&:before
|
||||
display: block
|
||||
float: left
|
||||
background: $main-color-color
|
||||
text-align: center
|
||||
padding: 1px 2px 2px 2px
|
||||
line-height: 9px
|
||||
font-size: 9px
|
||||
+border-radius(3px)
|
||||
color: white
|
||||
margin-right: .4em
|
||||
font-size: 11px
|
||||
line-height: 11px
|
||||
margin: 0 0 1em 0
|
||||
color: lighten($dark-grey,30%)
|
||||
span
|
||||
@extend .icon-twistagain
|
||||
@extend .extend-icon
|
||||
&:before
|
||||
display: block
|
||||
float: left
|
||||
background: $main-color-color
|
||||
text-align: center
|
||||
padding: 1px 2px 2px 2px
|
||||
line-height: 9px
|
||||
font-size: 9px
|
||||
+border-radius(3px)
|
||||
color: white
|
||||
margin-right: .4em
|
||||
|
||||
.mini-screen-name
|
||||
font-size: 13px
|
||||
color: $dark-grey
|
||||
font-size: 13px
|
||||
color: $dark-grey
|
||||
|
||||
|
||||
.post-retransmited-icon
|
||||
display: none
|
||||
display: none
|
||||
|
||||
.post-interactions
|
||||
margin: 10px 0 3px 0
|
||||
text-align: right
|
||||
height: 12px
|
||||
line-height: 12px
|
||||
span
|
||||
color: lighten($dark-grey,30%)
|
||||
cursor: pointer
|
||||
font-size: 12px
|
||||
line-height: 12px
|
||||
margin: 10px 0 3px 0
|
||||
text-align: right
|
||||
height: 12px
|
||||
line-height: 12px
|
||||
span
|
||||
color: lighten($dark-grey,30%)
|
||||
cursor: pointer
|
||||
font-size: 12px
|
||||
line-height: 12px
|
||||
|
||||
.post-expand
|
||||
color: lighten($dark-grey,30%)
|
||||
cursor: pointer
|
||||
font-size: 12px
|
||||
position: absolute
|
||||
left: 10px
|
||||
bottom: 10px
|
||||
&:hover
|
||||
color: lighten($dark-grey,5%)
|
||||
color: lighten($dark-grey,30%)
|
||||
cursor: pointer
|
||||
font-size: 12px
|
||||
position: absolute
|
||||
left: 10px
|
||||
bottom: 10px
|
||||
&:hover
|
||||
color: lighten($dark-grey,5%)
|
||||
|
||||
.post-reply
|
||||
@extend .extend-icon
|
||||
@extend .icon-comment
|
||||
@extend .extend-icon
|
||||
@extend .icon-comment
|
||||
|
||||
.post-propagate
|
||||
@extend .extend-icon
|
||||
@extend .icon-twistagain
|
||||
@extend .extend-icon
|
||||
@extend .icon-twistagain
|
||||
|
||||
.post-favorite
|
||||
display: none!important
|
||||
@extend .extend-icon
|
||||
@extend .icon-star
|
||||
display: none!important
|
||||
@extend .extend-icon
|
||||
@extend .icon-star
|
||||
|
||||
.post .show-more
|
||||
display: inline-block
|
||||
float: right
|
||||
font-size: 12px
|
||||
color: lighten($dark-grey,30%)
|
||||
@extend .extend-icon
|
||||
@extend .icon-chat
|
||||
&:hover
|
||||
color: lighten($dark-grey,5%)
|
||||
display: inline-block
|
||||
float: right
|
||||
font-size: 12px
|
||||
color: lighten($dark-grey,30%)
|
||||
@extend .extend-icon
|
||||
@extend .icon-chat
|
||||
&:hover
|
||||
color: lighten($dark-grey,5%)
|
||||
|
||||
|
||||
.expanded-content.show-pic
|
||||
display: block
|
||||
display: block
|
||||
|
||||
.expanded-post
|
||||
.post-expand, .post-reply, .post-propagate, .post-favorite
|
||||
color: lighten($dark-grey,30%)
|
||||
&:hover
|
||||
color: lighten($dark-grey,5%)
|
||||
.post-expand, .post-reply, .post-propagate, .post-favorite
|
||||
color: lighten($dark-grey,30%)
|
||||
&:hover
|
||||
color: lighten($dark-grey,5%)
|
||||
|
||||
.related .post-expand
|
||||
display: none
|
||||
margin: 0
|
||||
display: none
|
||||
margin: 0
|
||||
|
||||
.post-reply, .post-propagate, .post-favorite
|
||||
padding-left: 10px
|
||||
display: none
|
||||
padding-left: 10px
|
||||
display: none
|
||||
|
||||
.post:hover, .original.open .post-interactions, .post:hover .original .post-interactions, .related.post:hover
|
||||
.post-reply, .post-propagate, .post-favorite
|
||||
display: inline-block
|
||||
.post-reply, .post-propagate, .post-favorite
|
||||
display: inline-block
|
||||
|
||||
.open .related
|
||||
.post-reply, .post-propagate, .post-favorite
|
||||
display: none!important
|
||||
&:hover
|
||||
.post-reply, .post-propagate/*, .post-favorite*/
|
||||
display: inline-block!important
|
||||
.post-reply, .post-propagate, .post-favorite
|
||||
display: none!important
|
||||
&:hover
|
||||
.post-reply, .post-propagate/*, .post-favorite*/
|
||||
display: inline-block!important
|
||||
|
||||
.post-reply:hover, .post-propagate:hover, .post-favorite:hover
|
||||
color: lighten($dark-grey,5%)
|
||||
color: lighten($dark-grey,5%)
|
||||
|
||||
.expanded-content
|
||||
display: none
|
||||
padding: 5px 5px 0 5px
|
||||
@extend .clear-fix
|
||||
display: none
|
||||
padding: 5px 5px 0 5px
|
||||
@extend .clear-fix
|
||||
|
||||
.image-preview
|
||||
width: 100%
|
||||
display: block
|
||||
margin: auto
|
||||
width: 100%
|
||||
display: block
|
||||
margin: auto
|
||||
|
||||
.preview-container
|
||||
max-height: 500px
|
||||
width: 100%
|
||||
text-align: center
|
||||
overflow-y: auto
|
||||
background: black
|
||||
max-height: 500px
|
||||
width: 100%
|
||||
text-align: center
|
||||
overflow-y: auto
|
||||
background: black
|
||||
|
||||
.post-stats
|
||||
float: left
|
||||
li
|
||||
display: inline-block
|
||||
&.stat-count
|
||||
font-weight: 700
|
||||
font-size: 11px
|
||||
float: left
|
||||
line-height: 20px
|
||||
color: llighten($dark-grey,30%)
|
||||
span:last-child
|
||||
padding-right: 5px
|
||||
a
|
||||
position: relative
|
||||
text-decoration: none
|
||||
display: inline-block
|
||||
width: 20px
|
||||
height: 20px
|
||||
margin: 0 1px 0 0
|
||||
img
|
||||
width: 20px
|
||||
height: 20px
|
||||
|
||||
float: left
|
||||
li
|
||||
display: inline-block
|
||||
&.stat-count
|
||||
font-weight: 700
|
||||
font-size: 11px
|
||||
float: left
|
||||
line-height: 20px
|
||||
color: llighten($dark-grey,30%)
|
||||
span:last-child
|
||||
padding-right: 5px
|
||||
a
|
||||
position: relative
|
||||
text-decoration: none
|
||||
display: inline-block
|
||||
width: 20px
|
||||
height: 20px
|
||||
margin: 0 1px 0 0
|
||||
img
|
||||
width: 20px
|
||||
height: 20px
|
||||
|
||||
|
||||
.user-name-tooltip
|
||||
display: none
|
||||
position: absolute
|
||||
background: lighten($main-color-dark,3%)
|
||||
font-size: 12px
|
||||
white-space: nowrap
|
||||
padding: 3px 5px
|
||||
color: #fff
|
||||
top: -42px
|
||||
left: 0px
|
||||
&:after
|
||||
content: ""
|
||||
position: absolute
|
||||
width: 0
|
||||
left: 4px
|
||||
bottom: -5px
|
||||
border-top: solid 5px lighten($main-color-dark,3%)
|
||||
border-left: solid 5px transparent
|
||||
border-right: solid 5px transparent
|
||||
display: none
|
||||
position: absolute
|
||||
background: lighten($main-color-dark,3%)
|
||||
font-size: 12px
|
||||
white-space: nowrap
|
||||
padding: 3px 5px
|
||||
color: #fff
|
||||
top: -42px
|
||||
left: 0px
|
||||
&:after
|
||||
content: ""
|
||||
position: absolute
|
||||
width: 0
|
||||
left: 4px
|
||||
bottom: -5px
|
||||
border-top: solid 5px lighten($main-color-dark,3%)
|
||||
border-left: solid 5px transparent
|
||||
border-right: solid 5px transparent
|
||||
|
||||
.post-stats a:hover .user-name-tooltip
|
||||
display: inline-block
|
||||
display: inline-block
|
||||
|
||||
.post-replies .sub-replies
|
||||
border-left: solid 3px $main-color-color
|
||||
margin-left: 1px
|
||||
border-left: solid 3px $main-color-color
|
||||
margin-left: 1px
|
||||
|
||||
|
||||
|
||||
@ -313,16 +315,16 @@
|
||||
|
||||
/* MODAL */
|
||||
.modal-content
|
||||
.postboard
|
||||
width: auto!important
|
||||
padding: 0
|
||||
clear: none!important
|
||||
position: relative
|
||||
.post-text
|
||||
margin: 0 0 0 40px
|
||||
.post-photo
|
||||
width: 30px
|
||||
height: 30px
|
||||
img
|
||||
width: 100%
|
||||
height: 100%
|
||||
.postboard
|
||||
width: auto!important
|
||||
padding: 0
|
||||
clear: none!important
|
||||
position: relative
|
||||
.post-text
|
||||
margin: 0 0 0 40px
|
||||
.post-photo
|
||||
width: 30px
|
||||
height: 30px
|
||||
img
|
||||
width: 100%
|
||||
height: 100%
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user