diff --git a/src/assets/css/index.css b/src/assets/css/index.css
index 148a9cb..e0fc8a4 100644
--- a/src/assets/css/index.css
+++ b/src/assets/css/index.css
@@ -18,6 +18,7 @@
@import 'src/2.blocks.badge.css';
@import 'src/2.blocks.button.css';
@import 'src/2.blocks.card.css';
+@import 'src/2.blocks.comments.css';
@import 'src/2.blocks.design-to-light.css';
@import 'src/2.blocks.dialog.css';
@import 'src/2.blocks.header.css';
diff --git a/src/assets/css/src/2.blocks.comments.css b/src/assets/css/src/2.blocks.comments.css
new file mode 100644
index 0000000..27cc823
--- /dev/null
+++ b/src/assets/css/src/2.blocks.comments.css
@@ -0,0 +1,216 @@
+/* COMMENTS BLOCK */
+
+#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);
+}
+
+.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;
+}
diff --git a/src/components/comments/Comment.vue b/src/components/comments/Comment.vue
index 273386a..b89ec5b 100644
--- a/src/components/comments/Comment.vue
+++ b/src/components/comments/Comment.vue
@@ -235,89 +235,3 @@ function unhightlightCorrespondingMarker() {
correspondingMarker.classList.remove("big");
}
-
-
diff --git a/src/components/comments/Comments.vue b/src/components/comments/Comments.vue
index 5a947b0..4721e5d 100644
--- a/src/components/comments/Comments.vue
+++ b/src/components/comments/Comments.vue
@@ -325,132 +325,3 @@ function showCorrespondingView() {
);
}
-
-