diff --git a/app/assets/stylesheets/comments.css b/app/assets/stylesheets/comments.css index 80968184e..587749fab 100644 --- a/app/assets/stylesheets/comments.css +++ b/app/assets/stylesheets/comments.css @@ -48,7 +48,6 @@ } .comment__body { - padding-inline-end: var(--reaction-size); text-align: start; .action-text-content { @@ -60,6 +59,10 @@ margin-block-end: 0; } } + + &:not:has(lexxy-editor) { + padding-inline-end: var(--reaction-size); + } } .comment__content { diff --git a/app/assets/stylesheets/lexxy.css b/app/assets/stylesheets/lexxy.css index c90d5f6b9..21ee18301 100644 --- a/app/assets/stylesheets/lexxy.css +++ b/app/assets/stylesheets/lexxy.css @@ -38,7 +38,7 @@ } .lexxy-editor__content { - margin: var(--block-space-half) 0; + margin-block-start: var(--block-space-half); min-block-size: calc(7lh + var(--block-space)); outline: 0; @@ -46,6 +46,10 @@ ::selection { background: oklch(var(--lch-blue-light) / 0.5); } + + > :last-child { + margin-block-end: 0; + } } .lexxy-editor--drag-over { @@ -227,12 +231,15 @@ [data-button-group] { display: flex; flex-direction: row; - flex-wrap: wrap; gap: var(--gap); + & { margin-block-start: var(--gap); } + + @media (max-width: 639px) { + flex-wrap: wrap; + } } } @@ -297,17 +304,12 @@ font-size: var(--text-small); list-style: none; margin: 0; + max-height: 200px; min-inline-size: var(--lexxy-prompt-min-width); + overflow: auto; padding: var(--lexxy-prompt-padding); visibility: hidden; z-index: var(--z-popup); - - max-height: 200px; - overflow: scroll; - - &:is(.lexxy-prompt-menu--visible) { - padding: var(--lexxy-prompt-padding); - } } .lexxy-prompt-menu--visible { diff --git a/app/assets/stylesheets/rich-text-content.css b/app/assets/stylesheets/rich-text-content.css index 70f095bca..5a63f9eac 100644 --- a/app/assets/stylesheets/rich-text-content.css +++ b/app/assets/stylesheets/rich-text-content.css @@ -1,8 +1,8 @@ @layer components { - .rich-text-content { + :where(.rich-text-content) { --block-margin: 0.5lh; - :where(h1, h2, h3, h4, h5, h6) { + h1, h2, h3, h4, h5, h6 { display: block; font-weight: 800; letter-spacing: -0.02ch; @@ -12,14 +12,14 @@ 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; } + h1 { font-size: 2em; } + h2 { font-size: 1.5em; } + h3 { font-size: 1.17em; } + h4 { font-size: 1em; } + h5 { font-size: 0.83em; } + h6 { font-size: 0.67em; } - :where(p, ul, ol, dl, blockquote, figure, .attachment) { + p, ul, ol, dl, blockquote, figure, .attachment { margin-block: 0 var(--block-margin); &:not(lexxy-editor &) { @@ -28,49 +28,54 @@ } } - :where(ol, ul) { + ol, ul { list-style: disc; padding-inline-start: 3ch; } - :where(li:has(li)) { + li:has(li) { list-style: none; - :where(ol, ul) { + ol, ul { margin: 0; padding-inline-start: 2ch; } } - :where(b, strong, .lexxy-content__bold) { + b, strong, .lexxy-content__bold { font-weight: 700; } - :where(i, em, .lexxy-content__italic) { + i, em, .lexxy-content__italic { font-style: italic; } - :where(s, .lexxy-content__strikethrough) { + s, .lexxy-content__strikethrough { text-decoration: line-through; } - :where(mark, .lexxy-content__highlight) { + mark, .lexxy-content__highlight { background-color: transparent; color: inherit; } - :where(p, blockquote) { + p, blockquote { letter-spacing: -0.005ch; } - :where(blockquote) { + /* Avoid extra space due to empty paragraphs */ + p:empty { + display: none; + } + + 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) { + img, video, embed, object { inline-size: auto; margin-inline: auto; max-block-size: 32rem; @@ -81,14 +86,10 @@ a:has(img), a:has(video) { inline-size: fit-content; + margin-inline: auto; } - /* Avoid extra space due to empty paragraphs */ - p:empty { - display: none; - } - - :where(hr) { + hr { color: currentColor; block-size: 0; border: none; @@ -103,7 +104,7 @@ } /* Code */ - :where(code, pre) { + code, pre { background-color: var(--color-canvas); border: 1px solid var(--color-ink-lighter); border-radius: 0.3em; @@ -209,7 +210,7 @@ position: relative; max-inline-size: 100%; - :where(progress) { + progress { inline-size: 100%; margin: auto; }