Add additional styles for embedded notes

- Use CSS classes instead of applying the styles to the elements.
-- Allows a user to override any of the default styles being applied.
- Remove the borders and handles when not hovering over the box.
- Increase the opacity for embedded notes to full to avoid conflicts with
  the text underneath.
- Decrease the opacity a little when editing embedded notes.
-- Allows for better seeing of the text underneath while still being able
   to see the translation text above.
-- Compensated for by showing full opacity when hovering over the note box.

app/javascript/src/javascripts/notes.js

@@ -9,17 +9,6 @@ let Note = {
       var $inner_border = $('<div/>');
       $inner_border.addClass("note-box-inner-border");
 
-      var opacity = 0;
-      if (Note.embed) {
-        opacity = 0.95
-      } else {
-        opacity = 0.5
-      }
-
-      $inner_border.css({
-        opacity: opacity,
-      });
-
       var $note_box = $('<div/>');
       $note_box.addClass("note-box");
 
@@ -125,12 +114,14 @@ let Note = {
               $this.resizable("enable");
               $this.draggable("enable");
             }
+            $note_box.addClass("hovering");
           } else if (e.type === "mouseout") {
             Note.Body.hide($note_box_inner.data("id"));
             if (Note.editing) {
               $this.resizable("disable");
               $this.draggable("disable");
             }
+            $note_box.removeClass("hovering");
           }
 
           e.stopPropagation();
@@ -378,10 +369,7 @@ let Note = {
 
       $(".note-box").resizable("disable");
       $(".note-box").draggable("disable");
-
+      $(".note-box").addClass("editing");
-      if (Note.embed) {
-        $(".note-box").css("opacity", "0.5");
-      }
 
       let $textarea = $('<textarea></textarea>');
       $textarea.css({
@@ -426,10 +414,7 @@ let Note = {
         Note.editing = false;
         $(".note-box").resizable("enable");
         $(".note-box").draggable("enable");
-
+        $(".note-box").removeClass("editing");
-        if (Note.embed) {
-          $(".note-box").css("opacity", "0.95");
-        }
       });
 
       $textarea.selectEnd();

app/javascript/src/styles/specific/notes.scss

@@ -80,6 +80,7 @@ div#note-container {
     cursor: move;
     background: var(--note-box-background);
     line-height: 1.25;
+    opacity: 0.5;
 
     div.note-box-inner-border {
       border: var(--note-box-inner-border);
@@ -92,6 +93,28 @@ div#note-container {
 
     &.embedded {
       color: var(--note-body-text-color);
+      border: 1px solid transparent;
+      opacity: 1;
+
+      &.hovering {
+        border: var(--note-box-border);
+
+        &.editing {
+          opacity: 1;
+        }
+
+        div.ui-resizable-handle {
+          display: block;
+        }
+
+        div.note-box-inner-border {
+          border: var(--note-box-inner-border);
+        }
+      }
+
+      &.editing {
+        opacity: 0.4;
+      }
 
       div.bg {
         height: 100%;
@@ -100,10 +123,15 @@ div#note-container {
         vertical-align: middle;
       }
 
+      div.ui-resizable-handle {
+        display: none;
+      }
+
       div.note-box-inner-border {
         text-align: center;
         display: table-cell;
         vertical-align: middle;
+        border: 1px solid transparent;
       }
     }