arcaneMapCss top-level constant

String const arcaneMapCss

CSS styles for ArcaneMap components.

Include this in your stylesheet's baseCss for proper map styling. Provides ShadCN base styles and Codex overrides.

Implementation

const String arcaneMapCss = '''
/* ============================================
   ARCANE MAP - Base Styles (ShadCN)
   ============================================ */

/* Map container */
.arcane-world-map,
.arcane-usa-map {
  position: relative;
  width: 100%;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

/* Region paths */
.arcane-world-map path[data-region],
.arcane-usa-map path[data-region] {
  transition: fill 150ms ease, opacity 150ms ease;
}

.arcane-world-map path[data-region]:hover,
.arcane-usa-map path[data-region]:hover {
  fill: var(--accent) !important;
  opacity: 0.9;
}

/* Location pins */
.arcane-world-map circle[data-location],
.arcane-usa-map circle[data-location] {
  transition: fill 150ms ease, r 150ms ease;
}

.arcane-world-map circle[data-location]:hover,
.arcane-usa-map circle[data-location]:hover {
  fill: var(--primary) !important;
}

/* Debug tooltip */
.arcane-map-debug-tooltip {
  position: absolute;
  z-index: 9999;
  pointer-events: none;
}

.arcane-map-debug-tooltip > div {
  background: var(--popover);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 10px 14px;
}

.arcane-map-debug-tooltip .debug-lat,
.arcane-map-debug-tooltip .debug-lng {
  font-size: 13px;
  font-family: var(--font-mono, ui-monospace, monospace);
  color: var(--popover-foreground);
  white-space: nowrap;
  font-weight: 500;
}

.arcane-map-debug-tooltip .debug-svg {
  font-size: 11px;
  font-family: var(--font-mono, ui-monospace, monospace);
  color: var(--muted-foreground);
  white-space: nowrap;
  margin-top: 6px;
}

.arcane-map-debug-tooltip .debug-hint {
  font-size: 11px;
  color: var(--primary);
  margin-top: 6px;
  font-weight: 500;
}

/* ============================================
   ARCANE MAP - Codex Style
   ============================================ */

[class*="codex-"] .arcane-world-map,
[class*="codex-"] .arcane-usa-map,
.codex .arcane-world-map,
.codex .arcane-usa-map {
  background: color-mix(in srgb, var(--card) 92%, transparent);
  border-color: var(--codex-accent-border, var(--border));
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.34);
}

[class*="codex-"] .arcane-world-map path[data-region]:hover,
[class*="codex-"] .arcane-usa-map path[data-region]:hover,
.codex .arcane-world-map path[data-region]:hover,
.codex .arcane-usa-map path[data-region]:hover {
  fill: var(--primary) !important;
  opacity: 0.72;
}

[class*="codex-"] .arcane-world-map path[data-region][data-active="true"],
[class*="codex-"] .arcane-usa-map path[data-region][data-active="true"],
.codex .arcane-world-map path[data-region][data-active="true"],
.codex .arcane-usa-map path[data-region][data-active="true"] {
  fill: var(--primary) !important;
  opacity: 0.9;
}

[class*="codex-"] .arcane-world-map circle[data-location],
[class*="codex-"] .arcane-usa-map circle[data-location],
.codex .arcane-world-map circle[data-location],
.codex .arcane-usa-map circle[data-location] {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}

[class*="codex-"] .arcane-world-map circle[data-location]:hover,
[class*="codex-"] .arcane-usa-map circle[data-location]:hover,
.codex .arcane-world-map circle[data-location]:hover,
.codex .arcane-usa-map circle[data-location]:hover {
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
}

[class*="codex-"] .arcane-map-debug-tooltip > div,
.codex .arcane-map-debug-tooltip > div {
  background: color-mix(in srgb, var(--card) 96%, transparent);
  border-color: var(--codex-accent-border, var(--border));
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.42);
}

[class*="codex-"] .arcane-map-debug-tooltip .debug-lat,
[class*="codex-"] .arcane-map-debug-tooltip .debug-lng,
.codex .arcane-map-debug-tooltip .debug-lat,
.codex .arcane-map-debug-tooltip .debug-lng {
  color: var(--primary);
}

[class*="codex-"] .arcane-map-debug-tooltip .debug-hint,
.codex .arcane-map-debug-tooltip .debug-hint {
  color: var(--primary);
}
''';