merge

src/components/comments/Comment.vue

@@ -231,89 +231,3 @@ function unhightlightCorrespondingMarker() {
   correspondingMarker.classList.remove("big");
 }
 </script>
-
-<style scoped>
-.comments > .comment:not([data-opened="true"]) {
-  cursor: pointer;
-}
-.comment {
-  --flow-space: var(--space-12);
-  font-size: var(--text-sm);
-  border: var(--border);
-  border-width: 2px;
-  border-radius: var(--rounded-lg);
-  padding: var(--space-12);
-  color: var(--color-grey-400);
-  transition: border-color 0.1s ease-in-out;
-}
-.comment.highlight {
-  border-color: #fff;
-}
-
-.comment header p {
-  display: flex;
-  gap: var(--space-8);
-}
-.comment header strong,
-.comment footer {
-  font-weight: 500;
-  color: var(--color-white);
-}
-.comment header time {
-  color: var(--color-primary);
-  font-weight: 500;
-  margin-left: auto;
-}
-.comment[data-status="unread"] {
-  background: var(--color-white);
-  border-color: var(--color-white);
-  color: var(--color-grey-700);
-}
-.comment[data-status="unread"] header p > :first-child::before {
-  content: "";
-  display: inline-block;
-  width: 0.375rem;
-  height: 0.375rem;
-  border-radius: 50%;
-  background: var(--color-primary);
-  margin-right: var(--space-8);
-  margin-bottom: 0.075em;
-}
-.comment[data-status="unread"] header strong,
-.comment[data-status="unread"] footer {
-  color: var(--color-black);
-}
-.comment[data-status="unread"] header time {
-  color: var(--color-primary);
-}
-.comment[data-opened="true"] {
-  border-color: transparent;
-}
-.comment[data-opened="true"] .comment__replies {
-  color: var(--color-primary);
-}
-.comment__id,
-.comment__page,
-.comment__date {
-  flex-shrink: 0;
-}
-.comment__body {
-  width: 100%;
-  padding: 0;
-  margin-bottom: 0;
-  color: var(--color-grey-400);
-  font: inherit;
-  letter-spacing: inherit;
-}
-.comment__ctas > * {
-  --border-color: transparent;
-  margin-right: var(--space-4);
-}
-.comment__edit-ctas {
-  display: flex;
-  gap: var(--space-12);
-}
-.comment__edit-ctas > * {
-  flex-grow: 1;
-}
-</style>

src/components/comments/Comments.vue

@@ -329,6 +329,7 @@ function showCorrespondingView() {
   );
 }
 </script>
+<<<<<<< HEAD
 
 <style>
 /* Comments */
@@ -458,3 +459,5 @@ function showCorrespondingView() {
   background-image: var(--icon-comment-focus);
 }
 </style>
+=======
+>>>>>>> comments