diff --git a/app/assets/stylesheets/card-perma.css b/app/assets/stylesheets/card-perma.css index d56ce29b3..97ba51d1d 100644 --- a/app/assets/stylesheets/card-perma.css +++ b/app/assets/stylesheets/card-perma.css @@ -30,6 +30,7 @@ .card { --card-aspect-ratio: 2 / 0.95; + --lexxy-bg-color: var(--card-bg-color); border: none; } diff --git a/app/assets/stylesheets/comments.css b/app/assets/stylesheets/comments.css index a89842811..0a42d1f3e 100644 --- a/app/assets/stylesheets/comments.css +++ b/app/assets/stylesheets/comments.css @@ -68,8 +68,10 @@ .comment__content { --btn-icon-size: 1.2rem; --btn-size: var(--reaction-size); + --comment-bg-color: var(--color-ink-lightest); + --lexxy-bg-color: var(--comment-bg-color); - background-color: var(--color-ink-lightest); + background-color: var(--comment-bg-color); border-radius: 0.2em; padding: var(--comment-padding-block) diff --git a/app/assets/stylesheets/lexxy.css b/app/assets/stylesheets/lexxy.css index 63f5f1f14..5d0f37dc3 100644 --- a/app/assets/stylesheets/lexxy.css +++ b/app/assets/stylesheets/lexxy.css @@ -84,7 +84,7 @@ lexxy-toolbar { --lexxy-toolbar-icon-size: 1em; - background-color: inherit; + background-color: var(--lexxy-bg-color, var(--color-canvas)); border-block-end: 1px solid var(--color-ink-light); color: currentColor; display: flex; @@ -93,6 +93,9 @@ max-inline-size: 100%; padding: 0.2em 0; position: relative; + position: sticky; + inset-block-start: 0; + z-index: 1; dialog { background-color: var(--color-canvas); diff --git a/app/assets/stylesheets/rich-text-content.css b/app/assets/stylesheets/rich-text-content.css index 27f265a03..9832dbc93 100644 --- a/app/assets/stylesheets/rich-text-content.css +++ b/app/assets/stylesheets/rich-text-content.css @@ -1,6 +1,6 @@ @layer components { .rich-text-content { - --block-margin: 1rem; + --block-margin: 0; :where(h1, h2, h3, h4, h5, h6) { display: block; @@ -40,7 +40,7 @@ border-inline-start: 0.25em solid var(--color-ink-lighter); font-style: italic; margin: var(--block-margin) 0; - padding: 0.5lh 2ch; + padding-inline-start: 2ch; } :where(img, video, embed, object) {