mirror of
https://github.com/urbit/shrub.git
synced 2024-12-19 16:51:42 +03:00
Merge pull request #4477 from urbit/james/blockquote-spacing
chat: blockquote spacing
This commit is contained in:
matildepark
GitHub
commit
390a17b706
@ -188,7 +188,8 @@ export default class ChatMessage extends Component<ChatMessageProps> {
|
||||
<Box
|
||||
ref={this.divRef}
|
||||
pt={renderSigil ? 2 : 0}
|
||||
pb={2}
|
||||
pb={isLastMessage ? 4 : 2}
|
||||
pr={5}
|
||||
className={containerClass}
|
||||
style={style}
|
||||
>
|
||||
|
||||
@ -5,6 +5,7 @@ import RemarkDisableTokenizers from 'remark-disable-tokenizers';
|
||||
import urbitOb from 'urbit-ob';
|
||||
import { Text } from '@tlon/indigo-react';
|
||||
import { GroupLink } from '~/views/components/GroupLink';
|
||||
import { Row } from '@tlon/indigo-react';
|
||||
|
||||
const DISABLED_BLOCK_TOKENS = [
|
||||
'indentedCode',
|
||||
@ -79,7 +80,7 @@ const MessageMarkdown = React.memo((props) => {
|
||||
|
||||
return lines.map((line, i) => (
|
||||
<>
|
||||
{i !== 0 && <br />}
|
||||
{i !== 0 && <Row height={2} />}
|
||||
<ReactMarkdown
|
||||
{...rest}
|
||||
source={line}
|
||||
|
||||
@ -4,7 +4,8 @@
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
html, body {
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
@ -21,7 +22,17 @@ html, body {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
p, h1, h2, h3, h4, h5, h6, a, input, textarea, button {
|
||||
p,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
a,
|
||||
input,
|
||||
textarea,
|
||||
button {
|
||||
margin-block-end: unset;
|
||||
margin-block-start: unset;
|
||||
-webkit-margin-before: unset;
|
||||
@ -30,7 +41,9 @@ p, h1, h2, h3, h4, h5, h6, a, input, textarea, button {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
textarea, input, button {
|
||||
textarea,
|
||||
input,
|
||||
button {
|
||||
outline: none;
|
||||
-webkit-appearance: none;
|
||||
border: none;
|
||||
@ -64,11 +77,11 @@ h2 {
|
||||
}
|
||||
|
||||
.mono {
|
||||
font-family: "Source Code Pro", monospace;
|
||||
font-family: 'Source Code Pro', monospace;
|
||||
}
|
||||
|
||||
.bg-welcome-green {
|
||||
background-color: #ECF6F2;
|
||||
background-color: #ecf6f2;
|
||||
}
|
||||
|
||||
.c-default {
|
||||
@ -92,7 +105,7 @@ h2 {
|
||||
}
|
||||
|
||||
.placeholder-inter::placeholder {
|
||||
font-family: "Inter", sans-serif;
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
.embed-container iframe {
|
||||
@ -105,7 +118,7 @@ h2 {
|
||||
|
||||
/* toggler checkbox */
|
||||
.toggle::after {
|
||||
content: "";
|
||||
content: '';
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
background: white;
|
||||
@ -116,7 +129,7 @@ h2 {
|
||||
}
|
||||
|
||||
.toggle.checked::after {
|
||||
content: "";
|
||||
content: '';
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
background: white;
|
||||
@ -134,7 +147,6 @@ h2 {
|
||||
border-radius: 0.25rem 0.25rem 0 0;
|
||||
}
|
||||
|
||||
|
||||
.green3 {
|
||||
color: #7ea899;
|
||||
}
|
||||
@ -179,21 +191,15 @@ h2 {
|
||||
}
|
||||
|
||||
blockquote {
|
||||
padding-left: 24px;
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
margin-top: 8px;
|
||||
margin-bottom: 8px;
|
||||
padding: 0 0 0 16px;
|
||||
margin: 0;
|
||||
border-left: 1px solid black;
|
||||
}
|
||||
|
||||
|
||||
:root {
|
||||
--dark-gray: #555555;
|
||||
--gray: #7F7F7F;
|
||||
--medium-gray: #CCCCCC;
|
||||
--gray: #7f7f7f;
|
||||
--medium-gray: #cccccc;
|
||||
--light-gray: rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
.chat .react-codemirror2 {
|
||||
@ -223,40 +229,102 @@ blockquote {
|
||||
font-family: 'Source Code Pro';
|
||||
}
|
||||
|
||||
.chat .CodeMirror-selected { background:#BAE3FE !important; color: black; }
|
||||
pre.CodeMirror-placeholder.CodeMirror-line-like { color: var(--gray); }
|
||||
|
||||
.chat .cm-s-tlon span { font-family: "Inter"}
|
||||
.chat .cm-s-tlon span.cm-meta { color: var(--gray); }
|
||||
.chat .cm-s-tlon span.cm-number { color: var(--gray); }
|
||||
.chat .cm-s-tlon span.cm-quote { color: var(--gray); }
|
||||
.chat .cm-s-tlon span.cm-keyword { line-height: 1em; font-weight: bold; color: var(--gray); }
|
||||
.chat .cm-s-tlon span.cm-atom { font-weight: bold; color: var(--gray); }
|
||||
.chat .cm-s-tlon span.cm-def { color: black; }
|
||||
.chat .cm-s-tlon span.cm-variable { color: black; }
|
||||
.chat .cm-s-tlon span.cm-variable-2 { color: black; }
|
||||
.chat .cm-s-tlon span.cm-variable-3, .chat .cm-s-tlon span.cm-type { color: black; }
|
||||
.chat .cm-s-tlon span.cm-property { color: black; }
|
||||
.chat .cm-s-tlon span.cm-operator { color: black; }
|
||||
.chat .cm-s-tlon span.cm-comment { font-family: 'Source Code Pro'; color: black; background-color: var(--light-gray); display: inline-block; border-radius: 2px;}
|
||||
.chat .cm-s-tlon span.cm-string { color: var(--dark-gray); }
|
||||
.chat .cm-s-tlon span.cm-string-2 { color: var(--gray); }
|
||||
.chat .cm-s-tlon span.cm-qualifier { color: #555; }
|
||||
.chat .cm-s-tlon span.cm-error { color: #FF0000; }
|
||||
.chat .cm-s-tlon span.cm-attribute { color: var(--gray); }
|
||||
.chat .cm-s-tlon span.cm-tag { color: var(--gray); }
|
||||
.chat .cm-s-tlon span.cm-link { color: var(--dark-gray); text-decoration: none;}
|
||||
.chat .cm-s-tlon .CodeMirror-activeline-background { background: var(--gray); }
|
||||
.chat .cm-s-tlon .CodeMirror-cursor {
|
||||
border-left: 2px solid #3687FF;
|
||||
.chat .CodeMirror-selected {
|
||||
background: #bae3fe !important;
|
||||
color: black;
|
||||
}
|
||||
pre.CodeMirror-placeholder.CodeMirror-line-like {
|
||||
color: var(--gray);
|
||||
}
|
||||
|
||||
.chat .cm-s-tlon span.cm-builtin { color: var(--gray); }
|
||||
.chat .cm-s-tlon span.cm-bracket { color: var(--gray); }
|
||||
.chat .cm-s-tlon span {
|
||||
font-family: 'Inter';
|
||||
}
|
||||
.chat .cm-s-tlon span.cm-meta {
|
||||
color: var(--gray);
|
||||
}
|
||||
.chat .cm-s-tlon span.cm-number {
|
||||
color: var(--gray);
|
||||
}
|
||||
.chat .cm-s-tlon span.cm-quote {
|
||||
color: var(--gray);
|
||||
}
|
||||
.chat .cm-s-tlon span.cm-keyword {
|
||||
line-height: 1em;
|
||||
font-weight: bold;
|
||||
color: var(--gray);
|
||||
}
|
||||
.chat .cm-s-tlon span.cm-atom {
|
||||
font-weight: bold;
|
||||
color: var(--gray);
|
||||
}
|
||||
.chat .cm-s-tlon span.cm-def {
|
||||
color: black;
|
||||
}
|
||||
.chat .cm-s-tlon span.cm-variable {
|
||||
color: black;
|
||||
}
|
||||
.chat .cm-s-tlon span.cm-variable-2 {
|
||||
color: black;
|
||||
}
|
||||
.chat .cm-s-tlon span.cm-variable-3,
|
||||
.chat .cm-s-tlon span.cm-type {
|
||||
color: black;
|
||||
}
|
||||
.chat .cm-s-tlon span.cm-property {
|
||||
color: black;
|
||||
}
|
||||
.chat .cm-s-tlon span.cm-operator {
|
||||
color: black;
|
||||
}
|
||||
.chat .cm-s-tlon span.cm-comment {
|
||||
font-family: 'Source Code Pro';
|
||||
color: black;
|
||||
background-color: var(--light-gray);
|
||||
display: inline-block;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.chat .cm-s-tlon span.cm-string {
|
||||
color: var(--dark-gray);
|
||||
}
|
||||
.chat .cm-s-tlon span.cm-string-2 {
|
||||
color: var(--gray);
|
||||
}
|
||||
.chat .cm-s-tlon span.cm-qualifier {
|
||||
color: #555;
|
||||
}
|
||||
.chat .cm-s-tlon span.cm-error {
|
||||
color: #ff0000;
|
||||
}
|
||||
.chat .cm-s-tlon span.cm-attribute {
|
||||
color: var(--gray);
|
||||
}
|
||||
.chat .cm-s-tlon span.cm-tag {
|
||||
color: var(--gray);
|
||||
}
|
||||
.chat .cm-s-tlon span.cm-link {
|
||||
color: var(--dark-gray);
|
||||
text-decoration: none;
|
||||
}
|
||||
.chat .cm-s-tlon .CodeMirror-activeline-background {
|
||||
background: var(--gray);
|
||||
}
|
||||
.chat .cm-s-tlon .CodeMirror-cursor {
|
||||
border-left: 2px solid #3687ff;
|
||||
}
|
||||
|
||||
.chat .cm-s-tlon span.cm-builtin {
|
||||
color: var(--gray);
|
||||
}
|
||||
.chat .cm-s-tlon span.cm-bracket {
|
||||
color: var(--gray);
|
||||
}
|
||||
/* .chat .cm-s-tlon { font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;} */
|
||||
|
||||
|
||||
.chat .cm-s-tlon .CodeMirror-matchingbracket { outline:1px solid grey; color:black !important; }
|
||||
.chat .cm-s-tlon .CodeMirror-matchingbracket {
|
||||
outline: 1px solid grey;
|
||||
color: black !important;
|
||||
}
|
||||
|
||||
.chat .CodeMirror-hints.tlon {
|
||||
/* font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; */
|
||||
@ -271,7 +339,7 @@ pre.CodeMirror-placeholder.CodeMirror-line-like { color: var(--gray); }
|
||||
|
||||
.title-input[placeholder]:empty:before {
|
||||
content: attr(placeholder);
|
||||
color: #7F7F7F;
|
||||
color: #7f7f7f;
|
||||
}
|
||||
|
||||
/* dark */
|
||||
@ -324,7 +392,7 @@ pre.CodeMirror-placeholder.CodeMirror-line-like { color: var(--gray); }
|
||||
filter: invert(1);
|
||||
}
|
||||
.o-80-d {
|
||||
opacity: .8;
|
||||
opacity: 0.8;
|
||||
}
|
||||
.focus-b--white-d:focus {
|
||||
border-color: #fff;
|
||||
@ -347,7 +415,6 @@ pre.CodeMirror-placeholder.CodeMirror-line-like { color: var(--gray); }
|
||||
background: none;
|
||||
}
|
||||
|
||||
|
||||
/* codemirror */
|
||||
.chat .cm-s-tlon.CodeMirror {
|
||||
color: #fff;
|
||||
@ -378,7 +445,6 @@ pre.CodeMirror-placeholder.CodeMirror-line-like { color: var(--gray); }
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
||||
.chat .cm-s-tlon span.cm-string {
|
||||
color: var(--gray);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user