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");
-
-      if (Note.embed) {
-        $(".note-box").css("opacity", "0.5");
-      }
+      $(".note-box").addClass("editing");
 
       let $textarea = $('<textarea></textarea>');
       $textarea.css({
@@ -426,10 +414,7 @@ let Note = {
         Note.editing = false;
         $(".note-box").resizable("enable");
         $(".note-box").draggable("enable");
-
-        if (Note.embed) {
-          $(".note-box").css("opacity", "0.95");
-        }
+        $(".note-box").removeClass("editing");
       });
 
       $textarea.selectEnd();