style: move styles to elements, remove usage of ngdeep (DEV-4378) (#1907

)
dasch-swiss · Nov 26, 2024 · 6150bbd · 6150bbd
1 parent 6533df3
commit 6150bbd
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 51 deletions.
diff --git a/apps/dsp-app/src/styles/_elements.scss b/apps/dsp-app/src/styles/_elements.scss
@@ -749,12 +749,50 @@ nav.mat-mdc-tab-nav-bar,
 }
 
 .annotation-tooltip {
+  display: none;
+  position: fixed;
+  background-color: $black-60-opacity;
+  color: $bright;
+  padding: 8px;
+  border-radius: $border-radius;
+  min-height: 24px;
+  max-height: 258px;
+  max-width: 256px;
+  box-sizing: border-box;
+  transition: 0.1s;
+  transform: translate(16px, 16px);
+  font-size: small;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  z-index: 1000;
+
   p {
     white-space: normal;
     text-overflow: ellipsis;
   }
 }
 
+.region {
+  filter: alpha(opacity=40);
+  opacity: 0.4;
+  fill: transparent;
+  stroke: #00695c;
+  stroke-width: 2px;
+}
+
+.region:hover,
+.region:focus {
+  filter: alpha(opacity=100);
+  opacity: 1;
+  cursor: pointer;
+}
+
+.region.active {
+  filter: alpha(opacity=100);
+  opacity: 1;
+}
+
 // --------------------------------------
 
 //

diff --git a/libs/vre/resource-editor/representations/src/lib/still-image/still-image.component.scss b/libs/vre/resource-editor/representations/src/lib/still-image/still-image.component.scss
@@ -65,57 +65,6 @@
 }
 
 
-/*
- Openseadragon styling
- */
-.annotation-tooltip {
-  display: none;
-  position: fixed;
-  background-color: $black-60-opacity;
-  color: $bright;
-  padding: 8px;
-  border-radius: $border-radius;
-  min-height: 24px;
-  max-height: 258px;
-  max-width: 256px;
-  box-sizing: border-box;
-  transition: 0.1s;
-  transform: translate(16px, 16px);
-  font-size: small;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  z-index: 1000;
-}
-
-::ng-deep .openseadragon-container {
-  border-radius: 8px 8px 0 0;
-}
-
-/*
- Overlay styling
- */
-
-::ng-deep .region {
-  filter: alpha(opacity=40);
-  opacity: 0.4;
-  fill: transparent;
-  stroke: #00695c;
-  stroke-width: 2px;
-}
-
-::ng-deep .region:hover,
-.region:focus {
-  filter: alpha(opacity=100);
-  opacity: 1;
-  cursor: pointer;
-}
-
-::ng-deep .region.active {
-  filter: alpha(opacity=100);
-  opacity: 1;
-}
-
 .arrow {
   position: absolute;
   z-index: 1;