deck.gl 9.2.0-beta.2 → 9.2.0-beta.4

package/dist/stylesheet.css

@@ -93,6 +93,15 @@
   background-color: var(--button-icon-hover, rgb(24, 24, 26));
 }
 
+/* Icon menu styles */
+.deck-widget .deck-widget-icon-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  margin-top: var(--menu-gap, 4px);
+  z-index: 100;
+}
+
 /* Fullscreen styles */
 .deck-widget.deck-widget-fullscreen button.deck-widget-fullscreen-enter .deck-widget-icon {
   mask-image: var(
@@ -116,16 +125,6 @@
   );
 }
 
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-.deck-widget.deck-widget-loading button.deck-widget-spinner-icon .deck-widget-icon {
-  animation: spin 1s linear infinite;
-}
-
 .deck-pseudo-fullscreen {
   height: 100% !important;
   left: 0 !important;
@@ -215,21 +214,39 @@
   cursor: pointer;
 }
 
-.deck-widget.deck-widget-timeline button.timeline-play-pause {
-  background: var(--button-background, #fff);
-  border: var(--button-inner-stroke, unset);
-  border-radius: var(--button-corner-radius, 4px);
-  width: var(--button-size, 28px);
-  height: var(--button-size, 28px);
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-  pointer-events: 'auto';
+.deck-widget.deck-widget-timeline .text {
+  color: var(--button-icon-idle, rgb(97, 97, 102));
+}
+
+.deck-widget.deck-widget-timeline .text:hover {
+  color: var(--button-icon-hover, rgb(24, 24, 26));
 }
 
-.deck-widget-spinner-icon {
+/* FPS widget styles */
+
+.deck-widget.deck-widget-fps button {
+  pointer-events: none;
+}
+
+.deck-widget.deck-widget-fps .text {
+  color: var(--button-text, rgb(24, 24, 26));
+  font-family: monospace;
+  font-size: 8px;
+  font-weight: 700;
+}
+
+/* Loading styles */
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.deck-widget.deck-widget-loading button.deck-widget-spinner .deck-widget-icon {
+  animation: spin 1s linear infinite;
+}
+
+.deck-widget.deck-widget-loading button.deck-widget-spinner .deck-widget-icon {
   mask-image: var(
     --loading-icon, 
     url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" ><path d="M21 12a9 9 0 1 1-6.219-8.56" /></svg>')
@@ -240,21 +257,28 @@
   );
 }
 
+/* Scale styles */
 .deck-widget .deck-widget-scale {
   background-color: var(--button-icon-idle, #616166);
   background-position: 50%;
   display: block;
 }
 
-.deck-widget .deck-widget-geolocate {
+/* Geocoder styles */
+.deck-widget .deck-widget-geocoder {
   pointer-events: auto;
   cursor: pointer;
 }
 
-/**
- * Reusable styles for widgets
- */
-.deck-widget-common {
+/* Stats styles */
+.deck-widget-stats-container {
+  border-radius: var(--button-corner-radius, 4px);
+  display: inline-flex;
+  flex-direction: column;
+  padding: 4px;
+  font-size: 0.7rem;
+  /* Approximately 14px */
+  line-height: 1.6;
   font-family:
     'SF Mono',
     /* macOS */
@@ -268,11 +292,5 @@
     /* Linux */
     monospace;
   background-color: var(--button-background, #fff);
-  color: #333;
-}
-
-.deck-widget-stats-container {
-  font-size: 0.7rem;
-  /* Approximately 14px */
-  line-height: 1.6;
+  color: var(--button-text, rgb(24, 24, 26));
 }