diff --git a/src/assets/css/src/0.2.variables.css b/src/assets/css/src/0.2.variables.css
index 4323229..e7f1cba 100755
--- a/src/assets/css/src/0.2.variables.css
+++ b/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 */
diff --git a/src/assets/css/src/2.blocks.button.css b/src/assets/css/src/2.blocks.button.css
index 3572a75..38a54c9 100644
--- a/src/assets/css/src/2.blocks.button.css
+++ b/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 {
diff --git a/src/assets/css/src/3.utilities.colors.css b/src/assets/css/src/3.utilities.colors.css
index 10739b1..bb2a371 100644
--- a/src/assets/css/src/3.utilities.colors.css
+++ b/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);
diff --git a/src/components/project/client-brief/PdfViewer.vue b/src/components/project/client-brief/PdfViewer.vue
index 7de8447..3c03b7c 100644
--- a/src/components/project/client-brief/PdfViewer.vue
+++ b/src/components/project/client-brief/PdfViewer.vue
@@ -89,7 +89,18 @@
+
+
@@ -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;
+}