Adrien Maston
df2e4c1518
* main: (35 commits) Replace the whole card on update Include bottom inset on the modal and footer, too Attempt to fix expanded search input Lose the second close button This seems to have caused the unwanted effect of not focusing the field in Mobile Safari Always display the cancel button, `esc` isn't obvious Nothing should cover the bar, trays or search results Dark theme color isn't black Add env constaints for mobile layout Smaller on mobile Reasonalbe max heights Remove top orientation (it doesn't work well), make right and left classes exclusive This is too fancy, remove it Set reasonable maxes Restore bubble to Maybe Restore structured logging of `queenbee_id` Add a kamal pre-build hook with some safety checks Configure beta to use production blob store Configure beta load balancer Update beta deployment and secrets config ...
397 lines
8.9 KiB
CSS
397 lines
8.9 KiB
CSS
@layer components {
|
|
.rich-text-content {
|
|
--block-margin: 0.5lh;
|
|
|
|
:where(h1, h2, h3, h4, h5, h6) {
|
|
display: block;
|
|
font-weight: 800;
|
|
letter-spacing: -0.02ch;
|
|
line-height: 1.1;
|
|
margin-block: 0 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, .attachment) {
|
|
margin-block: 0 var(--block-margin);
|
|
|
|
&:not(lexxy-editor &) {
|
|
overflow-wrap: break-word;
|
|
text-wrap: pretty;
|
|
}
|
|
}
|
|
|
|
:where(b, strong, .lexxy-content__bold) {
|
|
font-weight: 700;
|
|
}
|
|
|
|
:where(i, em, .lexxy-content__italic) {
|
|
font-style: italic;
|
|
}
|
|
|
|
:where(s, .lexxy-content__strikethrough) {
|
|
text-decoration: line-through;
|
|
}
|
|
|
|
|
|
:where(p, blockquote) {
|
|
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-inline-start: 2ch;
|
|
}
|
|
|
|
:where(img, video, embed, object) {
|
|
inline-size: auto;
|
|
margin-inline: auto;
|
|
max-block-size: 32rem;
|
|
object-fit: contain;
|
|
}
|
|
|
|
/* Links should hug media contained within */
|
|
a:has(img),
|
|
a:has(video) {
|
|
display: inline-block;
|
|
}
|
|
|
|
/* Avoid extra space due to empty paragraphs */
|
|
p:empty {
|
|
display: none;
|
|
}
|
|
|
|
:where(hr) {
|
|
color: currentColor;
|
|
block-size: 0;
|
|
border: none;
|
|
border-block-end: 2px solid currentColor;
|
|
inline-size: 20%;
|
|
margin: calc(var(--block-margin) * 2) 0;
|
|
}
|
|
|
|
.horizontal-divider {
|
|
margin: var(--block-margin) 0;
|
|
padding-block: var(--block-margin);
|
|
}
|
|
|
|
/* 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;
|
|
|
|
&:is(pre),
|
|
&[data-language] {
|
|
border-radius: 0.5em;
|
|
display: block;
|
|
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);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Attachments
|
|
/* ------------------------------------------------------------------------ */
|
|
|
|
.attachment {
|
|
block-size: auto;
|
|
display: block;
|
|
inline-size: fit-content;
|
|
position: relative;
|
|
max-inline-size: 100%;
|
|
|
|
:where(progress) {
|
|
inline-size: 100%;
|
|
margin: auto;
|
|
}
|
|
}
|
|
|
|
.attachment__caption {
|
|
color: color-mix(in oklch, var(--color-ink) 66%, transparent);
|
|
font-size: var(--text-small);
|
|
|
|
.input {
|
|
--input-border-radius: 0.3em;
|
|
--input-border-size: 0;
|
|
--input-padding: 0;
|
|
|
|
color: inherit;
|
|
inline-size: 100%;
|
|
max-inline-size: 100%;
|
|
text-align: center;
|
|
|
|
&:focus {
|
|
--focus-ring-size: 0;
|
|
}
|
|
|
|
@supports (field-sizing: content) {
|
|
field-sizing: content;
|
|
inline-size: auto;
|
|
min-inline-size: 20ch;
|
|
}
|
|
}
|
|
}
|
|
|
|
.attachment__icon {
|
|
aspect-ratio: 4/5;
|
|
background-color: color-mix(var(--attachment-icon-color), transparent 90%);
|
|
block-size: 2.5lh;
|
|
border: 2px solid var(--attachment-icon-color);
|
|
border-block-start-width: 1ch;
|
|
border-radius: 0.5ch;
|
|
box-sizing: border-box;
|
|
color: var(--attachment-icon-color);
|
|
display: grid;
|
|
font-size: var(--text-small);
|
|
font-weight: bold;
|
|
inline-size: auto;
|
|
padding-inline: 0.5ch;
|
|
place-content: center;
|
|
text-transform: uppercase;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.attachment--preview {
|
|
margin-inline: auto;
|
|
text-align: center;
|
|
|
|
img, video {
|
|
block-size: auto;
|
|
display: block;
|
|
margin-inline: auto;
|
|
max-inline-size: 100%;
|
|
user-select: none;
|
|
}
|
|
|
|
> a {
|
|
display: block;
|
|
}
|
|
|
|
.attachment__caption {
|
|
column-gap: 0.5ch;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
margin-block-start: var(--block-space-half);
|
|
}
|
|
}
|
|
|
|
.attachment--file {
|
|
--attachment-icon-color: var(--color-ink-medium);
|
|
|
|
align-items: center;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 1ch;
|
|
inline-size: auto;
|
|
|
|
.attachment__caption {
|
|
display: grid;
|
|
flex: 1;
|
|
text-align: start;
|
|
}
|
|
|
|
.attachment__name {
|
|
color: var(--color-ink);
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* Video attachments don't have an identifiable class, but we need to
|
|
* make sure the caption is always below the video */
|
|
&:has(video) {
|
|
.attachment__caption {
|
|
flex: none;
|
|
inline-size: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.attachment--psd,
|
|
.attachment--key,
|
|
.attachment--sketch,
|
|
.attachment--ai,
|
|
.attachment--eps,
|
|
.attachment--indd,
|
|
.attachment--svg,
|
|
.attachment--ppt,
|
|
.attachment--pptx {
|
|
--attachment-icon-color: oklch(var(--lch-red-medium));
|
|
}
|
|
|
|
.attachment--css,
|
|
.attachment--crash,
|
|
.attachment--php,
|
|
.attachment--json,
|
|
.attachment--htm,
|
|
.attachment--html,
|
|
.attachment--rb,
|
|
.attachment--erb,
|
|
.attachment--ts,
|
|
.attachment--js {
|
|
--attachment-icon-color: oklch(var(--lch-purple-medium));
|
|
}
|
|
|
|
.attachment--txt,
|
|
.attachment--pages,
|
|
.attachment--rtf,
|
|
.attachment--md,
|
|
.attachment--doc,
|
|
.attachment--docx {
|
|
--attachment-icon-color: oklch(var(--lch-blue-medium));
|
|
}
|
|
|
|
.attachment--csv &,
|
|
.attachment--numbers &,
|
|
.attachment--xls &,
|
|
.attachment--xlsx & {
|
|
--attachment-icon-color: oklch(var(--lch-green-medium));
|
|
}
|
|
|
|
.attachment__link {
|
|
color: var(--color-link);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* Custom attachments such as mentions, etc. */
|
|
action-text-attachment[content-type^='application/vnd.actiontext'] {
|
|
--attachment-bg-color: transparent;
|
|
--attachment-image-size: 1em;
|
|
--attachment-text-color: currentColor;
|
|
|
|
align-items: center;
|
|
background: var(--attachment-bg-color);
|
|
border-radius: 99rem;
|
|
box-shadow:
|
|
-0.25ch 0 0 var(--attachment-bg-color),
|
|
0.5ch 0 0 var(--attachment-bg-color);
|
|
color: var(--attachment-text-color);
|
|
display: inline-flex;
|
|
gap: 0.25ch;
|
|
margin: 0;
|
|
padding: 0;
|
|
position: relative;
|
|
vertical-align: bottom;
|
|
white-space: normal;
|
|
|
|
lexxy-editor & {
|
|
cursor: pointer;
|
|
}
|
|
|
|
img {
|
|
block-size: var(--attachment-image-size);
|
|
border-radius: 50%;
|
|
inline-size: var(--attachment-image-size);
|
|
}
|
|
|
|
&.node--selected {
|
|
--attachment-bg-color: oklch(var(--lch-blue-dark));
|
|
--attachment-text-color: var(--color-ink-inverted);
|
|
}
|
|
}
|
|
|
|
action-text-attachment[content-type^='application/vnd.actiontext.mention'] {
|
|
img {
|
|
object-fit: cover;
|
|
}
|
|
}
|
|
|
|
[data-lexical-cursor] {
|
|
animation: blink 1s step-end infinite;
|
|
block-size: 1lh;
|
|
border-inline-start: 1px solid currentColor;
|
|
line-height: inherit;
|
|
margin-block: 1em;
|
|
}
|
|
}
|