Comments: Styled content comments & improved interaction

[bookstack] / resources / sass / _pages.scss

diff --git a/resources/sass/_pages.scss b/resources/sass/_pages.scss
index ac2d195b4e8b2953a3d6d5d9cbe4ec671e67e17d..be5a0f7c36073760ac103b575881e6cb35ec1745 100755 (executable)
--- a/resources/sass/_pages.scss
+++ b/resources/sass/_pages.scss
@@ -242,12 +242,13 @@ body.tox-fullscreen, body.markdown-fullscreen {
 .content-comment-window {
   font-size: vars.$fs-m;
   line-height: 1.4;
-  position: relative;
-  z-index: 90;
+  position: absolute;
+  top: calc(100% + 3px);
+  left: 0;
+  z-index: 92;
   pointer-events: all;
   min-width: min(340px, 80vw);
   background-color: #FFF;
-  //border: 1px solid var(--color-primary);
   box-shadow: vars.$bs-hover;
   border-radius: 4px;
   overflow: hidden;
@@ -258,9 +259,24 @@ body.tox-fullscreen, body.markdown-fullscreen {
   display: flex;
   align-items: center;
   justify-content: end;
+  gap: vars.$xs;
+  button {
+    color: #FFF;
+    font-size: 12px;
+    padding: vars.$xs;
+    line-height: 1;
+    cursor: pointer;
+  }
+  button[data-action="jump"] {
+    text-decoration: underline;
+  }
+  svg {
+    fill: currentColor;
+    width: 12px;
+  }
 }
 .content-comment-window-content {
-  padding: vars.$xs;
+  padding: vars.$xs vars.$s vars.$xs vars.$xs;
   max-height: 200px;
   overflow-y: scroll;
 }
@@ -280,11 +296,16 @@ body.tox-fullscreen, body.markdown-fullscreen {
   color: #FFF;
   cursor: pointer;
   z-index: 90;
+  transform: scale(1);
+  transition: transform ease-in-out 120ms;
   svg {
     fill: #FFF;
     width: 80%;
   }
 }
+.page-content [id^="bkmrk-"]:hover .content-comment-marker {
+  transform: scale(1.15);
+}
 
 // Page editor sidebar toolbox
 .floating-toolbox {