gralobe 1.0.18 → 1.0.19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/gralobe.js CHANGED
@@ -4361,7 +4361,7 @@ function Ua() {
4361
4361
  transform: translateY(8px) scale(0.95);
4362
4362
  transition: opacity 0.3s ease, transform 0.3s ease;
4363
4363
  pointer-events: none;
4364
- z-index: 50;
4364
+ z-index: 10;
4365
4365
  transform-origin: bottom left;
4366
4366
  }
4367
4367
 
@@ -4414,19 +4414,44 @@ function Ua() {
4414
4414
  .gralobe-legend.size-sm .gralobe-legend-hint { display: none; }
4415
4415
 
4416
4416
  .gralobe-legend.size-xs {
4417
- padding: 4px 6px;
4418
- min-width: 70px;
4419
- max-width: 120px;
4417
+ padding: 3px 5px;
4418
+ min-width: 60px;
4419
+ max-width: 100px;
4420
4420
  border-radius: 3px;
4421
4421
  bottom: 4px;
4422
4422
  left: 4px;
4423
4423
  }
4424
- .gralobe-legend.size-xs .gralobe-legend-title { font-size: 8px; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
4425
- .gralobe-legend.size-xs .gralobe-legend-gradient { height: 4px; margin-bottom: 2px; border-radius: 1px; }
4426
- .gralobe-legend.size-xs .gralobe-legend-labels { font-size: 7px; margin-bottom: 0; }
4424
+ .gralobe-legend.size-xs .gralobe-legend-title { font-size: 7px; margin-bottom: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
4425
+ .gralobe-legend.size-xs .gralobe-legend-gradient { height: 3px; margin-bottom: 1px; border-radius: 1px; }
4426
+ .gralobe-legend.size-xs .gralobe-legend-labels { font-size: 6px; margin-bottom: 0; }
4427
4427
  .gralobe-legend.size-xs .gralobe-legend-description { display: none; }
4428
4428
  .gralobe-legend.size-xs .gralobe-legend-hint { display: none; }
4429
4429
 
4430
+ /* Mobile-specific: even smaller for very small screens */
4431
+ @media (max-width: 480px) {
4432
+ .gralobe-legend.size-sm {
4433
+ padding: 4px 6px;
4434
+ min-width: 80px;
4435
+ max-width: 130px;
4436
+ }
4437
+ .gralobe-legend.size-sm .gralobe-legend-title { font-size: 8px; }
4438
+ .gralobe-legend.size-sm .gralobe-legend-gradient { height: 5px; }
4439
+ .gralobe-legend.size-sm .gralobe-legend-labels { font-size: 7px; }
4440
+ .gralobe-legend.size-sm .gralobe-legend-description { display: none; }
4441
+ .gralobe-legend.size-sm .gralobe-legend-hint { display: none; }
4442
+
4443
+ .gralobe-legend.size-md {
4444
+ padding: 5px 8px;
4445
+ min-width: 100px;
4446
+ max-width: 160px;
4447
+ }
4448
+ .gralobe-legend.size-md .gralobe-legend-title { font-size: 9px; }
4449
+ .gralobe-legend.size-md .gralobe-legend-gradient { height: 6px; }
4450
+ .gralobe-legend.size-md .gralobe-legend-labels { font-size: 8px; }
4451
+ .gralobe-legend.size-md .gralobe-legend-description { display: none; }
4452
+ .gralobe-legend.size-md .gralobe-legend-hint { display: none; }
4453
+ }
4454
+
4430
4455
  .gralobe-legend-title {
4431
4456
  font-weight: 600;
4432
4457
  color: #4af;
@@ -4830,7 +4855,7 @@ class eo {
4830
4855
  drawLegendOnCanvas(e, t, i) {
4831
4856
  try {
4832
4857
  if (!this.legendElement || !this.legendElement.classList.contains("visible")) return;
4833
- const n = this.legendElement, r = n.querySelector(".legend-title"), s = n.querySelector(".legend-gradient"), o = n.querySelector(".legend-min"), l = n.querySelector(".legend-max"), c = n.querySelector(".legend-description");
4858
+ const n = this.legendElement, r = n.querySelector(".gralobe-legend-title") || n.querySelector(".legend-title"), s = n.querySelector(".gralobe-legend-gradient") || n.querySelector(".legend-gradient"), o = n.querySelector(".gralobe-legend-min") || n.querySelector(".legend-min"), l = n.querySelector(".gralobe-legend-max") || n.querySelector(".legend-max"), c = n.querySelector(".gralobe-legend-description") || n.querySelector(".legend-description");
4834
4859
  if (!r || !s) return;
4835
4860
  const h = 280, u = 100, p = 20, m = t - h - p, f = i - u - p, d = 12;
4836
4861
  e.fillStyle = "rgba(0, 10, 20, 0.9)", e.strokeStyle = "rgba(100, 170, 255, 0.5)", e.lineWidth = 2, e.beginPath(), e.roundRect ? e.roundRect(m, f, h, u, d) : e.rect(m, f, h, u), e.fill(), e.stroke(), e.fillStyle = "#44aaff", e.font = "bold 18px Arial, sans-serif", e.fillText(r.textContent || "", m + 16, f + 28);
@@ -5313,7 +5338,7 @@ class ho {
5313
5338
  constructor(e, t) {
5314
5339
  this.sphereRadius = t, this.labelRenderer = new io();
5315
5340
  const i = e.clientWidth || 800, n = e.clientHeight || 600;
5316
- this.labelRenderer.setSize(i, n), this.labelRenderer.domElement.style.position = "absolute", this.labelRenderer.domElement.style.top = "0", this.labelRenderer.domElement.style.left = "0", this.labelRenderer.domElement.style.pointerEvents = "none", e.appendChild(this.labelRenderer.domElement), this.labelGroup = new S.Group(), this.injectStyles(), this.createLabels();
5341
+ this.labelRenderer.setSize(i, n), this.labelRenderer.domElement.style.position = "absolute", this.labelRenderer.domElement.style.top = "0", this.labelRenderer.domElement.style.left = "0", this.labelRenderer.domElement.style.pointerEvents = "none", this.labelRenderer.domElement.style.zIndex = "5", e.appendChild(this.labelRenderer.domElement), this.labelGroup = new S.Group(), this.injectStyles(), this.createLabels();
5317
5342
  }
5318
5343
  injectStyles() {
5319
5344
  const e = document.createElement("style");