From f72ef60cf098c9c9a2f8ed584467064aa8e033ac Mon Sep 17 00:00:00 2001
From: "Patrik J. Braun" <bra.patrik@gmail.com>
Date: Fri, 8 Sep 2023 00:34:08 +0200
Subject: [PATCH] improve map controls #587

---
 .../controls.lightbox.gallery.component.css      |  1 +
 .../lightbox/lightbox.map.gallery.component.css  | 16 ++++++++++------
 .../lightbox/lightbox.map.gallery.component.html |  6 +++---
 3 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/frontend/app/ui/gallery/lightbox/controls/controls.lightbox.gallery.component.css b/src/frontend/app/ui/gallery/lightbox/controls/controls.lightbox.gallery.component.css
index b3d849be..f01b431a 100644
--- a/src/frontend/app/ui/gallery/lightbox/controls/controls.lightbox.gallery.component.css
+++ b/src/frontend/app/ui/gallery/lightbox/controls/controls.lightbox.gallery.component.css
@@ -88,6 +88,7 @@
   position: absolute;
   z-index: 4;
   top: 0;
+  line-height: 0;
 }
 .controls-top ng-icon {
   vertical-align: middle;
diff --git a/src/frontend/app/ui/gallery/map/lightbox/lightbox.map.gallery.component.css b/src/frontend/app/ui/gallery/map/lightbox/lightbox.map.gallery.component.css
index fc2e7b54..7fa1c838 100644
--- a/src/frontend/app/ui/gallery/map/lightbox/lightbox.map.gallery.component.css
+++ b/src/frontend/app/ui/gallery/map/lightbox/lightbox.map.gallery.component.css
@@ -19,7 +19,7 @@
 
 .controls-background {
   display: inline-block;
-  background-color: rgba(0, 0, 0, 0.2);
+  background-color: rgba(var(--bs-body-bg-rgb),0.2);
 }
 
 .sebm-google-map-container {
@@ -55,15 +55,19 @@
   text-align: right;
   width: 100%;
   font-size: large;
+  line-height: 0;
 }
 
-#controls span {
-  margin-left: 6px;
-  margin-right: 6px;
-  color: black;
-  cursor: pointer;
+#controls ng-icon {
+  vertical-align: middle;
 }
 
+#controls ng-icon ::ng-deep svg {
+  vertical-align: top;
+}
+
+
+
 #controls .control-button {
   margin-left: 0.1em;
   margin-right: 0.1em;
diff --git a/src/frontend/app/ui/gallery/map/lightbox/lightbox.map.gallery.component.html b/src/frontend/app/ui/gallery/map/lightbox/lightbox.map.gallery.component.html
index 4c0c58be..d97ba9be 100644
--- a/src/frontend/app/ui/gallery/map/lightbox/lightbox.map.gallery.component.html
+++ b/src/frontend/app/ui/gallery/map/lightbox/lightbox.map.gallery.component.html
@@ -19,19 +19,19 @@
 
 
   <div id="controllers-container" *ngIf="controllersVisible">
-    <div id="controls">
+    <div id="controls" class="controls-top">
       <div class="controls-background rounded-start-bottom">
         <div class="highlight control-button"
              *ngIf="fullScreenService.isFullScreenEnabled()"
              (click)="fullScreenService.exitFullScreen()" title="toggle fullscreen, key: f" i18n-title>
-          <ng-icon style="margin-right: 0.2em; margin-top: -0.05em" class="align-top" size="0.9em"
+          <ng-icon  size="0.9em"
                    name="ionContractOutline"></ng-icon>
         </div>
 
         <div class="highlight control-button"
              *ngIf="!fullScreenService.isFullScreenEnabled()"
              (click)="fullScreenService.showFullScreen(root)" title="toggle fullscreen, key: f" i18n-title>
-          <ng-icon style="margin-right: 0.2em; margin-top: -0.05em" class="align-top" size="0.9em"
+          <ng-icon  size="0.9em"
                    name="ionExpandOutline"></ng-icon>
         </div>
         <div class="highlight control-button" (click)="hide()" title="close, key: Escape" i18n-title>