mirror of
https://github.com/bitsocialnet/5chan.git
synced 2026-08-03 07:41:04 +02:00
initial Thread view
This commit is contained in:
plebbitor
+5
-1
@@ -3,6 +3,7 @@ import { Route, Routes } from 'react-router-dom';
|
||||
import { Helmet } from 'react-helmet-async';
|
||||
import Home from './components/Home';
|
||||
import Board from './components/Board';
|
||||
import Thread from './components/Thread';
|
||||
import { createGlobalStyle } from 'styled-components';
|
||||
|
||||
export const BoardContext = React.createContext();
|
||||
@@ -47,7 +48,10 @@ export default function App() {
|
||||
<Routes>
|
||||
<Route exact path='/' element={<Home />} />
|
||||
<Route path='/board' element={<Board setBodyStyle={setBodyStyle} />}>
|
||||
<Route path='post-form' element={<Board />} />
|
||||
<Route path='post-thread' element={<Board />} />
|
||||
</Route>
|
||||
<Route path='/board/thread' element={<Thread setBodyStyle={setBodyStyle} />}>
|
||||
<Route path='post-reply' element={<Thread />} />
|
||||
</Route>
|
||||
</Routes>
|
||||
</BoardContext.Provider>
|
||||
|
||||
+15
-11
@@ -15,6 +15,8 @@ const Board = ({ setBodyStyle }) => {
|
||||
|
||||
const { feed } = useFeed([`${selectedAddress}`], 'new');
|
||||
|
||||
// console.log(feed);
|
||||
|
||||
useEffect(() => {
|
||||
let didCancel = false;
|
||||
fetch(
|
||||
@@ -32,6 +34,8 @@ const Board = ({ setBodyStyle }) => {
|
||||
};
|
||||
}, []);
|
||||
|
||||
const handleVoidClick = () => {}
|
||||
|
||||
const handleClick = (title, address) => {
|
||||
setSelectedTitle(title);
|
||||
setSelectedAddress(address);
|
||||
@@ -44,7 +48,7 @@ const Board = ({ setBodyStyle }) => {
|
||||
const handleClickForm = () => {
|
||||
setShowPostFormLink(false);
|
||||
setShowPostForm(true);
|
||||
navigate('/board/post-form');
|
||||
navigate('/board/post-thread');
|
||||
};
|
||||
|
||||
const handleStyleChange = (event) => {
|
||||
@@ -120,7 +124,7 @@ const Board = ({ setBodyStyle }) => {
|
||||
{defaultSubplebbits.map(subplebbit => (
|
||||
<span className="boardList" key={`span-${subplebbit.address}`}>
|
||||
[
|
||||
<a href="javascript:void(0)" key={`a-${subplebbit.address}`} onClick={() => handleClick(subplebbit.title, subplebbit.address)}
|
||||
<a href={handleVoidClick} key={`a-${subplebbit.address}`} onClick={() => handleClick(subplebbit.title, subplebbit.address)}
|
||||
>{subplebbit.title}</a>
|
||||
]
|
||||
</span>
|
||||
@@ -161,7 +165,7 @@ const Board = ({ setBodyStyle }) => {
|
||||
<td>Subject</td>
|
||||
<td>
|
||||
<input name="sub" type="text" tabIndex={3} />
|
||||
<input type="submit" value="Post" tabIndex={6} />
|
||||
<input id="post-button" type="submit" value="Post" tabIndex={6} />
|
||||
</td>
|
||||
</tr>
|
||||
<tr data-type="Comment">
|
||||
@@ -235,19 +239,19 @@ const Board = ({ setBodyStyle }) => {
|
||||
<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="javascript:void(0)" title="Link to this post">No.</a>
|
||||
<a key={`pl2-${thread.cid}`} href="javascript:void(0)" title="Reply to this post">00000001</a>
|
||||
<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}`}>
|
||||
[
|
||||
<a key={`rl2-${thread.cid}`} className="reply-link" href="javascript:void(0)">Reply</a>
|
||||
<Link key={`rl2-${thread.cid}`} to="/board/thread" className="reply-link" >Reply</Link>
|
||||
]
|
||||
</span>
|
||||
</span>
|
||||
<a key={`pmb-${thread.cid}`} className="post-menu-button" href="javascript:void(0)" title="Post menu" data-cmd="post-menu">▶</a>
|
||||
<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="javascript:void(0)">{'>>'}00000002</a>
|
||||
<a key={`ql2-${thread.cid}`} className="quote-link" href={handleVoidClick}>{'>>'}00000002</a>
|
||||
</span>
|
||||
</div>
|
||||
<blockquote key={`bq-${thread.cid}`}>
|
||||
@@ -279,10 +283,10 @@ const Board = ({ setBodyStyle }) => {
|
||||
<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="javascript:void(0)" title="Link to this post">No.</a>
|
||||
<a key={`pl2-${reply.cid}`} href="javascript:void(0)" title="Reply to this post">{`0000000${counter}`}</a>
|
||||
<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">{`0000000${counter}`}</a>
|
||||
</span>
|
||||
<a key={`pmb-${reply.cid}`} className="post-menu-button" href="javascript:void(0)" title="Post menu" data-cmd="post-menu">▶</a>
|
||||
<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">
|
||||
{reply.content}
|
||||
|
||||
@@ -0,0 +1,213 @@
|
||||
import React, { useState, useEffect, useContext } from 'react';
|
||||
import { Link, useNavigate } from 'react-router-dom';
|
||||
import { Container, NavBar, Header, Break, PostForm, TopBar } from './styles/Board.styled';
|
||||
import { ReplyFormTable, ReplyFormLink } from './styles/Thread.styled';
|
||||
import { BoardContext } from '../App';
|
||||
import ImageBanner from './ImageBanner';
|
||||
|
||||
const Thread = ({ setBodyStyle }) => {
|
||||
const [defaultSubplebbits, setDefaultSubplebbits] = useState([]);
|
||||
const { selectedTitle, setSelectedTitle, selectedAddress, setSelectedAddress } = useContext(BoardContext);
|
||||
const [selectedStyle, setSelectedStyle] = useState("Yotsuba");
|
||||
const [showReplyFormLink, setShowReplyFormLink] = useState(true);
|
||||
const [showReplyForm, setShowReplyForm] = useState(false);
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
useEffect(() => {
|
||||
let didCancel = false;
|
||||
fetch(
|
||||
"https://raw.githubusercontent.com/plebbit/temporary-default-subplebbits/master/subplebbits.json",
|
||||
{ cache: "no-cache" }
|
||||
)
|
||||
.then((res) => res.json())
|
||||
.then(res => {
|
||||
if (!didCancel) {
|
||||
setDefaultSubplebbits(res);
|
||||
}
|
||||
});
|
||||
return () => {
|
||||
didCancel = true;
|
||||
};
|
||||
}, []);
|
||||
|
||||
const handleVoidClick = () => {}
|
||||
|
||||
const handleClick = (title, address) => {
|
||||
setSelectedTitle(title);
|
||||
setSelectedAddress(address);
|
||||
};
|
||||
|
||||
const handleClickHelp = () => {
|
||||
alert("- The CAPTCHA loads after you click \"Post\" \n- The CAPTCHA is case-sensitive. \n- Make sure to not block any cookies set by plebchan.");
|
||||
};
|
||||
|
||||
const handleClickForm = () => {
|
||||
setShowReplyFormLink(false);
|
||||
setShowReplyForm(true);
|
||||
navigate('/board/thread/post-reply');
|
||||
};
|
||||
|
||||
const handleStyleChange = (event) => {
|
||||
switch (event.target.value) {
|
||||
case "Yotsuba":
|
||||
setBodyStyle({
|
||||
background: "#ffe url(/fade.png) top repeat-x",
|
||||
color: "maroon",
|
||||
fontFamily: "Arial, Helvetica, sans-serif"
|
||||
});
|
||||
setSelectedStyle("Yotsuba");
|
||||
break;
|
||||
|
||||
case "Yotsuba B":
|
||||
setBodyStyle({
|
||||
background: "#eef2ff url(/fade-blue.png) top center repeat-x",
|
||||
color: "#000",
|
||||
fontFamily: "Arial, Helvetica, sans-serif"
|
||||
});
|
||||
setSelectedStyle("Yotsuba B");
|
||||
break;
|
||||
|
||||
case "Futaba":
|
||||
setBodyStyle({
|
||||
background: "#ffe",
|
||||
color: "maroon",
|
||||
fontFamily: "times new roman, serif"
|
||||
});
|
||||
setSelectedStyle("Futaba");
|
||||
break;
|
||||
|
||||
case "Burichan":
|
||||
setBodyStyle({
|
||||
background: "#eef2ff",
|
||||
color: "#000",
|
||||
fontFamily: "times new roman, serif"
|
||||
});
|
||||
setSelectedStyle("Burichan");
|
||||
break;
|
||||
|
||||
case "Tomorrow":
|
||||
setBodyStyle({
|
||||
background: "#1d1f21 none",
|
||||
color: "#c5c8c6",
|
||||
fontFamily: "Arial, Helvetica, sans-serif"
|
||||
});
|
||||
setSelectedStyle("Tomorrow");
|
||||
break;
|
||||
|
||||
case "Photon":
|
||||
setBodyStyle({
|
||||
background: "#eee none",
|
||||
color: "#333",
|
||||
fontFamily: "Arial, Helvetica, sans-serif"
|
||||
});
|
||||
setSelectedStyle("Photon");
|
||||
break;
|
||||
|
||||
default:
|
||||
setBodyStyle({
|
||||
background: "#ffe url(/fade.png) top repeat-x",
|
||||
color: "maroon",
|
||||
fontFamily: "Arial, Helvetica, sans-serif"
|
||||
});
|
||||
setSelectedStyle("Yotsuba");
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Container>
|
||||
<NavBar selectedStyle={selectedStyle}>
|
||||
<>
|
||||
{defaultSubplebbits.map(subplebbit => (
|
||||
<span className="boardList" key={`span-${subplebbit.address}`}>
|
||||
[
|
||||
<a href={handleVoidClick} key={`a-${subplebbit.address}`} onClick={() => handleClick(subplebbit.title, subplebbit.address)}
|
||||
>{subplebbit.title}</a>
|
||||
]
|
||||
</span>
|
||||
))}
|
||||
<span className="nav">[
|
||||
<Link to="/" onClick={() => handleStyleChange({target: {value: "Yotsuba"}}
|
||||
)}>Home</Link>]
|
||||
</span>
|
||||
</>
|
||||
</NavBar>
|
||||
<Header selectedStyle={selectedStyle}>
|
||||
<>
|
||||
<div className="banner">
|
||||
<ImageBanner />
|
||||
</div>
|
||||
<>
|
||||
<div className="board-title">{selectedTitle}</div>
|
||||
<div className="board-address">p/{selectedAddress}</div>
|
||||
</>
|
||||
</>
|
||||
</Header>
|
||||
<Break selectedStyle={selectedStyle} />
|
||||
<PostForm selectedStyle={selectedStyle} name="post" action="" method="post" enctype="multipart/form-data">
|
||||
<ReplyFormLink id="post-form-link" showReplyFormLink={showReplyFormLink} >
|
||||
[
|
||||
<a onClick={handleClickForm}>Post a Reply</a>
|
||||
]
|
||||
</ReplyFormLink>
|
||||
<ReplyFormTable id="post-form" showReplyForm={showReplyForm} selectedStyle={selectedStyle} className="post-form">
|
||||
<tbody>
|
||||
<tr data-type="Subject">
|
||||
<td>Name</td>
|
||||
<td>
|
||||
<input name="sub" type="text" placeholder='Anonymous' tabIndex={3} />
|
||||
<input id="post-button" type="submit" value="Post" tabIndex={6} />
|
||||
</td>
|
||||
</tr>
|
||||
<tr data-type="Comment">
|
||||
<td>Comment</td>
|
||||
<td>
|
||||
<textarea name="com" cols="48" rows="4" tabIndex={4} wrap="soft"></textarea>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="captchaFormPart">
|
||||
<td>Verification</td>
|
||||
<td colSpan={2}>
|
||||
<div id="t-root">
|
||||
<input id="t-resp" name="t-response" placeholder="Type the CAPTCHA here" autoComplete='off' type="text" />
|
||||
<button id="t-help" type="button" onClick={handleClickHelp} data-tip="Help" tabIndex={-1}>?</button>
|
||||
<div id="t-cnt">
|
||||
<div id="t-bg"></div>
|
||||
<div id="t-fg"></div>
|
||||
</div>
|
||||
<div id="t-msg"></div>
|
||||
<input name="t-challenge" type="hidden"/>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr data-type="File">
|
||||
<td>Embed File</td>
|
||||
<td>
|
||||
<input name="embed" type="text" tabIndex={7} placeholder="Paste link" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr></tr>
|
||||
</tbody>
|
||||
</ReplyFormTable>
|
||||
</PostForm>
|
||||
<TopBar selectedStyle={selectedStyle}>
|
||||
<hr />
|
||||
<span className="style-changer">
|
||||
Style:
|
||||
|
||||
<select id="style-selector" onChange={handleStyleChange}>
|
||||
<option value="Yotsuba">Yotsuba</option>
|
||||
<option value="Yotsuba B">Yotsuba B</option>
|
||||
<option value="Futaba">Futaba</option>
|
||||
<option value="Burichan">Burichan</option>
|
||||
<option value="Tomorrow">Tomorrow</option>
|
||||
<option value="Photon">Photon</option>
|
||||
</select>
|
||||
</span>
|
||||
<hr />
|
||||
</TopBar>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
export default Thread;
|
||||
@@ -699,7 +699,9 @@ export const PostFormTable = styled.table`
|
||||
margin: 0;
|
||||
margin-right: 2px;
|
||||
padding: 2px 4px 3px;
|
||||
border: 1px solid #aaa;
|
||||
border: 1px solid #000;
|
||||
background-color: #282a2e;
|
||||
color: #c5c8c6;
|
||||
outline: none;
|
||||
font-family: arial, helvetica, sans-serif;
|
||||
font-size: 10pt;
|
||||
@@ -710,13 +712,16 @@ export const PostFormTable = styled.table`
|
||||
margin-bottom: -3px;
|
||||
outline: none;
|
||||
border-radius: none;
|
||||
border: 1px solid #000;
|
||||
background-color: #282a2e;
|
||||
color: #c5c8c6;
|
||||
}
|
||||
|
||||
#t-root {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
background: #eee;
|
||||
background: #2d2d2d;
|
||||
border: 1px solid #777;
|
||||
margin: 2px 0;
|
||||
width: 300px;
|
||||
@@ -749,6 +754,10 @@ export const PostFormTable = styled.table`
|
||||
height: 80px;
|
||||
margin-top: 2px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#post-button, button {
|
||||
filter: brightness(80%);
|
||||
}`;
|
||||
|
||||
case 'Photon':
|
||||
|
||||
@@ -0,0 +1,471 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
export const ReplyFormLink = styled.div`
|
||||
display: ${props => (props.showReplyFormLink ? 'block' : 'none')};
|
||||
`;
|
||||
|
||||
export const ReplyFormTable = styled.table`
|
||||
display: ${props => (props.showReplyForm ? 'table' : 'none')};
|
||||
width: 418px;
|
||||
border-spacing: 1px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
${({ selectedStyle }) => {
|
||||
switch (selectedStyle) {
|
||||
case 'Yotsuba':
|
||||
return `tbody > tr > td:first-child {
|
||||
background-color: #ea8;
|
||||
color: #800;
|
||||
font-weight: 700;
|
||||
border: 1px solid #800;
|
||||
padding: 0 5px;
|
||||
font-size: 10pt;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 0;
|
||||
font-size: 10pt;
|
||||
}
|
||||
|
||||
tbody > tr > td > input[type="text"] {
|
||||
width: 244px;
|
||||
}
|
||||
|
||||
input[type="text"], input[type="password"] > tbody textarea {
|
||||
margin: 0;
|
||||
margin-right: 2px;
|
||||
padding: 2px 4px 3px;
|
||||
border: 1px solid #aaa;
|
||||
outline: none;
|
||||
font-family: arial, helvetica, sans-serif;
|
||||
font-size: 10pt;
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 292px;
|
||||
margin-bottom: -3px;
|
||||
outline: none;
|
||||
border-radius: none;
|
||||
}
|
||||
|
||||
#t-root {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
background: #eee;
|
||||
border: 1px solid #777;
|
||||
margin: 2px 0;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
#t-resp {
|
||||
width: 254px;
|
||||
box-sizing: border-box;
|
||||
text-transform: uppercase;
|
||||
font-size: 11px;
|
||||
height: 18px;
|
||||
margin: 0px;
|
||||
padding: 0px 2px;
|
||||
font-family: monospace;
|
||||
vertical-align: middle;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
#t-help {
|
||||
font-size: 11px;
|
||||
padding: 0;
|
||||
width: 20px;
|
||||
box-sizing: border-box;
|
||||
margin: 0px 0px 0px 6px;
|
||||
vertical-align: middle;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
#t-cnt {
|
||||
height: 80px;
|
||||
margin-top: 2px;
|
||||
position: relative;
|
||||
}`;
|
||||
|
||||
case 'Yotsuba B':
|
||||
return `tbody > tr > td:first-child {
|
||||
background-color: #98e;
|
||||
color: #000;
|
||||
font-weight: 700;
|
||||
border: 1px solid #000;
|
||||
padding: 0 5px;
|
||||
font-size: 10pt;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 0;
|
||||
font-size: 10pt;
|
||||
}
|
||||
|
||||
tbody > tr > td > input[type="text"] {
|
||||
width: 244px;
|
||||
}
|
||||
|
||||
input[type="text"], input[type="password"] > tbody textarea {
|
||||
margin: 0;
|
||||
margin-right: 2px;
|
||||
padding: 2px 4px 3px;
|
||||
border: 1px solid #aaa;
|
||||
outline: none;
|
||||
font-family: arial, helvetica, sans-serif;
|
||||
font-size: 10pt;
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 292px;
|
||||
margin-bottom: -3px;
|
||||
outline: none;
|
||||
border-radius: none;
|
||||
}
|
||||
|
||||
#t-root {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
background: #eee;
|
||||
border: 1px solid #777;
|
||||
margin: 2px 0;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
#t-resp {
|
||||
width: 254px;
|
||||
box-sizing: border-box;
|
||||
text-transform: uppercase;
|
||||
font-size: 11px;
|
||||
height: 18px;
|
||||
margin: 0px;
|
||||
padding: 0px 2px;
|
||||
font-family: monospace;
|
||||
vertical-align: middle;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
#t-help {
|
||||
font-size: 11px;
|
||||
padding: 0;
|
||||
width: 20px;
|
||||
box-sizing: border-box;
|
||||
margin: 0px 0px 0px 6px;
|
||||
vertical-align: middle;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
#t-cnt {
|
||||
height: 80px;
|
||||
margin-top: 2px;
|
||||
position: relative;
|
||||
}`;
|
||||
|
||||
case 'Futaba':
|
||||
return `tbody > tr > td:first-child {
|
||||
background-color: #ea8;
|
||||
color: #800;
|
||||
font-weight: 700;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 0;
|
||||
font-size: 12pt;
|
||||
}
|
||||
|
||||
tbody > tr > td > input[type="text"] {
|
||||
width: 244px;
|
||||
}
|
||||
|
||||
input[type="text"], input[type="password"] > tbody textarea {
|
||||
margin: 0;
|
||||
margin-right: 2px;
|
||||
padding: 2px 4px 3px;
|
||||
border: 1px solid #aaa;
|
||||
outline: none;
|
||||
font-family: arial, helvetica, sans-serif;
|
||||
font-size: 10pt;
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 292px;
|
||||
margin-bottom: -3px;
|
||||
outline: none;
|
||||
border-radius: none;
|
||||
}
|
||||
|
||||
#t-root {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
background: #eee;
|
||||
border: 1px solid #777;
|
||||
margin: 2px 0;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
#t-resp {
|
||||
width: 254px;
|
||||
box-sizing: border-box;
|
||||
text-transform: uppercase;
|
||||
font-size: 11px;
|
||||
height: 18px;
|
||||
margin: 0px;
|
||||
padding: 0px 2px;
|
||||
font-family: monospace;
|
||||
vertical-align: middle;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
#t-help {
|
||||
font-size: 11px;
|
||||
padding: 0;
|
||||
width: 20px;
|
||||
box-sizing: border-box;
|
||||
margin: 0px 0px 0px 6px;
|
||||
vertical-align: middle;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
#t-cnt {
|
||||
height: 80px;
|
||||
margin-top: 2px;
|
||||
position: relative;
|
||||
}`;
|
||||
|
||||
case 'Burichan':
|
||||
return `tbody > tr > td:first-child {
|
||||
background-color: #98e;
|
||||
color: #000;
|
||||
font-weight: 700;
|
||||
padding: 0;
|
||||
font-size: 12pt;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
tbody > tr > td > input[type="text"] {
|
||||
width: 244px;
|
||||
}
|
||||
|
||||
input[type="text"], input[type="password"] > tbody textarea {
|
||||
margin: 0;
|
||||
margin-right: 2px;
|
||||
padding: 2px 4px 3px;
|
||||
border: 1px solid #aaa;
|
||||
outline: none;
|
||||
font-family: arial, helvetica, sans-serif;
|
||||
font-size: 10pt;
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 292px;
|
||||
margin-bottom: -3px;
|
||||
outline: none;
|
||||
border-radius: none;
|
||||
}
|
||||
|
||||
#t-root {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
background: #eee;
|
||||
border: 1px solid #777;
|
||||
margin: 2px 0;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
#t-resp {
|
||||
width: 254px;
|
||||
box-sizing: border-box;
|
||||
text-transform: uppercase;
|
||||
font-size: 11px;
|
||||
height: 18px;
|
||||
margin: 0px;
|
||||
padding: 0px 2px;
|
||||
font-family: monospace;
|
||||
vertical-align: middle;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
#t-help {
|
||||
font-size: 11px;
|
||||
padding: 0;
|
||||
width: 20px;
|
||||
box-sizing: border-box;
|
||||
margin: 0px 0px 0px 6px;
|
||||
vertical-align: middle;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
#t-cnt {
|
||||
height: 80px;
|
||||
margin-top: 2px;
|
||||
position: relative;
|
||||
}`;
|
||||
|
||||
case 'Tomorrow':
|
||||
return `tbody > tr > td:first-child {
|
||||
background-color: #282a2e;
|
||||
color: #c5c8c6;
|
||||
font-weight: 700;
|
||||
border: 1px solid #111;
|
||||
padding: 0 5px;
|
||||
font-size: 10pt;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 0;
|
||||
font-size: 10pt;
|
||||
}
|
||||
|
||||
tbody > tr > td > input[type="text"] {
|
||||
width: 244px;
|
||||
}
|
||||
|
||||
input[type="text"], input[type="password"] > tbody textarea {
|
||||
margin: 0;
|
||||
margin-right: 2px;
|
||||
border: 1px solid #000;
|
||||
background-color: #282a2e;
|
||||
color: #c5c8c6;
|
||||
outline: none;
|
||||
font-family: arial, helvetica, sans-serif;
|
||||
font-size: 10pt;
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 292px;
|
||||
margin-bottom: -3px;
|
||||
outline: none;
|
||||
border-radius: none;
|
||||
border: 1px solid #000;
|
||||
background-color: #282a2e;
|
||||
color: #c5c8c6;
|
||||
}
|
||||
|
||||
#t-root {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
background: #2d2d2d;
|
||||
border: 1px solid #777;
|
||||
margin: 2px 0;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
#t-resp {
|
||||
width: 254px;
|
||||
box-sizing: border-box;
|
||||
text-transform: uppercase;
|
||||
font-size: 11px;
|
||||
height: 18px;
|
||||
margin: 0px;
|
||||
padding: 0px 2px;
|
||||
font-family: monospace;
|
||||
vertical-align: middle;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
#t-help {
|
||||
font-size: 11px;
|
||||
padding: 0;
|
||||
width: 20px;
|
||||
box-sizing: border-box;
|
||||
margin: 0px 0px 0px 6px;
|
||||
vertical-align: middle;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
#t-cnt {
|
||||
height: 80px;
|
||||
margin-top: 2px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#post-button, button {
|
||||
filter: brightness(80%);
|
||||
}`;
|
||||
|
||||
case 'Photon':
|
||||
return `tbody > tr > td:first-child {
|
||||
background-color: #ddd;
|
||||
color: #333;
|
||||
font-weight: 700;
|
||||
border: 1px solid #ccc;
|
||||
padding: 0 5px;
|
||||
font-size: 10pt;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 0;
|
||||
font-size: 10pt;
|
||||
}
|
||||
|
||||
tbody > tr > td > input[type="text"] {
|
||||
width: 244px;
|
||||
}
|
||||
|
||||
input[type="text"], input[type="password"] > tbody textarea {
|
||||
margin: 0;
|
||||
margin-right: 2px;
|
||||
padding: 2px 4px 3px;
|
||||
border: 1px solid #aaa;
|
||||
outline: none;
|
||||
font-family: arial, helvetica, sans-serif;
|
||||
font-size: 10pt;
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 292px;
|
||||
margin-bottom: -3px;
|
||||
outline: none;
|
||||
border-radius: none;
|
||||
}
|
||||
|
||||
#t-root {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
background: #eee;
|
||||
border: 1px solid #777;
|
||||
margin: 2px 0;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
#t-resp {
|
||||
width: 254px;
|
||||
box-sizing: border-box;
|
||||
text-transform: uppercase;
|
||||
font-size: 11px;
|
||||
height: 18px;
|
||||
margin: 0px;
|
||||
padding: 0px 2px;
|
||||
font-family: monospace;
|
||||
vertical-align: middle;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
#t-help {
|
||||
font-size: 11px;
|
||||
padding: 0;
|
||||
width: 20px;
|
||||
box-sizing: border-box;
|
||||
margin: 0px 0px 0px 6px;
|
||||
vertical-align: middle;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
#t-cnt {
|
||||
height: 80px;
|
||||
margin-top: 2px;
|
||||
position: relative;
|
||||
}`;
|
||||
}
|
||||
}}
|
||||
`;
|
||||
Reference in New Issue
Block a user