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
Split 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 @@ @@ -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 @@ -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 { @@ -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;

263
js/twister_formatpost.js
Unescape View File

@ -226,26 +226,242 @@ function htmlFormatMsg(msg, mentions) { @@ -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, '&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) {
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, '&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) {
j = getStrEnd(msg, i + 7, stopCharsRight, stopCharsTrailingUrl);
if (j > i + 6) {
@ -280,12 +496,12 @@ function htmlFormatMsg(msg, mentions) { @@ -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) { @@ -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) { @@ -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) { @@ -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, '&amp;') // FIXME in many cases there is no need to escape ampersand in HTML 5
.replace(/"/g, '&quot;')
.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')
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;
}

32
theme_calm/css/style.css
Unescape View File

@ -1,30 +1,32 @@ @@ -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 @@ -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 { @@ -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;

5
theme_nin/css/style.css
Unescape View File

@ -232,7 +232,6 @@ time, mark, audio, video { @@ -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, @@ -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;

454
theme_nin/sass/_postboard.sass
Unescape View File

@ -1,311 +1,313 @@ @@ -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 @@ @@ -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%

Write Preview
Loading…
Cancel
Save