Merge pull request mozilla#17196 from Snuffleupagus/annotationLayer-c…

…ss-nesting Use CSS nesting in the annotationLayer
timvandermeij · Oct 27, 2023 · 3f0b3b1 · 3f0b3b1
2 parents d30bf44 + 7d5b970
commit 3f0b3b1
Show file tree

Hide file tree

Showing 2 changed files with 323 additions and 339 deletions.
diff --git a/test/annotation_layer_builder_overrides.css b/test/annotation_layer_builder_overrides.css
@@ -17,59 +17,55 @@
 
 .annotationLayer {
   position: absolute;
-}
 
-.annotationLayer .wasCanvas {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-}
+  .wasCanvas {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+  }
 
-.annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input {
-  -webkit-appearance: none;
-}
+  .buttonWidgetAnnotation:is(.checkBox, .radioButton) input {
+    -webkit-appearance: none;
+  }
 
-.annotationLayer
-  :is(.linkAnnotation, .buttonWidgetAnnotation.pushButton):not(.hasBorder)
-  > a,
-.annotationLayer .popupTriggerArea::after,
-.annotationLayer
-  .fileAttachmentAnnotation:not(.hasFillAlpha)
-  .popupTriggerArea {
-  opacity: 0.2;
-  background: rgb(255 255 0);
-  box-shadow: 0 2px 10px rgb(255 255 0);
-}
-.annotationLayer .fileAttachmentAnnotation.hasFillAlpha {
-  outline: 2px solid yellow;
-}
+  :is(.linkAnnotation, .buttonWidgetAnnotation.pushButton):not(.hasBorder) > a,
+  .popupTriggerArea::after,
+  .fileAttachmentAnnotation:not(.hasFillAlpha) .popupTriggerArea {
+    opacity: 0.2;
+    background: rgb(255 255 0);
+    box-shadow: 0 2px 10px rgb(255 255 0);
+  }
+  .fileAttachmentAnnotation.hasFillAlpha {
+    outline: 2px solid yellow;
+  }
 
-.annotationLayer .hasClipPath::after {
-  box-shadow: none;
-}
+  .hasClipPath::after {
+    box-shadow: none;
+  }
 
-.annotationLayer .linkAnnotation.hasBorder {
-  background-color: rgb(255 255 0 / 0.2);
-}
+  .linkAnnotation.hasBorder {
+    background-color: rgb(255 255 0 / 0.2);
+  }
 
-.annotationLayer .popupTriggerArea::after {
-  display: block;
-  width: 100%;
-  height: 100%;
-  content: "";
-}
+  .popupTriggerArea::after {
+    display: block;
+    width: 100%;
+    height: 100%;
+    content: "";
+  }
 
-.annotationLayer .popup :is(h1, p) {
-  margin: 0;
-  padding: 0;
-}
+  .popup :is(h1, p) {
+    margin: 0;
+    padding: 0;
+  }
 
-.annotationLayer .annotationTextContent {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  opacity: 0.4;
-  background-color: transparent;
-  color: red;
-  font-size: 10px;
+  .annotationTextContent {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    opacity: 0.4;
+    background-color: transparent;
+    color: red;
+    font-size: 10px;
+  }
 }