Lexxy content tweaks

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;
     }

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)

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);

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) {