Add form to add a comment to PdfViewer

src/assets/css/src/0.2.variables.css

@@ -13,6 +13,7 @@
   --color-white-20: hsla(0, 0%, 100%, .2); /* White 20 */
   --color-white-50: hsla(0, 0%, 100%, .5); /* White 50 */
   --color-white-70: hsla(0, 0%, 100%, .7); /* White 70 */
+  --color-white-90: hsla(0, 0%, 100%, .9); /* White 90 */
   --color-white-100: hsla(0, 0%, 100%, 1); /* White 100 */
   --color-white: var(--color-white-100); /* White */
   --color-grey-50:  hsla(0, 0%, 95%, 1); /* Light Grey */

src/assets/css/src/2.blocks.button.css

@@ -76,11 +76,11 @@ input[type="checkbox"]:checked + .btn--primary {
 }
 .btn--white-10 {
   --background: var(--color-white-10);
-  --color: var(--color-grey-700);
+  --color: var(--color-white-80);
 }
 .btn--white-20 {
   --background: var(--color-white-20);
-  --color: var(--color-white);
+  --color: var(--color-white-90);
 }
 
 .btn--transparent {

src/assets/css/src/3.utilities.colors.css

@@ -38,6 +38,9 @@
 .bg-white {
   background-color: var(--color-white, white);
 }
+.bg-white-10 {
+  background-color: var(--color-white-10);
+}
 
 .bg-grey-50 {
   background-color: var(--color-grey-50);

src/components/project/client-brief/PdfViewer.vue

@@ -89,7 +89,18 @@
             </footer>
           </article>
         </div>
+        <!-- Ajouter un commentaire -->
         <button id="add-comment" class="btn btn--white-20 | w-full">Ajouter un commentaire</button>
+        <!--
+        <form action="" method="post" class="flow">
+          <label class="sr-only" for="comment">Votre commentaire</label>
+          <textarea name="comment" id="comment" placeholder="Ajouter un commentaire" rows="3" class="text-sm | rounded-lg bg-black p-12"></textarea>
+          <footer class="flex">
+            <button class="btn btn--white-20">Annuler</button>
+            <input type="submit" class="btn btn--tranparent">
+          </footer>
+        </form>
+        -->
       </aside>
     </div>
   </Dialog>
@@ -262,6 +273,31 @@ const onPdfLoaded = () => {
 .comment[data-status="unread"] header time {
   color: var(--color-primary);
 }
+#comments-container form {
+  --flow-space: .5rem;
+  flex-direction: column;
+  position: -webkit-sticky;
+  position: sticky;
+  bottom: 4.5rem;
+  background: black;
+  padding: var(--space-24) 0;
+}
+#comments-container textarea {
+  position: sticky;
+  bottom: 0;
+  margin: 0;
+  resize: none;
+  color: var(--color-white);
+}
+::placeholder {
+  color: var(--color-white-50);
+}
+#comments-container form footer {
+  gap: var(--space-12);
+}
+#comments-container form footer > * {
+  flex-grow: 1;
+}
 </style>
 
 <style scoped>