move comments style to .css

src/components/comments/Comments.vue

@@ -329,135 +329,3 @@ function showCorrespondingView() {
   );
 }
 </script>
-<<<<<<< HEAD
-
-<style>
-/* Comments */
-#toggle-comments {
-  position: absolute;
-  right: var(--space-16);
-  bottom: var(--space-16);
-  padding: 0.625rem;
-}
-#comments-container {
-  background-color: black;
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 4.5rem;
-  width: var(--dialog-comments-w);
-  padding: var(--space-24) var(--space-32);
-}
-.comments {
-  scroll-behavior: smooth;
-  overflow-y: auto;
-  height: calc(100% - 3.5rem);
-  margin-bottom: 1rem;
-  margin-right: -2rem;
-  padding-right: 2rem;
-}
-.comments.empty::after {
-  content: 'Partagez vos idées en ajoutant des commentaires';
-  height: 100%;
-  display: grid;
-  place-items: center;
-  text-align: center;
-  max-width: 24ch;
-  margin: auto;
-  font-size: var(--text-sm);
-  color: var(--color-grey-400);
-}
-.comments.empty::before {
-  --icon-size: 1.25rem;
-  --icon-color: var(--color-white);
-  content: '';
-  display: block;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, calc(-50% - 4.5rem));
-  width: var(--icon-size);
-  height: var(--icon-size);
-  background: var(--icon-color, currentColor);
-  mask-repeat: no-repeat;
-  mask-position: center;
-  mask-size: var(--icon-size);
-  mask-image: var(--icon-comment);
-}
-#new-comment {
-  position: absolute;
-  bottom: var(--space-24);
-  left: var(--space-32);
-  right: var(--space-32);
-}
-#new-comment [data-icon] {
-  --column-gap: var(--space-12);
-  font-weight: 500;
-}
-#comments-container form {
-  --flow-space: 0.5rem;
-  flex-direction: column;
-  position: -webkit-sticky;
-  position: sticky;
-  bottom: 5.5rem;
-  background: #333;
-}
-#comments-container textarea:not(.comment__body) {
-  position: sticky;
-  bottom: 0;
-  margin: 0;
-  background: none;
-  padding: 0;
-  color: var(--color-white);
-}
-#comments-container textarea {
-  resize: none;
-}
-#comments-container textarea:focus {
-  outline: none;
-}
-::placeholder {
-  color: var(--color-white-50);
-}
-#comments-container form footer {
-  gap: var(--space-12);
-}
-#comments-container form footer > * {
-  flex-grow: 1;
-}
-
-.track.waiting-comment,
-.track.waiting-comment .drag-zone,
-.vpv-pages-inner-container.waiting-comment .page-inner-container,
-.vpv-pages-inner-container.waiting-comment .vpv-text-layer-text,
-.vpv-pages-inner-container.waiting-comment .vpv-text-layer-wrapper {
-  cursor: var(--icon-comment-cursor) -2 28, cell !important;
-}
-
-.comment-marker {
-  --marker-size: 1.75rem;
-  position: absolute;
-  display: block;
-  width: var(--marker-size);
-  height: var(--marker-size);
-  background: var(--icon-comment-default) no-repeat center / contain;
-  scroll-margin-block-start: 4rem;
-  cursor: pointer !important;
-  z-index: 999;
-  overflow: visible;
-  transition: transform 0.1s ease-out;
-  transform-origin: bottom left;
-  margin-left: calc(var(--marker-size) * -0.025);
-  margin-top: calc(var(--marker-size) / -1.025);
-}
-.comment-marker:hover,
-.comment-marker.big {
-  transform: scale(1.1);
-}
-.comment-marker.active,
-.comment-marker:focus {
-  background-image: var(--icon-comment-focus);
-}
-</style>
-=======
->>>>>>> comments