[Editor] Change the style of the bounding box and the resizers (bug 1…

…852897)
mozilla · Sep 13, 2023 · 91c79cd · 91c79cd
1 parent 953f271
commit 91c79cd
Showing 1 changed file with 30 additions and 21 deletions.
diff --git a/web/annotation_editor_layer_builder.css b/web/annotation_editor_layer_builder.css
@@ -15,17 +15,22 @@
 
 :root {
   --outline-width: 2px;
-  --outline-color: blue;
+  --outline-color: #0060df;
+  --outline-around-width: 1px;
+  --outline-around-color: #f0f0f4;
   --focus-outline: solid var(--outline-width) var(--outline-color);
+  --unfocus-outline: solid var(--outline-width) transparent;
+  --focus-outline-around: solid var(--outline-around-width)
+    var(--outline-around-color);
   --hover-outline: dashed var(--outline-width) var(--outline-color);
   --freetext-line-height: 1.35;
   --freetext-padding: 2px;
-  --resizer-size: 8px;
+  --resizer-size: 6px;
   --resizer-shift: calc(
-    0px - var(--outline-width) - var(--resizer-size) / 2 - var(--outline-width) /
-      2
+    0px - (var(--outline-width) + var(--resizer-size)) / 2 -
+      var(--outline-around-width)
   );
-  --resizer-color: white;
+  --resizer-color: var(--outline-color);
   --editorFreeText-editing-cursor: text;
   /*#if COMPONENTS*/
   --editorInk-editing-cursor: pointer;
@@ -45,10 +50,9 @@
 
 @media screen and (forced-colors: active) {
   :root {
-    --outline-width: 3px;
     --outline-color: ButtonText;
-    --resizer-size: 12px;
-    --resizer-color: ButtonFace;
+    --outline-around-color: ButtonFace;
+    --resizer-color: ButtonText;
   }
 }
 
@@ -89,15 +93,6 @@
   cursor: var(--editorInk-editing-cursor);
 }
 
-.annotationEditorLayer
-  :is(.freeTextEditor, .inkEditor, .stampEditor).draggable.selectedEditor {
-  cursor: move;
-}
-
-.annotationEditorLayer .selectedEditor {
-  outline: var(--focus-outline);
-}
-
 .annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor) {
   position: absolute;
   background: transparent;
@@ -107,6 +102,23 @@
   cursor: auto;
   max-width: 100%;
   max-height: 100%;
+  border: var(--unfocus-outline);
+
+  &.draggable.selectedEditor {
+    cursor: move;
+  }
+
+  &.selectedEditor {
+    border: var(--focus-outline);
+    outline: var(--focus-outline-around);
+
+    &::before {
+      content: "";
+      position: absolute;
+      inset: 0;
+      border: var(--focus-outline-around);
+    }
+  }
 }
 
 .annotationEditorLayer .freeTextEditor {
@@ -185,8 +197,6 @@
 .annotationEditorLayer {
   :is(.freeTextEditor, .inkEditor, .stampEditor) {
     & > .resizers {
-      width: 100%;
-      height: 100%;
       position: absolute;
       inset: 0;
 
@@ -197,9 +207,8 @@
       & > .resizer {
         width: var(--resizer-size);
         height: var(--resizer-size);
-        border-radius: 50%;
         background: var(--resizer-color);
-        border: var(--focus-outline);
+        border: var(--focus-outline-around);
         position: absolute;
 
         &.topLeft {