1 files changed, 66 insertions, 29 deletions

diff --git a/src/client/util/TooltipTextMenu.scss b/src/client/util/TooltipTextMenu.scss
index 40ac3abb9..ebf833dbe 100644
--- a/src/client/util/TooltipTextMenu.scss
+++ b/src/client/util/TooltipTextMenu.scss
@@ -18,7 +18,8 @@
   .ProseMirror-menuitem {
     margin-right: 3px;
     display: inline-block;
-    z-index: 100000;
+    z-index: 50000;
+    position: relative;
   }
   
   .ProseMirror-menuseparator {
@@ -67,7 +68,7 @@
   }
   
   .ProseMirror-menu-dropdown-menu {
-    z-index: 100000;
+    z-index: 50000;
     min-width: 6em;
     background: white;
     position: absolute;
@@ -235,8 +236,8 @@
   }
 
 .tooltipMenu {
-    position: relative;
-    z-index: 2000;
+    position: absolute;
+    z-index: 20000;
     background: #121721;
     border: 1px solid silver;
     border-radius: 15px;
@@ -247,7 +248,7 @@
     //transform: translateX(-50%);
     transform: translateY(-85px);
     pointer-events: all;
-    height: 30px;
+    height: fit-content;
     width:550px;
     .ProseMirror-example-setup-style hr {
       padding: 2px 10px;
@@ -264,28 +265,40 @@
     }
 }
 
-// .tooltipMenu:before {
-//     content: "";
-//     height: 0; width: 0;
-//     position: absolute;
-//     left: 50%;
-//     margin-left: -5px;
-//     bottom: -6px;
-//     border: 5px solid transparent;
-//     border-bottom-width: 0;
-//     border-top-color: silver;
-//   }
-//   .tooltipMenu:after {
-//     content: "";
-//     height: 0; width: 0;
-//     position: absolute;
-//     left: 50%;
-//     margin-left: -5px;
-//     bottom: -4.5px;
-//     border: 5px solid transparent;
-//     border-bottom-width: 0;
-//     border-top-color: $dark-color;
-//   }
+.tooltipExtras {
+    position: absolute;
+    z-index: 20000;
+    background: #121721;
+    border: 1px solid silver;
+    border-radius: 15px;
+    //height: 60px;
+    //padding: 2px 10px;
+    //margin-top: 100px;
+    //-webkit-transform: translateX(-50%);
+    //transform: translateX(-50%);
+    transform: translateY(-115px);
+    pointer-events: all;
+    height: 25px;
+    width:fit-content;
+    .ProseMirror-example-setup-style hr {
+      padding: 2px 10px;
+      border: none;
+      margin: 1em 0;
+    }
+    
+    .ProseMirror-example-setup-style hr:after {
+      content: "";
+      display: block;
+      height: 1px;
+      background-color: silver;
+      line-height: 2px;
+    }
+}
+
+.wrapper {
+    position: absolute;
+    pointer-events: all;
+}
 
   .menuicon {
     display: inline-block;
@@ -298,6 +311,7 @@
     cursor: pointer;
     text-align: center;
     min-width: 10px;
+    
   }
   .strong, .heading { font-weight: bold; }
   .em { font-style: italic; }
@@ -310,9 +324,32 @@
       padding-right: 0px;
   }
   .summarize{
-      //margin-left: 15px;
       color: white;
       height: 20px;
-    //   background-color: white;
       text-align: center;
+  }
+
+  .brush{
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+    stroke-width: 0;
+    stroke: currentColor;
+    fill: currentColor;
+    margin-right: 15px;
+  }
+
+  .brush-active{
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+    stroke-width: 3;
+    stroke: greenyellow;
+    fill: greenyellow;
+    margin-right: 15px;
+  }
+
+  .dragger{
+      color: #eee;
+      margin-left: 5px;
   }
\ No newline at end of file