forked from Kieran/snort
css variables with light and dark variants
This commit is contained in:
parent
e3aa1dc548
commit
e074ed8060
@ -85,7 +85,7 @@ export function extractMentions(fragments, tags, users) {
|
||||
}
|
||||
}
|
||||
}
|
||||
return <b style={{ color: "red" }}>{matchTag[0]}?</b>;
|
||||
return <b style={{ color: "var(--error)" }}>{matchTag[0]}?</b>;
|
||||
} else {
|
||||
return match;
|
||||
}
|
||||
|
@ -1,14 +1,15 @@
|
||||
.copy {
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.copy .body {
|
||||
font-family: monospace;
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
width: 18em;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
background: var(--gray-secondary);
|
||||
color: var(--font-color);
|
||||
padding: 2px 4px;
|
||||
border-radius: 10px;
|
||||
margin: 0 4px 0 0;
|
||||
}
|
@ -3,19 +3,21 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { faCopy, faCheck } from "@fortawesome/free-solid-svg-icons";
|
||||
import { useCopy } from "../useCopy";
|
||||
|
||||
export default function Copy(props) {
|
||||
|
||||
export default function Copy({ text, maxSize = 32 }) {
|
||||
const { copy, copied, error } = useCopy();
|
||||
const sliceLength = maxSize / 2
|
||||
const trimmed = text.length > maxSize ? `${text.slice(0, sliceLength)}:${text.slice(-sliceLength)}` : text
|
||||
|
||||
return (
|
||||
<div className="flex flex-row copy" onClick={() => copy(props.text)}>
|
||||
<div className="flex flex-row copy" onClick={() => copy(text)}>
|
||||
<span className="body">
|
||||
{trimmed}
|
||||
</span>
|
||||
<FontAwesomeIcon
|
||||
icon={copied ? faCheck : faCopy}
|
||||
size="xs"
|
||||
style={{ color: copied ? 'green' : 'currentColor', marginRight: '2px' }}
|
||||
style={{ color: copied ? 'var(--success)' : 'currentColor', marginRight: '2px' }}
|
||||
/>
|
||||
<p className="body">
|
||||
{props.text}
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
}
|
@ -1,6 +1,7 @@
|
||||
.note-invoice {
|
||||
background: var(--bg-color);
|
||||
border-radius: 10px;
|
||||
border: 1px solid #444;
|
||||
border: 1px solid var(--gray-tertiary);
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
@ -9,5 +10,5 @@
|
||||
}
|
||||
|
||||
.note-invoice small {
|
||||
color: #666;
|
||||
color: var(--gray-medium);
|
||||
}
|
@ -1,5 +1,5 @@
|
||||
.lnurl-tip {
|
||||
background-color: #222;
|
||||
background-color: var(--gray-secondary);
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
width: 500px;
|
||||
@ -12,7 +12,7 @@
|
||||
}
|
||||
|
||||
.lnurl-tip .btn:hover {
|
||||
background-color: #333;
|
||||
background-color: var(--gray);
|
||||
}
|
||||
|
||||
.lnurl-tip .invoice {
|
||||
|
@ -4,7 +4,7 @@
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: rgba(0,0,0, 0.8);
|
||||
background-color: var(--modal-bg-color);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
@ -1,10 +1,15 @@
|
||||
.note {
|
||||
margin-bottom: 10px;
|
||||
border-bottom: 1px solid #333;
|
||||
border-bottom: 1px solid var(--gray);
|
||||
}
|
||||
|
||||
.note.thread {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.note.active {
|
||||
background-color: #222;
|
||||
background-color: var(--gray-secondary);
|
||||
border-left: 3px solid var(--highlight);
|
||||
}
|
||||
|
||||
.note > .header > .pfp {
|
||||
@ -13,13 +18,13 @@
|
||||
|
||||
.note > .header .reply {
|
||||
font-size: small;
|
||||
color: #999;
|
||||
color: var(--gray-light);
|
||||
}
|
||||
|
||||
.note > .header > .info {
|
||||
font-size: small;
|
||||
white-space: nowrap;
|
||||
color: #999;
|
||||
color: var(--gray-light);
|
||||
}
|
||||
|
||||
.note > .body {
|
||||
@ -48,6 +53,14 @@
|
||||
}
|
||||
|
||||
.indented {
|
||||
border-left: 3px solid #444;
|
||||
border-left: 3px solid var(--gray-tertiary);
|
||||
padding-left: 2px;
|
||||
}
|
||||
.indented .note {
|
||||
border-bottom: none;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
.note .body a {
|
||||
color: var(--highlight);
|
||||
}
|
||||
|
@ -12,12 +12,9 @@ import NoteTime from "./NoteTime";
|
||||
|
||||
export default function Note(props) {
|
||||
const navigate = useNavigate();
|
||||
const data = props.data;
|
||||
const opt = props.options;
|
||||
const dataEvent = props["data-ev"];
|
||||
const reactions = props.reactions;
|
||||
const deletion = props.deletion;
|
||||
const hightlight = props.hightlight;
|
||||
const { data, isThread, reactions, deletion, hightlight } = props
|
||||
|
||||
const users = useSelector(s => s.users?.users);
|
||||
const ev = dataEvent ?? Event.FromObject(data);
|
||||
@ -81,7 +78,7 @@ export default function Note(props) {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`note ${hightlight ? "active" : ""}`}>
|
||||
<div className={`note ${hightlight && "active"} ${isThread && "thread"}`}>
|
||||
{options.showHeader ?
|
||||
<div className="header flex">
|
||||
<ProfileImage pubkey={ev.RootPubKey} subHeader={replyTag()} />
|
||||
|
@ -1,6 +1,6 @@
|
||||
.note-creator {
|
||||
margin-bottom: 10px;
|
||||
background-color: #333;
|
||||
background-color: var(--gray);
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
@ -4,7 +4,7 @@
|
||||
|
||||
.reaction > .note {
|
||||
margin: 5px;
|
||||
border: 1px solid #333;
|
||||
border: 1px solid var(--gray);
|
||||
border-radius: 10px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
@ -1,6 +1,6 @@
|
||||
.relay {
|
||||
margin-bottom: 10px;
|
||||
background-color: #222;
|
||||
background-color: var(--gray-secondary);
|
||||
border-radius: 5px;
|
||||
text-align: start;
|
||||
}
|
||||
|
@ -24,7 +24,7 @@ export default function Relay(props) {
|
||||
<>
|
||||
<div className="flex relay w-max">
|
||||
<div>
|
||||
<FontAwesomeIcon icon={faPlug} color={state?.connected ? "green" : "red"} />
|
||||
<FontAwesomeIcon icon={faPlug} color={state?.connected ? "var(--success)" : "var(--error)"} />
|
||||
</div>
|
||||
<div className="f-grow f-col">
|
||||
<b>{name}</b>
|
||||
|
@ -47,7 +47,7 @@ export default function Thread(props) {
|
||||
|
||||
function renderRoot() {
|
||||
if (root) {
|
||||
return <Note data-ev={root} reactions={reactions(root.Id)} deletion={reactions(root.Id, EventKind.Deletion)} />
|
||||
return <Note data-ev={root} reactions={reactions(root.Id)} deletion={reactions(root.Id, EventKind.Deletion)} isThread />
|
||||
} else {
|
||||
return <NoteGhost>
|
||||
Loading thread root.. ({notes.length} notes loaded)
|
||||
|
@ -1,12 +1,38 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');
|
||||
|
||||
:root {
|
||||
--font-color: #fff;
|
||||
--bg-color: #000;
|
||||
--modal-bg-color: rgba(0,0,0, 0.8);
|
||||
--gray-superlight: #eee;
|
||||
--gray-light: #999;
|
||||
--gray-medium: #666;
|
||||
--gray: #333;
|
||||
--gray-secondary: #222;
|
||||
--gray-tertiary: #444;
|
||||
--highlight: #bada55;
|
||||
--error: red;
|
||||
--success: green;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
--font-color: #000;
|
||||
--bg-color: #fff;
|
||||
--highlight: #ff9900;
|
||||
--gray: #ccc;
|
||||
--gray-secondary: #ddd;
|
||||
--gray-tertiary: #eee;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
background-color: var(--bg-color);
|
||||
color: var(--font-color);
|
||||
}
|
||||
|
||||
code {
|
||||
@ -42,19 +68,20 @@ code {
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
background-color: #000;
|
||||
background-color: var(--bg-color);
|
||||
border: 1px solid;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.btn.active {
|
||||
border: 2px solid;
|
||||
background-color: #222;
|
||||
background-color: var(--gray-secondary);
|
||||
color: var(--font-color);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-color: #333;
|
||||
background-color: var(--gray);
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
@ -73,8 +100,12 @@ input[type="text"], input[type="password"], input[type="number"], textarea {
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
border: 0;
|
||||
background-color: #333;
|
||||
color: #eee;
|
||||
background-color: var(--gray);
|
||||
color: var(--font-color);
|
||||
}
|
||||
|
||||
textarea:placeholder {
|
||||
color: var(--gray-superlight);
|
||||
}
|
||||
|
||||
.flex {
|
||||
@ -122,7 +153,7 @@ a {
|
||||
|
||||
span.pill {
|
||||
display: inline-block;
|
||||
background-color: #333;
|
||||
background-color: var(--gray);
|
||||
padding: 2px 10px;
|
||||
border-radius: 10px;
|
||||
user-select: none;
|
||||
@ -130,7 +161,8 @@ span.pill {
|
||||
}
|
||||
|
||||
span.pill.active {
|
||||
background-color: #444;
|
||||
background-color: var(--gray-tertiary);
|
||||
color: var(--font-color);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@ -186,7 +218,7 @@ div.form-group > div:nth-child(2) input {
|
||||
.modal .modal-content > div {
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
background-color: #333;
|
||||
background-color: var(--gray);
|
||||
margin-top: 5vh;
|
||||
}
|
||||
|
||||
@ -225,10 +257,9 @@ body.scroll-lock {
|
||||
}
|
||||
|
||||
.tabs > div.active {
|
||||
background-color: #222;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: red;
|
||||
color: var(--error);
|
||||
}
|
@ -19,7 +19,7 @@
|
||||
}
|
||||
|
||||
.profile .avatar-wrapper {
|
||||
margin: 10px;
|
||||
margin: auto 10px;
|
||||
}
|
||||
|
||||
.profile .avatar {
|
||||
@ -32,10 +32,12 @@
|
||||
.profile .details {
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.profile .website {
|
||||
margin-bottom: 10px;
|
||||
color: var(--highlight);
|
||||
}
|
||||
|
||||
.profile .website::before {
|
||||
@ -53,3 +55,10 @@
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: 420px) {
|
||||
.profile .name { flex-direction: column; }
|
||||
.profile .name .btn {
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
|
@ -1,5 +1,5 @@
|
||||
.root-tabs > div {
|
||||
padding: 5px 0;
|
||||
background-color: #333;
|
||||
background-color: var(--gray);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
@ -1,4 +1,3 @@
|
||||
|
||||
.settings .avatar {
|
||||
width: 256px;
|
||||
height: 256px;
|
||||
@ -15,7 +14,7 @@
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
background-color: black;
|
||||
background-color: var(--bg-color);
|
||||
}
|
||||
|
||||
.settings .avatar .edit:hover {
|
||||
|
Loading…
Reference in New Issue
Block a user