X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/5bfba281fc0c57556d65092013b5663efd350b3e..refs/pull/5725/head:/resources/sass/_pages.scss

diff --git a/resources/sass/_pages.scss b/resources/sass/_pages.scss
index ac2d195b4..83aec46f0 100755
--- a/resources/sass/_pages.scss
+++ b/resources/sass/_pages.scss
@@ -158,11 +158,7 @@ body.tox-fullscreen, body.markdown-fullscreen {
   border-radius: 4px;
   box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.1);
   @include mixins.lightDark(background-color, #fff, #333);
-  width: 275px;
-
-  &.is-page-editable {
-    width: 328px;
-  }
+  width: 328px;
 
   &:before {
     position: absolute;
@@ -193,7 +189,8 @@ body.tox-fullscreen, body.markdown-fullscreen {
     border: 1px solid #DDD;
     @include mixins.lightDark(border-color, #ddd, #000);
     color: #666;
-    width: 180px;
+    width: auto;
+    flex: 1;
     z-index: 58;
     padding: 5px;
     border-radius: 0;
@@ -203,7 +200,8 @@ body.tox-fullscreen, body.markdown-fullscreen {
   }
   .input-group .button {
     line-height: 1;
-    margin: 0 0 0 -5px;
+    margin-inline-start: -1px;
+    margin-block: 0;
     box-shadow: none;
     border-radius: 0;
   }
@@ -242,12 +240,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);
+  @include mixins.lightDark(background-color, #FFF, #222);
   box-shadow: vars.$bs-hover;
   border-radius: 4px;
   overflow: hidden;
@@ -258,12 +257,30 @@ 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;
 }
+.content-comment-window-content .comment-reference-indicator-wrap {
+  display: none;
+}
 .content-comment-marker {
   position: absolute;
   right: -16px;
@@ -280,11 +297,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 {