mirror of
https://github.com/bitsocialnet/5chan.git
synced 2026-08-03 07:41:04 +02:00
added mobile board feed
This commit is contained in:
plebbitor
+155
-75
@@ -9,7 +9,7 @@ import InfiniteScroll from 'react-infinite-scroller';
|
||||
|
||||
const Board = ({ setBodyStyle }) => {
|
||||
const [defaultSubplebbits, setDefaultSubplebbits] = useState([]);
|
||||
const { selectedTitle, setSelectedTitle, selectedAddress, setSelectedAddress, selectedThread, setSelectedThread, selectedStyle, setSelectedStyle } = useContext(BoardContext);
|
||||
const { selectedTitle, setSelectedTitle, selectedAddress, setSelectedAddress, setSelectedThread, selectedStyle, setSelectedStyle } = useContext(BoardContext);
|
||||
const [showPostFormLink, setShowPostFormLink] = useState(true);
|
||||
const [showPostForm, setShowPostForm] = useState(false);
|
||||
const [name, setName] = useState('');
|
||||
@@ -390,50 +390,127 @@ const Board = ({ setBodyStyle }) => {
|
||||
const renderedComments = renderComments(comments);
|
||||
return (
|
||||
<>
|
||||
<div key={`t-${thread.cid}`} className="thread">
|
||||
<div key={`c-${thread.cid}`} className="post-container op-container">
|
||||
<div key={`po-${thread.cid}`} className="post op">
|
||||
<hr key={`hr-${thread.cid}`} />
|
||||
<div key={`pi-${thread.cid}`} className="post-info">
|
||||
<div key={`f-${thread.cid}`} className="file">
|
||||
<div key={`ft-${thread.cid}`} className="file-text">
|
||||
File:
|
||||
<a key={`fa-${thread.cid}`} href={`${thread.link}`} target="_blank">filename.something</a> (metadata)
|
||||
<div key={`t-${thread.cid}`} className="thread">
|
||||
<div key={`c-${thread.cid}`} className="post-container op-container">
|
||||
<div key={`po-${thread.cid}`} className="post op">
|
||||
<hr key={`hr-${thread.cid}`} />
|
||||
<div key={`pi-${thread.cid}`} className="post-info">
|
||||
<div key={`f-${thread.cid}`} className="file">
|
||||
<div key={`ft-${thread.cid}`} className="file-text">
|
||||
File:
|
||||
<a key={`fa-${thread.cid}`} href={`${thread.link}`} target="_blank">filename.something</a> (metadata)
|
||||
</div>
|
||||
<a key={`fta-${thread.cid}`} href={handleVoidClick} target="_blank" className="file-thumb">
|
||||
<img key={`fti-${thread.cid}`} src="/assets/plebchan-psycho.png" alt="filename.something" />
|
||||
</a>
|
||||
</div>
|
||||
<a key={`fta-${thread.cid}`} href={handleVoidClick} target="_blank" className="file-thumb">
|
||||
<img key={`fti-${thread.cid}`} src="/assets/plebchan-psycho.png" alt="filename.something" />
|
||||
<span key={`nb-${thread.cid}`} className="name-block">
|
||||
<span key={`q-${thread.cid}`} className="title">
|
||||
{thread.title ? `${thread.title}` : null}
|
||||
</span>
|
||||
<span key={`n-${thread.cid}`} className="name">{thread.author.displayName || "Anonymous"}</span>
|
||||
|
||||
<span key={`pa-${thread.cid}`} className="poster-address">
|
||||
(User: {thread.author.address})
|
||||
</span>
|
||||
|
||||
<span key={`dt-${thread.cid}`} className="date-time" data-utc="data">2 weeks ago</span>
|
||||
|
||||
<span key={`pn-${thread.cid}`} className="post-number">
|
||||
<a key={`pl1-${thread.cid}`} href={handleVoidClick} title="Link to this post">No.</a>
|
||||
<a key={`pl2-${thread.cid}`} href={handleVoidClick} title="Reply to this post">00000001</a>
|
||||
|
||||
<span key={`rl1-${thread.cid}`}>
|
||||
[
|
||||
<Link key={`rl2-${thread.cid}`} to={`/${selectedAddress}/thread/${thread.cid}`} onClick={() => handleClickThread(thread.cid)} className="reply-link" >Reply</Link>
|
||||
]
|
||||
</span>
|
||||
</span>
|
||||
<a key={`pmb-${thread.cid}`} className="post-menu-button" href={handleVoidClick} title="Post menu" data-cmd="post-menu">▶</a>
|
||||
<div key={`bi-${thread.cid}`} id="backlink-id" className="backlink">
|
||||
<span key={`ql1-${thread.cid}`}>
|
||||
<a key={`ql2-${thread.cid}`} className="quote-link" href={handleVoidClick}>{'>>'}00000002</a>
|
||||
</span>
|
||||
</div>
|
||||
</span>
|
||||
<blockquote key={`bq-${thread.cid}`}>
|
||||
{thread.content ? (
|
||||
<>
|
||||
{thread.content}
|
||||
</>
|
||||
) : null}
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{renderedComments.map(reply => {
|
||||
counter++;
|
||||
const counterString = counter.toString().padStart(8, '0');
|
||||
return (
|
||||
<div key={`pc-${reply.cid}`} className="post-container reply-container">
|
||||
<div key={`sa-${reply.cid}`} className="side-arrows">{'>>'}</div>
|
||||
<div key={`pr-${reply.cid}`} className="post-reply">
|
||||
<div key={`pi-${reply.cid}`} className="post-info">
|
||||
<span key={`nb-${reply.cid}`} className="nameblock">
|
||||
<span key={`n-${reply.cid}`} className="name">{reply.author.displayName || "Anonymous"}</span>
|
||||
|
||||
<span key={`pa-${reply.cid}`} className="poster-address">
|
||||
(User: {reply.author.address})
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span key={`dt-${reply.cid}`} className="date-time" data-utc="data">2 weeks ago</span>
|
||||
|
||||
<span key={`pn-${reply.cid}`} className="post-number">
|
||||
<a key={`pl1-${reply.cid}`} href={handleVoidClick} title="Link to this post">No.</a>
|
||||
<a key={`pl2-${reply.cid}`} href={handleVoidClick} title="Reply to this post">{counterString}</a>
|
||||
</span>
|
||||
<a key={`pmb-${reply.cid}`} className="post-menu-button" href={handleVoidClick} title="Post menu" data-cmd="post-menu">▶</a>
|
||||
</div>
|
||||
<blockquote key={`pm-${reply.cid}`} className="post-message">
|
||||
<a className="quotelink" href={handleVoidClick}>
|
||||
{`>>${counterString}`}{<br />}
|
||||
</a>
|
||||
{reply.content}
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
)})}
|
||||
</div>
|
||||
<div key={`mob-t-${thread.cid}`} className="thread-mobile">
|
||||
<hr key={`mob-hr-${thread.cid}`} />
|
||||
<div key={`mob-c-${thread.cid}`} className="post-container op-container">
|
||||
<div key={`mob-po-${thread.cid}`} className="post op">
|
||||
<div key={`mob-pi-${thread.cid}`} className="post-info-mobile">
|
||||
<a key={`mob-pb-${thread.cid}`} className="post-menu-button-mobile" href={handleVoidClick}>...</a>
|
||||
<span className="name-block-mobile">
|
||||
<span key={`mob-n-${thread.cid}`} className="name-mobile">{thread.author.displayName || "Anonymous"}</span>
|
||||
|
||||
<span key={`mob-pa-${thread.cid}`} className="poster-address-mobile">
|
||||
(User:
|
||||
<span key={`mob-ha-${thread.cid}`} className="highlight-address-mobile" title="Highlight posts by this address">{thread.author.address}</span>
|
||||
)
|
||||
</span>
|
||||
<br key={`mob-br1-${thread.cid}`} />
|
||||
<span key={`mob-s-${thread.cid}`} className="subject-mobile">
|
||||
{/* {thread.title ? `${thread.title}` : null} */}
|
||||
This is a test title because titles are (…)
|
||||
</span>
|
||||
</span>
|
||||
<span key={`mob-dt-${thread.cid}`} className="date-time-mobile">
|
||||
2 weeks ago
|
||||
|
||||
<a key={`mob-no-${thread.cid}`} href={handleVoidClick} title="Link to this post">No.</a>
|
||||
<a key={`mob-no2-${thread.cid}`} href={handleVoidClick} title="Reply to this post">00000001</a>
|
||||
</span>
|
||||
</div>
|
||||
<div key={`mob-f-${thread.cid}`} className="file-mobile">
|
||||
<a key={`mob-ft${thread.cid}`} className="file-thumb-mobile" href={handleVoidClick} target="_blank">
|
||||
<img key={`mob-img-${thread.cid}`} src="/assets/plebchan-psycho.png" alt="" />
|
||||
<div key={`mob-fi-${thread.cid}`} className="file-info-mobile">58 KB JPG</div>
|
||||
</a>
|
||||
</div>
|
||||
<span key={`nb-${thread.cid}`} className="name-block">
|
||||
<span key={`q-${thread.cid}`} className="title">
|
||||
{thread.title ? `${thread.title}` : null}
|
||||
</span>
|
||||
<span key={`n-${thread.cid}`} className="name">{thread.author.displayName || "Anonymous"}</span>
|
||||
|
||||
<span key={`pa-${thread.cid}`} className="poster-address">
|
||||
(User: {thread.author.address})
|
||||
</span>
|
||||
|
||||
<span key={`dt-${thread.cid}`} className="date-time" data-utc="data">2 weeks ago</span>
|
||||
|
||||
<span key={`pn-${thread.cid}`} className="post-number">
|
||||
<a key={`pl1-${thread.cid}`} href={handleVoidClick} title="Link to this post">No.</a>
|
||||
<a key={`pl2-${thread.cid}`} href={handleVoidClick} title="Reply to this post">00000001</a>
|
||||
|
||||
<span key={`rl1-${thread.cid}`}>
|
||||
[
|
||||
<Link key={`rl2-${thread.cid}`} to={`/${selectedAddress}/thread/${thread.cid}`} onClick={() => handleClickThread(thread.cid)} className="reply-link" >Reply</Link>
|
||||
]
|
||||
</span>
|
||||
</span>
|
||||
<a key={`pmb-${thread.cid}`} className="post-menu-button" href={handleVoidClick} title="Post menu" data-cmd="post-menu">▶</a>
|
||||
<div key={`bi-${thread.cid}`} id="backlink-id" className="backlink">
|
||||
<span key={`ql1-${thread.cid}`}>
|
||||
<a key={`ql2-${thread.cid}`} className="quote-link" href={handleVoidClick}>{'>>'}00000002</a>
|
||||
</span>
|
||||
</div>
|
||||
</span>
|
||||
<blockquote key={`bq-${thread.cid}`}>
|
||||
<blockquote key={`mob-bq-${thread.cid}`} className="post-message-mobile">
|
||||
{thread.content ? (
|
||||
<>
|
||||
{thread.content}
|
||||
@@ -441,42 +518,45 @@ const Board = ({ setBodyStyle }) => {
|
||||
) : null}
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{renderedComments.map(reply => {
|
||||
counter++;
|
||||
const counterString = counter.toString().padStart(8, '0');
|
||||
return (
|
||||
<div key={`pc-${reply.cid}`} className="post-container reply-container">
|
||||
<div key={`sa-${reply.cid}`} className="side-arrows">{'>>'}</div>
|
||||
<div key={`pr-${reply.cid}`} className="post-reply">
|
||||
<div key={`pi-${reply.cid}`} className="post-info">
|
||||
<span key={`nb-${reply.cid}`} className="nameblock">
|
||||
<span key={`n-${reply.cid}`} className="name">{reply.author.displayName || "Anonymous"}</span>
|
||||
|
||||
<span key={`pa-${reply.cid}`} className="poster-address">
|
||||
(User: {reply.author.address})
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span key={`dt-${reply.cid}`} className="date-time" data-utc="data">2 weeks ago</span>
|
||||
|
||||
<span key={`pn-${reply.cid}`} className="post-number">
|
||||
<a key={`pl1-${reply.cid}`} href={handleVoidClick} title="Link to this post">No.</a>
|
||||
<a key={`pl2-${reply.cid}`} href={handleVoidClick} title="Reply to this post">{counterString}</a>
|
||||
</span>
|
||||
<a key={`pmb-${reply.cid}`} className="post-menu-button" href={handleVoidClick} title="Post menu" data-cmd="post-menu">▶</a>
|
||||
<div key={`mob-pl-${thread.cid}`} className="post-link-mobile">
|
||||
<span key={`mob-info-${thread.cid}`} className="info-mobile">{thread.replyCount} Replies / ? Images</span>
|
||||
<Link key={`rl2-${thread.cid}`} to={`/${selectedAddress}/thread/${thread.cid}`} onClick={() => handleClickThread(thread.cid)} className="button-mobile" >View Thread</Link>
|
||||
</div>
|
||||
<blockquote key={`pm-${reply.cid}`} className="post-message">
|
||||
<a className="quotelink" href={handleVoidClick}>
|
||||
{`>>${counterString}`}{<br />}
|
||||
</a>
|
||||
{reply.content}
|
||||
</blockquote>
|
||||
</div>
|
||||
{renderedComments.map(reply => {
|
||||
counter++;
|
||||
const counterString = counter.toString().padStart(8, '0');
|
||||
return (
|
||||
<div key={`mob-rc-${reply.cid}`} className="post-container reply-container">
|
||||
<div key={`mob-pr-${reply.cid}`} className="post-reply">
|
||||
<div key={`mob-pi-${reply.cid}`} className="post-info-mobile">
|
||||
<a className="post-menu-button-mobile" title="Post menu">...</a>
|
||||
<span key={`mob-nb-${reply.cid}`} className="name-block-mobile">
|
||||
<span key={`mob-n-${reply.cid}`} className="name-mobile">{reply.author.displayName || "Anonymous"}</span>
|
||||
|
||||
<span key={`mob-pa-${reply.cid}`} className="poster-address-mobile">
|
||||
(User:
|
||||
<span key={`mob-ha-${reply.cid}`} className="highlight-address-mobile" title="Highlight posts by this address">CCxfJWFT...</span>
|
||||
)
|
||||
</span>
|
||||
<br key={`mob-br-${reply.cid}`} />
|
||||
</span>
|
||||
<span key={`mob-dt-${reply.cid}`} className="date-time-mobile">
|
||||
2 weeks ago
|
||||
<a key={`mob-pl1-${reply.cid}`} href={handleVoidClick} title="Link to this post">No.</a>
|
||||
<a key={`mob-pl2-${reply.cid}`} href={handleVoidClick} title="Reply to this post">{counterString}</a>
|
||||
</span>
|
||||
</div>
|
||||
<blockquote className="post-message-mobile">
|
||||
<a className="quotelink-mobile" href={handleVoidClick}>
|
||||
{`>>${counterString}`}{<br />}
|
||||
</a>
|
||||
{reply.content}
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
)})}
|
||||
</div>
|
||||
)})}
|
||||
</div>
|
||||
</>
|
||||
)})}
|
||||
</InfiniteScroll>
|
||||
|
||||
@@ -10,7 +10,7 @@ import InfiniteScroll from 'react-infinite-scroller';
|
||||
|
||||
const Catalog = ({ setBodyStyle }) => {
|
||||
const [defaultSubplebbits, setDefaultSubplebbits] = useState([]);
|
||||
const { selectedTitle, setSelectedTitle, selectedAddress, setSelectedAddress, selectedThread, setSelectedThread, selectedStyle, setSelectedStyle } = useContext(BoardContext);
|
||||
const { selectedTitle, setSelectedTitle, selectedAddress, setSelectedAddress, setSelectedThread, selectedStyle, setSelectedStyle } = useContext(BoardContext);
|
||||
const [showPostFormLink, setShowPostFormLink] = useState(true);
|
||||
const [showPostForm, setShowPostForm] = useState(false);
|
||||
const [name, setName] = useState('');
|
||||
|
||||
@@ -310,8 +310,9 @@ export const Header = styled.div`
|
||||
}
|
||||
|
||||
.board-address {
|
||||
color: #af0a0f;
|
||||
margin-top: 5px;
|
||||
font-size: 11pt;
|
||||
font-size: 10pt;
|
||||
}`;
|
||||
|
||||
case 'Burichan':
|
||||
@@ -1380,11 +1381,10 @@ export const TopBar = styled.div`
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
line-height: 30px;
|
||||
line-height: 25px;
|
||||
|
||||
hr {
|
||||
margin-left: calc((100% - 100vw) / 2);
|
||||
margin-right: calc((100% - 100vw) / 2);
|
||||
display: none;
|
||||
}
|
||||
|
||||
#catalog-button-desktop {
|
||||
@@ -1535,32 +1535,11 @@ ${({ selectedStyle }) => {
|
||||
`;
|
||||
|
||||
export const BoardForm = styled.div`
|
||||
.file {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.file-text {
|
||||
max-width: 600px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.fileText a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.file-thumb {
|
||||
float: left;
|
||||
margin: 3px 20px 5px 20px;
|
||||
}
|
||||
|
||||
.file-thumb img {
|
||||
border: none;
|
||||
float: left;
|
||||
max-width: 250px;
|
||||
max-height: 250px;
|
||||
}
|
||||
|
||||
@media (min-width: 480px) {
|
||||
.thread-mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.post-info {
|
||||
margin: 3px;
|
||||
display: block;
|
||||
@@ -1573,6 +1552,10 @@ export const BoardForm = styled.div`
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.thread {
|
||||
display: none;
|
||||
}
|
||||
|
||||
hr {
|
||||
margin-left: calc((100% - 100vw) / 2);
|
||||
margin-right: calc((100% - 100vw) / 2);
|
||||
@@ -1593,6 +1576,204 @@ export const BoardForm = styled.div`
|
||||
}
|
||||
}
|
||||
|
||||
.file {
|
||||
display: block;
|
||||
|
||||
.file-text {
|
||||
max-width: 600px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.fileText a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.file-thumb {
|
||||
float: left;
|
||||
margin: 3px 20px 5px 20px;
|
||||
}
|
||||
|
||||
.file-thumb img {
|
||||
border: none;
|
||||
float: left;
|
||||
max-width: 250px;
|
||||
max-height: 250px;
|
||||
}
|
||||
}
|
||||
|
||||
.thread-mobile {
|
||||
border-top: none;
|
||||
margin: 0;
|
||||
clear: both;
|
||||
|
||||
hr {
|
||||
margin-top: 30px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.op-container {
|
||||
margin: 0 -5px;
|
||||
padding: 5px;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
|
||||
.op {
|
||||
display: inline;
|
||||
margin: 4px 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.post-info-mobile {
|
||||
overflow: hidden;
|
||||
padding: 5px;
|
||||
margin: -5px -6px -5px -5px;
|
||||
display: block;
|
||||
clear: left;
|
||||
}
|
||||
|
||||
.post-menu-button-mobile {
|
||||
text-decoration: none;
|
||||
line-height: 1em;
|
||||
width: 1em;
|
||||
text-align: center;
|
||||
outline: none;
|
||||
transform: rotate(90deg);
|
||||
margin: 4px -5px 0 4px !important;
|
||||
float: left;
|
||||
font-weight: 700;
|
||||
opacity: 1 !important;
|
||||
height: .5em !important;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.name-block-mobile {
|
||||
clear: none;
|
||||
float: left;
|
||||
|
||||
.subject-mobile {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.date-time-mobile {
|
||||
float: right;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.file-mobile {
|
||||
display: block;
|
||||
|
||||
.file-thumb-mobile {
|
||||
margin-left: 10px !important;
|
||||
margin-right: 10px !important;
|
||||
text-decoration: none;
|
||||
float: left;
|
||||
margin-bottom: 5px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.file-info-mobile {
|
||||
padding-top: 5px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: block !important;
|
||||
clear: left !important;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
border: none;
|
||||
float: left;
|
||||
max-width: 100px;
|
||||
max-height: 100px;
|
||||
object-fit: scale-down;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
padding-top: 5px;
|
||||
display: block;
|
||||
margin: 10px !important;
|
||||
}
|
||||
|
||||
.post-link-mobile {
|
||||
clear: both !important;
|
||||
padding: 5px;
|
||||
overflow: hidden;
|
||||
margin: -5px;
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.info-mobile {
|
||||
margin-top: 8px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.button-mobile {
|
||||
float: right;
|
||||
border-radius: 3px;
|
||||
padding: 6px 10px 5px;
|
||||
user-select: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.reply-container {
|
||||
margin: 7px 2px 0;
|
||||
padding-left: 0;
|
||||
|
||||
.post-reply {
|
||||
margin-top: 0 !important;
|
||||
width: 100%;
|
||||
padding: 0 !important;
|
||||
display: table;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.post-info-mobile {
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
padding: 5px;
|
||||
display: block !important;
|
||||
clear: left !important;
|
||||
|
||||
.post-menu-button-mobile {
|
||||
text-decoration: none;
|
||||
line-height: 1em;
|
||||
width: 1em;
|
||||
text-align: center;
|
||||
outline: none;
|
||||
transform: rotate(90deg);
|
||||
margin: 4px -5px 0 4px !important;
|
||||
float: left;
|
||||
font-weight: 700;
|
||||
opacity: 1 !important;
|
||||
height: .5em !important;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.name-block-mobile {
|
||||
clear: none;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.date-time-mobile {
|
||||
float: right;
|
||||
text-align: right;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
blockquote {
|
||||
display: block;
|
||||
margin: 10px !important;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
${({ selectedStyle }) => {
|
||||
switch (selectedStyle) {
|
||||
case 'Yotsuba':
|
||||
@@ -2465,4 +2646,638 @@ export const BoardForm = styled.div`
|
||||
|
||||
}
|
||||
}}
|
||||
|
||||
${({ selectedStyle }) => {
|
||||
switch (selectedStyle) {
|
||||
case 'Yotsuba':
|
||||
return `
|
||||
.op-container {
|
||||
background-color: #f5e9e1;
|
||||
border: 1px solid #d9bfb7 !important;
|
||||
|
||||
.post-info-mobile {
|
||||
border-bottom: 1px solid #d9bfb7;
|
||||
background-color: #ead6ca;
|
||||
}
|
||||
|
||||
.post-menu-button-mobile {
|
||||
color: #00e;
|
||||
}
|
||||
|
||||
.name-mobile {
|
||||
color: #117743;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.subject-mobile {
|
||||
color: #cc1105;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.date-time-mobile {
|
||||
color: maroon;
|
||||
}
|
||||
|
||||
.file-thumb-mobile {
|
||||
color: #00e !important;
|
||||
}
|
||||
|
||||
.file-info-mobile {
|
||||
color: #707070;
|
||||
font-size: 9pt !important;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
font-size: 11pt;
|
||||
}
|
||||
|
||||
.post-link-mobile {
|
||||
background-color: #ead6ca;
|
||||
border-top: 1px solid #d9bfb7;
|
||||
}
|
||||
|
||||
.info-mobile {
|
||||
color: #800;
|
||||
}
|
||||
|
||||
.button-mobile {
|
||||
color: #800;
|
||||
font-weight: 700;
|
||||
background-color: #f0e0d6;
|
||||
border: 1px solid #c0a69d;
|
||||
background-image: url(/assets/buttonfade.png);
|
||||
background-repeat: repeat-x;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.reply-container {
|
||||
background-color: #f0e0d6;
|
||||
|
||||
.post-reply {
|
||||
background-color: #f0e0d6;
|
||||
border: 1px solid #d9bfb7;
|
||||
}
|
||||
|
||||
.post-info-mobile {
|
||||
border-bottom: 1px solid #d9bfb7;
|
||||
background-color: #ead6ca;
|
||||
|
||||
.post-menu-button-mobile {
|
||||
color: #00e;
|
||||
}
|
||||
|
||||
.name-mobile {
|
||||
color: #117743;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.date-time-mobile {
|
||||
color: maroon;
|
||||
|
||||
a {
|
||||
color: maroon;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
blockquote {
|
||||
font-size: 11pt;
|
||||
|
||||
.quotelink-mobile {
|
||||
color: navy !important;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.quotelink-mobile:hover {
|
||||
color: red !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}`;
|
||||
|
||||
case 'Yotsuba B':
|
||||
return `
|
||||
.op-container {
|
||||
background-color: #d6daf0;
|
||||
border: 1px solid #b7c5d9 !important;
|
||||
|
||||
.post-info-mobile {
|
||||
border-bottom: 1px solid #b7c5d9;
|
||||
background-color: #c9cde8;
|
||||
}
|
||||
|
||||
.post-menu-button-mobile {
|
||||
color: #34345c;
|
||||
}
|
||||
|
||||
.name-mobile {
|
||||
color: #117743;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.subject-mobile {
|
||||
color: #0f0c5d;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.date-time-mobile {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.file-thumb-mobile {
|
||||
color: #81a2be !important;
|
||||
}
|
||||
|
||||
.file-info-mobile {
|
||||
color: #707070;
|
||||
font-size: 9pt !important;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
font-size: 11pt;
|
||||
}
|
||||
|
||||
.post-link-mobile {
|
||||
background-color: #c9cde8;
|
||||
border-top: 1px solid #b7c5d9;
|
||||
}
|
||||
|
||||
.info-mobile {
|
||||
color: #34345c;
|
||||
}
|
||||
|
||||
.button-mobile {
|
||||
color: #34345c;
|
||||
font-weight: 700;
|
||||
background-color: #d6daf0;
|
||||
border: 1px solid #b7c5d9;
|
||||
background-image: url(/assets/buttonfade-blue.png);
|
||||
background-repeat: repeat-x;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.reply-container {
|
||||
background-color: #d6daf0;
|
||||
|
||||
.post-reply {
|
||||
background-color: #d6daf0;
|
||||
border: 1px solid #b7c5d9;
|
||||
}
|
||||
|
||||
.post-info-mobile {
|
||||
border-bottom: 1px solid #b7c5d9;
|
||||
background-color: #c9cde8;
|
||||
|
||||
.post-menu-button-mobile {
|
||||
color: #34345c;
|
||||
}
|
||||
|
||||
.name-mobile {
|
||||
color: #117743;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.date-time-mobile {
|
||||
color: #000;
|
||||
|
||||
a {
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
blockquote {
|
||||
font-size: 11pt;
|
||||
}
|
||||
}
|
||||
}`;
|
||||
|
||||
case 'Futaba':
|
||||
return `
|
||||
.op-container {
|
||||
background-color: #f5e9e1;
|
||||
border: 1px solid #d9bfb7 !important;
|
||||
|
||||
.post-info-mobile {
|
||||
border-bottom: 1px solid #d9bfb7;
|
||||
background-color: #ead6ca;
|
||||
}
|
||||
|
||||
.post-menu-button-mobile {
|
||||
color: #00e;
|
||||
}
|
||||
|
||||
.name-mobile {
|
||||
color: #117743;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.subject-mobile {
|
||||
color: #cc1105;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.date-time-mobile {
|
||||
color: maroon;
|
||||
}
|
||||
|
||||
.file-thumb-mobile {
|
||||
color: #00e !important;
|
||||
}
|
||||
|
||||
.file-info-mobile {
|
||||
color: #707070;
|
||||
font-size: 9pt !important;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
font-size: 12pt;
|
||||
}
|
||||
|
||||
.post-link-mobile {
|
||||
background-color: #ead6ca;
|
||||
border-top: 1px solid #d9bfb7;
|
||||
}
|
||||
|
||||
.info-mobile {
|
||||
color: #800;
|
||||
}
|
||||
|
||||
.button-mobile {
|
||||
color: #800;
|
||||
font-weight: 700;
|
||||
background-color: #f0e0d6;
|
||||
border: 1px solid #c0a69d;
|
||||
background-image: url(/assets/buttonfade.png);
|
||||
background-repeat: repeat-x;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.reply-container {
|
||||
background-color: #f0e0d6;
|
||||
|
||||
.post-reply {
|
||||
background-color: #f0e0d6;
|
||||
border: 1px solid #d9bfb7;
|
||||
}
|
||||
|
||||
.post-info-mobile {
|
||||
border-bottom: 1px solid #d9bfb7;
|
||||
background-color: #ead6ca;
|
||||
|
||||
.post-menu-button-mobile {
|
||||
color: #00e;
|
||||
}
|
||||
|
||||
.name-mobile {
|
||||
color: #117743;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.date-time-mobile {
|
||||
color: maroon;
|
||||
|
||||
a {
|
||||
color: maroon;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
blockquote {
|
||||
font-size: 12pt;
|
||||
|
||||
.quotelink-mobile {
|
||||
color: navy !important;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.quotelink-mobile:hover {
|
||||
color: red !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}`;
|
||||
|
||||
case 'Burichan':
|
||||
return `
|
||||
.op-container {
|
||||
background-color: #d6daf0;
|
||||
border: 1px solid #b7c5d9 !important;
|
||||
|
||||
.post-info-mobile {
|
||||
border-bottom: 1px solid #b7c5d9;
|
||||
background-color: #c9cde8;
|
||||
}
|
||||
|
||||
.post-menu-button-mobile {
|
||||
color: #34345c;
|
||||
}
|
||||
|
||||
.name-mobile {
|
||||
color: #117743;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.subject-mobile {
|
||||
color: #0f0c5d;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.date-time-mobile {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.file-thumb-mobile {
|
||||
color: #81a2be !important;
|
||||
}
|
||||
|
||||
.file-info-mobile {
|
||||
color: #707070;
|
||||
font-size: 9pt !important;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
font-size: 12pt;
|
||||
}
|
||||
|
||||
.post-link-mobile {
|
||||
background-color: #c9cde8;
|
||||
border-top: 1px solid #b7c5d9;
|
||||
}
|
||||
|
||||
.info-mobile {
|
||||
color: #34345c;
|
||||
}
|
||||
|
||||
.button-mobile {
|
||||
color: #34345c;
|
||||
font-weight: 700;
|
||||
background-color: #d6daf0;
|
||||
border: 1px solid #b7c5d9;
|
||||
background-image: url(/assets/buttonfade-blue.png);
|
||||
background-repeat: repeat-x;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.reply-container {
|
||||
background-color: #d6daf0;
|
||||
|
||||
.post-reply {
|
||||
background-color: #d6daf0;
|
||||
border: 1px solid #b7c5d9;
|
||||
}
|
||||
|
||||
.post-info-mobile {
|
||||
border-bottom: 1px solid #b7c5d9;
|
||||
background-color: #c9cde8;
|
||||
|
||||
.post-menu-button-mobile {
|
||||
color: #34345c;
|
||||
}
|
||||
|
||||
.name-mobile {
|
||||
color: #117743;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.date-time-mobile {
|
||||
color: #000;
|
||||
|
||||
a {
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
blockquote {
|
||||
font-size: 12pt;
|
||||
}
|
||||
}
|
||||
}`;
|
||||
|
||||
case 'Tomorrow':
|
||||
return `
|
||||
.op-container {
|
||||
background-color: #282A2E;
|
||||
border: 1px solid #2D2F33 !important;
|
||||
|
||||
.post-info-mobile {
|
||||
border-bottom: 1px solid #2D2F33;
|
||||
background-color: #212326;
|
||||
}
|
||||
|
||||
.post-menu-button-mobile {
|
||||
color: #81A2BE;
|
||||
}
|
||||
|
||||
.name-mobile {
|
||||
color: #117743;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.poster-address-mobile {
|
||||
color: #707070;
|
||||
}
|
||||
|
||||
.subject-mobile {
|
||||
color: #B294BB;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.date-time-mobile {
|
||||
color: #707070;
|
||||
}
|
||||
|
||||
.file-thumb-mobile {
|
||||
color: #81A2BE !important;
|
||||
}
|
||||
|
||||
.file-info-mobile {
|
||||
color: #707070;
|
||||
font-size: 9pt !important;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
color: #C5C8C6;
|
||||
font-size: 11pt;
|
||||
}
|
||||
|
||||
.post-link-mobile {
|
||||
background-color: #212326;
|
||||
border-top: 1px solid #2D2F33;
|
||||
}
|
||||
|
||||
.info-mobile {
|
||||
color: #707070;
|
||||
}
|
||||
|
||||
.button-mobile {
|
||||
color: #707070;
|
||||
font-weight: 700;
|
||||
background-color: rgb(27,28,30);
|
||||
border: 1px solid #282A2E;
|
||||
background-image: url(/assets/buttonfade-dark.png);
|
||||
background-repeat: repeat-x;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.reply-container {
|
||||
background-color: #f0e0d6;
|
||||
color: #C5C8C6;
|
||||
|
||||
.post-reply {
|
||||
background-color: #282A2E;
|
||||
border: 1px solid #2D2F33;
|
||||
}
|
||||
|
||||
.post-info-mobile {
|
||||
border-bottom: 1px solid #2D2F33;
|
||||
background-color: #212326;
|
||||
|
||||
.post-menu-button-mobile {
|
||||
color: #81A2BE;
|
||||
}
|
||||
|
||||
.name-mobile {
|
||||
color: #117743;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.date-time-mobile {
|
||||
color: #707070;
|
||||
|
||||
a {
|
||||
color: #707070;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
blockquote {
|
||||
font-size: 11pt;
|
||||
}
|
||||
|
||||
.quotelink-mobile {
|
||||
color: #81A2BE;
|
||||
}
|
||||
|
||||
.quotelink-mobile:hover {
|
||||
color: #5F89AC;
|
||||
}
|
||||
}
|
||||
}`;
|
||||
|
||||
case 'Photon':
|
||||
return `
|
||||
.op-container {
|
||||
background-color: #eee;
|
||||
border: 1px solid #ccc !important;
|
||||
|
||||
.post-info-mobile {
|
||||
border-bottom: 1px solid #ccc;
|
||||
background-color: #ddd;
|
||||
}
|
||||
|
||||
.post-menu-button-mobile {
|
||||
color: #f60;
|
||||
}
|
||||
|
||||
.name-mobile {
|
||||
color: #004a99;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.subject-mobile {
|
||||
color: #111;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.date-time-mobile {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.file-thumb-mobile {
|
||||
color: #f60 !important;
|
||||
}
|
||||
|
||||
.file-info-mobile {
|
||||
color: #707070;
|
||||
font-size: 9pt !important;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
font-size: 11pt;
|
||||
}
|
||||
|
||||
.post-link-mobile {
|
||||
background-color: #ddd;
|
||||
border-top: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.info-mobile {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.button-mobile {
|
||||
background: linear-gradient(to bottom, rgba(238, 238, 238, 1) 0%, rgba(224, 224, 224, 1) 100%);
|
||||
border: 1px solid #ccc;
|
||||
color: #333;
|
||||
border-radius: 3px 3px 3px 3px;
|
||||
font-weight: 700;
|
||||
padding: 6px 10px 5px;
|
||||
background-repeat: repeat-x;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.reply-container {
|
||||
background-color: #eee;
|
||||
|
||||
.post-reply {
|
||||
background-color: #eee;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.post-info-mobile {
|
||||
border-bottom: 1px solid #ccc;
|
||||
background-color: #ddd;
|
||||
|
||||
.post-menu-button-mobile {
|
||||
color: #f60;
|
||||
}
|
||||
|
||||
.name-mobile {
|
||||
color: #004a99;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.date-time-mobile {
|
||||
color: #333;
|
||||
|
||||
a {
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
blockquote {
|
||||
font-size: 11pt;
|
||||
}
|
||||
|
||||
.quotelink-mobile {
|
||||
color: #f60;
|
||||
}
|
||||
|
||||
.quotelink-mobile:hover {
|
||||
color: #ff3300;
|
||||
}
|
||||
}
|
||||
}`;
|
||||
|
||||
}
|
||||
}}
|
||||
`;
|
||||
Reference in New Issue
Block a user