Jorge Manrubia
176c597783
This was necessary after fixing the issue of having figure attachments appear within <p> elements (which was invalid).
364 lines
8.8 KiB
CSS
364 lines
8.8 KiB
CSS
@layer components {
|
|
.rich-text-content {
|
|
--block-margin: 1rem;
|
|
|
|
:where(h1, h2, h3, h4, h5, h6) {
|
|
display: block;
|
|
font-weight: 800;
|
|
hyphens: auto;
|
|
letter-spacing: -0.02ch;
|
|
line-height: 1.1;
|
|
margin-block: var(--block-margin);
|
|
overflow-wrap: break-word;
|
|
text-wrap: balance;
|
|
}
|
|
|
|
:where(h1) { font-size: 2em; }
|
|
:where(h2) { font-size: 1.5em; }
|
|
:where(h3) { font-size: 1.17em; }
|
|
:where(h4) { font-size: 1em; }
|
|
:where(h5) { font-size: 0.83em; }
|
|
:where(h6) { font-size: 0.67em; }
|
|
|
|
:where(p, ul, ol, dl, blockquote, figure:not(.attachment--custom), .attachment:not(.attachment--custom)) {
|
|
margin-block: var(--block-margin);
|
|
overflow-wrap: break-word;
|
|
text-wrap: pretty;
|
|
}
|
|
|
|
:where(b, strong) {
|
|
font-weight: 700;
|
|
}
|
|
|
|
:where(p, blockquote) {
|
|
hyphens: auto;
|
|
letter-spacing: -0.005ch;
|
|
}
|
|
|
|
:where(blockquote) {
|
|
border-inline-start: 0.25em solid var(--color-ink-lighter);
|
|
font-style: italic;
|
|
margin: var(--block-margin) 0;
|
|
padding: 0.5lh 2ch;
|
|
}
|
|
|
|
:where(img, video, embed, object) {
|
|
margin-inline: auto;
|
|
max-block-size: 32rem;
|
|
object-fit: contain;
|
|
|
|
/* Links should hug media contained within */
|
|
a:has(&) {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
|
|
/* Attachments */
|
|
.attachment:not(.attachment--custom) {
|
|
block-size: auto;
|
|
display: inline-block;
|
|
inline-size: 100%;
|
|
position: relative;
|
|
margin-inline: 0;
|
|
max-inline-size: 100%;
|
|
|
|
&:is(figure) img,
|
|
&:is(figure) video {
|
|
block-size: auto;
|
|
display: block;
|
|
margin-inline: auto;
|
|
max-inline-size: 100%;
|
|
user-select: none;
|
|
}
|
|
|
|
:where(progress) {
|
|
inline-size: 100%;
|
|
margin: auto;
|
|
}
|
|
}
|
|
|
|
.attachment__caption {
|
|
color: var(--color-ink-dark);
|
|
display: flex;
|
|
font-size: var(--text-small);
|
|
flex-wrap: wrap;
|
|
line-height: 1.3;
|
|
column-gap: 0.5ch;
|
|
justify-content: center;
|
|
margin: var(--block-space-half) var(--inline-space);
|
|
text-align: center;
|
|
|
|
.input {
|
|
inline-size: 100%;
|
|
max-inline-size: 100%;
|
|
text-align: center;
|
|
|
|
@supports (field-sizing: content) {
|
|
field-sizing: content;
|
|
inline-size: auto;
|
|
min-inline-size: 20ch;
|
|
}
|
|
}
|
|
}
|
|
|
|
.attachment__figure {
|
|
--hover-size: 0;
|
|
}
|
|
|
|
.attachment--file {
|
|
align-items: center;
|
|
display: inline-flex;
|
|
|
|
.attachment__caption {
|
|
flex-direction: column;
|
|
flex-wrap: nowrap;
|
|
justify-content: flex-start;
|
|
text-align: start;
|
|
|
|
strong {
|
|
color: var(--color-ink);
|
|
}
|
|
}
|
|
}
|
|
|
|
.attachment__icon {
|
|
aspect-ratio: 4/5;
|
|
background-color: var(--color-canvas);
|
|
block-size: calc(2.5lh + 0.5ch);
|
|
border: 2px solid var(--color-ink-medium);
|
|
border-radius: 0.3em;
|
|
color: var(--color-ink-dark);
|
|
display: inline-grid;
|
|
font-size: var(--text-small);
|
|
font-weight: 800;
|
|
inline-size: auto;
|
|
overflow: clip;
|
|
padding-block-start: 0.4lh;
|
|
place-content: center;
|
|
position: relative;
|
|
text-transform: uppercase;
|
|
|
|
&::before {
|
|
background-color: var(--color-ink-medium);
|
|
block-size: 0.5lh;
|
|
content: "";
|
|
display: block;
|
|
inline-size: 100%;
|
|
inset: 0 0 auto;
|
|
position: absolute;
|
|
}
|
|
|
|
.attachment--psd &,
|
|
.attachment--key &,
|
|
.attachment--sketch &,
|
|
.attachment--ai &,
|
|
.attachment--eps &,
|
|
.attachment--indd &,
|
|
.attachment--svg &,
|
|
.attachment--ppt &,
|
|
.attachment--pptx & {
|
|
color: oklch(var(--lch-red-dark));
|
|
background-color: oklch(var(--lch-red-lightest));
|
|
border-color: oklch(var(--lch-red-medium));
|
|
|
|
&::before {
|
|
background-color: oklch(var(--lch-red-medium));
|
|
}
|
|
}
|
|
|
|
.attachment--css &,
|
|
.attachment--php &,
|
|
.attachment--json &,
|
|
.attachment--htm &,
|
|
.attachment--html &,
|
|
.attachment--rb &,
|
|
.attachment--erb &,
|
|
.attachment--ts &,
|
|
.attachment--js & {
|
|
color: oklch(var(--lch-purple-dark));
|
|
background-color: oklch(var(--lch-purple-lightest));
|
|
border-color: oklch(var(--lch-purple-medium));
|
|
|
|
&::before {
|
|
background-color: oklch(var(--lch-purple-medium));
|
|
}
|
|
}
|
|
|
|
.attachment--txt &,
|
|
.attachment--pages &,
|
|
.attachment--rtf &,
|
|
.attachment--md &,
|
|
.attachment--doc &,
|
|
.attachment--docx & {
|
|
color: oklch(var(--lch-blue-dark));
|
|
background-color: oklch(var(--lch-blue-lightest));
|
|
border-color: oklch(var(--lch-blue-medium));
|
|
|
|
&::before {
|
|
background-color: oklch(var(--lch-blue-medium));
|
|
}
|
|
}
|
|
|
|
.attachment--csv &,
|
|
.attachment--numbers &,
|
|
.attachment--xls &,
|
|
.attachment--xlsx & {
|
|
color: oklch(var(--lch-green-dark));
|
|
background-color: oklch(var(--lch-green-lightest));
|
|
border-color: oklch(var(--lch-green-medium));
|
|
|
|
&::before {
|
|
background-color: oklch(var(--lch-green-medium));
|
|
}
|
|
}
|
|
}
|
|
|
|
.attachment__link {
|
|
--hover-size: 0;
|
|
|
|
color: var(--color-link);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* Avoid extra space due to empty paragraphs */
|
|
p:empty {
|
|
display: none;
|
|
}
|
|
|
|
/* Code */
|
|
:where(code, pre) {
|
|
background-color: var(--color-canvas);
|
|
border: 1px solid var(--color-ink-lighter);
|
|
border-radius: 0.3em;
|
|
color: var(--color-ink);
|
|
font-family: var(--font-mono);
|
|
font-size: 0.85em;
|
|
font-weight: 500;
|
|
margin-block: var(--block-margin);
|
|
padding: 0.1em 0.3em;
|
|
|
|
&[data-language] {
|
|
border-radius: 0.5em;
|
|
display: block;
|
|
hyphens: none;
|
|
overflow-x: auto;
|
|
padding: 0.5lh 2ch;
|
|
tab-size: 2;
|
|
text-wrap: nowrap;
|
|
white-space: pre;
|
|
word-break: break-word;
|
|
|
|
/* Keywords and attributes */
|
|
.code-token__attr,
|
|
.token.atrule,
|
|
.token.attr,
|
|
.token.keyword {
|
|
color: var(--color-code-token__att);
|
|
}
|
|
|
|
/* Constants, booleans, numbers, properties, tags */
|
|
.code-token__property,
|
|
.token.boolean,
|
|
.token.constant,
|
|
.token.deleted,
|
|
.token.number,
|
|
.token.property,
|
|
.token.symbol,
|
|
.token.tag {
|
|
color: var(--color-code-token__property);
|
|
}
|
|
|
|
/* Strings, selectors, and built-in constructs */
|
|
.code-token__selector,
|
|
.token.builtin,
|
|
.token.char,
|
|
.token.inserted,
|
|
.token.selector,
|
|
.token.string {
|
|
color: var(--color-code-token__selector);
|
|
}
|
|
|
|
/* Comments and meta information */
|
|
.code-token__comment,
|
|
.token.cdata,
|
|
.token.comment,
|
|
.token.doctype,
|
|
.token.prolog {
|
|
color: var(--color-code-token__comment);
|
|
font-style: italic;
|
|
}
|
|
|
|
/* Operators and symbolic entities */
|
|
.code-token__operator,
|
|
.token.entity,
|
|
.token.operator,
|
|
.token.url {
|
|
color: var(--color-code-token__operator);
|
|
}
|
|
|
|
/* Functions and class names */
|
|
.code-token__function,
|
|
.token.class,
|
|
.token.class-name,
|
|
.token.function {
|
|
color: var(--color-code-token__function);
|
|
}
|
|
|
|
/* Variables, regex, namespaces, important */
|
|
.code-token__variable,
|
|
.token.important,
|
|
.token.namespace,
|
|
.token.regex,
|
|
.token.variable {
|
|
color: var(--color-code-token__variable);
|
|
}
|
|
|
|
/* Punctuation */
|
|
.code-token__punctuation,
|
|
.token.punctuation {
|
|
color: var(--color-code-token__punctuation);
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Custom attachments such as mentions, etc. */
|
|
.attachment--custom {
|
|
display: inline;
|
|
padding: 0;
|
|
margin: 0;
|
|
white-space: normal;
|
|
}
|
|
|
|
.attachment--custom,
|
|
action-text-attachment[content-type^='application/vnd.actiontext'] {
|
|
--attachment-image-size: 1em;
|
|
--attachment-selected-color: oklch(var(--lch-blue-dark));
|
|
|
|
align-items: center;
|
|
display: inline-flex;
|
|
gap: 0.25ch;
|
|
position: relative;
|
|
vertical-align: bottom;
|
|
|
|
lexical-editor & {
|
|
cursor: pointer;
|
|
}
|
|
|
|
img {
|
|
block-size: var(--attachment-image-size);
|
|
border-radius: 50%;
|
|
inline-size: var(--attachment-image-size);
|
|
}
|
|
|
|
&.node--selected {
|
|
background: var(--attachment-selected-color);
|
|
box-shadow:
|
|
-0.25ch 0 0 var(--attachment-selected-color),
|
|
0.5ch 0 0 var(--attachment-selected-color);
|
|
border-radius: 99rem;
|
|
color: var(--color-ink-inverted);
|
|
}
|
|
}
|
|
}
|
|
}
|