fix: waline style bug

src/components/Comments/Waline.astro

@@ -54,107 +54,138 @@ document.addEventListener('astro:after-swap', initWaline)
 </script>
 
 <style is:global>
-#waline {
+#waline .wl-panel {
-  .wl-panel {
   margin: 0;
   border-radius: 0.5rem;
 }
-  .wl-editor::placeholder {
+
+#waline .wl-editor::placeholder {
   color: var(--waline-light-grey);
 }
-  /* .wl-btn.primary {
+
+/* #waline .wl-btn.primary {
   border-color: var(--waline-light-grey);
   color: var(--waline-color);
   background: none;
 } */
-  .wl-text-number {
+
+#waline .wl-text-number {
   display: none;
 }
-  .wl-action[title="Markdown Guide"] {
+
+#waline .wl-action[title="Markdown Guide"] {
   display: none;
 }
-  .wl-emoji-popup {
+
+#waline .wl-emoji-popup {
   inset-inline-start: 0;
-    .wl-tab-wrapper {
+}
+
+#waline .wl-emoji-popup .wl-tab-wrapper {
   -ms-overflow-style: none;
   scrollbar-width: none;
-      &::-webkit-scrollbar {
+}
+
+#waline .wl-emoji-popup .wl-tab-wrapper::-webkit-scrollbar {
   display: none;
 }
+
+#waline .wl-emoji-popup .wl-tab-wrapper {
+  margin: 0;
 }
-  }
+
-  /* .wl-editor {
+/* #waline .wl-editor {
   min-height: 6rem;
 } */
-  /* .wl-card-item {
+
+/* #waline .wl-card-item {
   padding-left: 0;
   padding-right: 0;
 } */
-  .wl-meta-head {
+
+#waline .wl-meta-head {
   padding-top: 0.75rem;
   padding-bottom: 0.5rem;
 }
-  .wl-sort {
+
+#waline .wl-sort {
   display: none;
 }
-  .wl-card {
+
+#waline .wl-card {
   border-bottom: none;
 }
-  .wl-footer {
+
+#waline .wl-footer {
   margin: 0.5rem;
 }
-  /* .wl-comment {
+
+/* #waline .wl-comment {
   margin-bottom: 2rem;
 } */
-  .wl-header {
+
+#waline .wl-header {
   padding: 0;
 }
-  /* .wl-nick,
+
-  .wl-mail,
+/* #waline .wl-nick,
-  .wl-link {
+#waline .wl-mail,
+#waline .wl-link {
   padding-left: 1rem;
   padding-right: 1rem;
 } */
-  .wl-header.item3 {
+
+#waline .wl-header.item3 {
   border-bottom: none;
 }
-  .wl-user {
+
+#waline .wl-user {
   margin-inline-end: 0.9rem;
 }
-  .wl-like {
+
+#waline .wl-like {
   margin-right: 0.4rem;
 }
-  .wl-content p {
+
+#waline .wl-content p {
   line-height: 1.5rem;
 }
-  /* .wl-power{
+
+/* #waline .wl-power {
   color: color-mix(in oklch, var(--waline-theme-color), transparent 40%);
 }
-  a[href*="walinejs"] {
+
+#waline a[href*="walinejs"] {
   color: color-mix(in oklch, var(--waline-theme-color), transparent 40%);
 } */
-  /* .wl-user-avatar {
+
+/* #waline .wl-user-avatar {
   color: var(--waline-light-grey);
 } */
-  .wl-time {
+
+#waline .wl-time {
   color: color-mix(in oklch, var(--waline-theme-color), transparent 40%);
 }
-  .wl-header-item {
+
+#waline .wl-header-item {
   border-bottom: 1px solid var(--waline-border-color);
 }
-  .wl-header label {
+
+#waline .wl-header label {
   font-size: 0.75rem;
 }
-  .wl-header input {
+
+#waline .wl-header input {
   font-size: 0.7rem;
 }
-  .wl-editor {
+
+#waline .wl-editor {
   min-height: 6rem;
 }
-  .wl-nick {
+
+#waline .wl-nick {
   margin-inline-end: 0.6rem;
 }
-}
 </style>
 
 <style