finished thread styling

This commit is contained in:
plebbitor
2023-02-06 12:48:35 +01:00
parent cd5c0116d8
commit fb39ef5bc5
2 changed files with 39 additions and 14 deletions
+10 -1
View File
@@ -88,23 +88,28 @@ const Board = () => {
</span> </span>
<div id="pi" className="post-info"> <div id="pi" className="post-info">
<input type="checkbox" name="id" value="delete"></input> <input type="checkbox" name="id" value="delete"></input>
 
<span className="name-block"> <span className="name-block">
<span className="name">Tom</span> <span className="name">Tom</span>
 
<span className="poster-address"> <span className="poster-address">
(User: plebeius.eth) (User: plebeius.eth)
</span> </span>
</span> </span>
 
<span className="date-time" data-utc="data">2 weeks ago</span> <span className="date-time" data-utc="data">2 weeks ago</span>
 
<span className="post-number"> <span className="post-number">
<a href="post-link" title="Link to this post">No.</a> <a href="post-link" title="Link to this post">No.</a>
<a href="post-link" title="Reply to this post">00000001</a> <a href="post-link" title="Reply to this post">00000001</a>
   
<span> <span>
[ [
<a className="reply-link" href="post-link">Reply</a> <a className="reply-link" href="post-link">Reply</a>
] ]
</span> </span>
</span> </span>
<a className="post-menu-button" href="#" title="Post menu" data-cmd="post-menu"></a> <a className="post-menu-button" href="post-menu" title="Post menu" data-cmd="post-menu"></a>
<div id="backlink-id" className="backlink"> <div id="backlink-id" className="backlink">
<span> <span>
<a className="quote-link" href="post-link">{'>>'}00000002</a> <a className="quote-link" href="post-link">{'>>'}00000002</a>
@@ -123,13 +128,17 @@ const Board = () => {
<div className="post-reply"> <div className="post-reply">
<div className="post-info"> <div className="post-info">
<input type="checkbox" name="id" value="delete"></input> <input type="checkbox" name="id" value="delete"></input>
 
<span className="nameblock"> <span className="nameblock">
<span className="name">Anonymous</span> <span className="name">Anonymous</span>
 
<span className="poster-address"> <span className="poster-address">
(User: Qma319kE7rrHNce8vH9fAjPjihUF4EZCaKSK8dBaFtxsVn) (User: Qma319kE7rrHNce8vH9fAjPjihUF4EZCaKSK8dBaFtxsVn)
</span> </span>
</span> </span>
 
<span className="date-time" data-utc="data">2 weeks ago</span> <span className="date-time" data-utc="data">2 weeks ago</span>
 
<span className="post-number"> <span className="post-number">
<a href="post-link" title="Link to this post">No.</a> <a href="post-link" title="Link to this post">No.</a>
<a href="post-link" title="Reply to this post">00000002</a> <a href="post-link" title="Reply to this post">00000002</a>
+29 -13
View File
@@ -170,22 +170,17 @@ export const BoardForm = styled.form`
font-weight: 700; font-weight: 700;
} }
.post-link a { .post-number a {
text-decoration: none; text-decoration: none;
color: maroon; color: maroon;
} }
.post-link a:hover { .post-number a:hover {
color: red; color: red;
} }
.reply-link a { .reply-link:not(:hover) {
text-decoration: none; color: #00e !important;
color: #00e;
}
.reply-link a:hover {
color: red;
} }
.post-menu-button { .post-menu-button {
@@ -202,6 +197,10 @@ export const BoardForm = styled.form`
opacity: 0.8; opacity: 0.8;
} }
.post-menu-button:hover {
color: red;
}
.backlink { .backlink {
font-size: 0.8em !important; font-size: 0.8em !important;
display: inline; display: inline;
@@ -209,12 +208,11 @@ export const BoardForm = styled.form`
padding-left: 5px; padding-left: 5px;
} }
.quote-link a { .quote-link {
color: navy !important; color: navy;
text-decoration: none;
} }
.quote-link a:hover { .quote-link:hover {
color: red; color: red;
} }
@@ -229,4 +227,22 @@ export const BoardForm = styled.form`
.quote { .quote {
color: #789922; color: #789922;
} }
.side-arrows {
color: #e0bfb7;
float: left;
margin-right: 2px;
margin-top: 0;
margin-left: 2px;
}
.post-reply {
background-color: #f0e0d6;
border: 1px solid #d9bfb7;
margin-top: 2px;
border-left: none;
border-top: none;
display: table;
padding: 2px;
}
`; `;