fix(cesium): Align style of cesium buttons

Prevent clash of basemapGallery and Cesium buttons

angular.json

@@ -637,7 +637,8 @@
             ],
             "styles": [
               "node_modules/cesium/Build/Cesium/Widgets/widgets.css",
-              "projects/hslayers/css/hslayers-bootstrap.scss"
+              "projects/hslayers/css/hslayers-bootstrap.scss",
+              "projects/hslayers-cesium/css/hslayers-cesium.scss"
             ],
             "scripts": [],
             "customWebpackConfig": {

projects/cesium-test-app/src/app/app.component.ts

@@ -150,6 +150,9 @@ export class AppComponent implements OnInit {
       opacity: 1,
     });
     this.hsConfig.update({
+      componentsEnabled: {
+        basemapGallery: true,
+      },
       datasources: [
         {
           title: 'Layman',

projects/hslayers-cesium/css/hslayers-cesium.scss

@@ -0,0 +1,27 @@
+$bs-btn-bg: white;
+$bs-btn-color: #6c757d;
+$bs-border-radius: 0.375rem;
+$bs-btn-border-color: transparent;
+
+.hs-cesium-container .cesium-viewer-toolbar {
+    position: absolute;
+    display: block;
+    top: 0.7em;
+    right: calc(15px + 1rem + 1rem + 2px);
+}
+
+.hs-cesium-container .cesium-button {
+    opacity: 0.9;
+    color: $bs-btn-color;
+    fill: $bs-btn-color;
+    background-color: $bs-btn-bg;
+    border-radius: $bs-border-radius;
+    border-color: $bs-btn-border-color;
+    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
+}
+
+.hs-cesium-container .cesium-button:hover {
+    background-color: $bs-btn-color;
+    color: $bs-btn-bg;
+    fill: $bs-btn-bg;
+}

projects/hslayers-cesium/src/hscesium.component.scss

@@ -0,0 +1,14 @@
+.hs-cesium-container {
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    margin-right: 0;
+}
+
+
+

projects/hslayers-cesium/src/hscesium.component.ts

@@ -15,19 +15,7 @@ import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 @Component({
   selector: 'hs-cesium',
   templateUrl: './hscesium.component.html',
-  styles: `
-    .hs-cesium-container {
-      height: 100%;
-      margin: 0;
-      padding: 0;
-      overflow: hidden;
-      position: absolute;
-      left: 0;
-      top: 0;
-      width: 100%;
-      margin-right: 0;
-    }
-  `,
+  styleUrl: './hscesium.component.scss',
 })
 export class HslayersCesiumComponent implements AfterViewInit {
   app = 'default';