@jjlmoya/utils-astronomy 1.12.0 → 1.14.0

package/src/tool/deepSpaceScope/component.astro

@@ -377,481 +377,3 @@ const { ui } = Astro.props;
   setTimeout(render, 50);
 </script>
 
-<style>
-  .scope-container {
-    --on-dark: #fff;
-    --planet-tint: #fef9c3;
-
-    position: relative;
-    width: 100%;
-    height: 600px;
-    background: var(--color-bg-deep, #000);
-    border-radius: 1.5rem;
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8);
-    overflow: hidden;
-    border: 1px solid rgba(100, 116, 139, 0.3);
-    cursor: grab;
-    touch-action: none;
-    user-select: none;
-  }
-
-  @media (min-width: 768px) {
-    .scope-container {
-      height: 800px;
-    }
-  }
-
-  .scope-container:active {
-    cursor: grabbing;
-  }
-
-  .world-layer {
-    position: absolute;
-    inset: 0;
-    width: 100%;
-    height: 100%;
-    will-change: transform;
-  }
-
-  .sky-canvas {
-    position: absolute;
-    inset: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 0;
-  }
-
-  .objects-layer {
-    position: absolute;
-    inset: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 10;
-    pointer-events: none;
-  }
-
-  .scope-vignette {
-    position: absolute;
-    inset: 0;
-    background: radial-gradient(
-      circle at center,
-      transparent 0%,
-      rgba(0, 0, 0, 0.5) 100%
-    );
-    pointer-events: none;
-    z-index: 20;
-  }
-
-  .scope-pollution-layer {
-    position: absolute;
-    inset: 0;
-    z-index: 10;
-    pointer-events: none;
-    mix-blend-mode: screen;
-    background: transparent;
-    transition: background-color 0.5s ease;
-  }
-
-  .scope-drag-hint {
-    position: absolute;
-    top: 1.5rem;
-    left: 50%;
-    transform: translateX(-50%);
-    z-index: 30;
-    opacity: 0.7;
-    pointer-events: none;
-    background: rgba(0, 0, 0, 0.5);
-    padding: 0.25rem 1rem;
-    border-radius: 9999px;
-    font-size: 0.625rem;
-    color: var(--on-dark);
-    text-transform: uppercase;
-    letter-spacing: 0.1em;
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    backdrop-filter: blur(12px);
-    white-space: nowrap;
-  }
-
-  .hint-mobile {
-    display: inline;
-  }
-
-  .hint-desktop {
-    display: none;
-  }
-
-  @media (min-width: 768px) {
-    .hint-mobile {
-      display: none;
-    }
-    .hint-desktop {
-      display: inline;
-    }
-  }
-
-  :global(.scope-object) {
-    position: absolute;
-    transform: translate(-50%, -50%);
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    transition: opacity 0.3s ease;
-    will-change: transform;
-    pointer-events: auto;
-    cursor: pointer;
-  }
-
-  :global(.scope-object:hover) :global(.scope-obj-icon) {
-    transform: scale(1.25);
-  }
-
-  :global(.scope-obj-icon) {
-    font-size: 2rem;
-    transition: transform 0.3s ease;
-    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.4));
-  }
-
-  @media (min-width: 768px) {
-    :global(.scope-obj-icon) {
-      font-size: 3rem;
-    }
-  }
-
-  :global(.scope-obj-label) {
-    margin-top: 0.5rem;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    opacity: 0;
-    transition: opacity 0.3s ease;
-  }
-
-  :global(.scope-obj-name) {
-    font-size: 0.625rem;
-    font-weight: 700;
-    color: var(--on-dark);
-    background: rgba(0, 0, 0, 0.6);
-    padding: 0.125rem 0.5rem;
-    border-radius: 0.25rem;
-    backdrop-filter: blur(8px);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    white-space: nowrap;
-  }
-
-  :global(.scope-obj-mag) {
-    font-size: 0.5rem;
-    color: rgba(148, 163, 184, 0.8);
-    background: rgba(0, 0, 0, 0.8);
-    padding: 0 0.25rem;
-    border-radius: 0.2rem;
-    margin-top: 0.125rem;
-  }
-
-  .scope-modal {
-    position: absolute;
-    inset: 0;
-    z-index: 50;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: rgba(0, 0, 0, 0.6);
-    backdrop-filter: blur(4px);
-    transition: opacity 0.3s ease;
-  }
-
-  .scope-modal.modal-hidden {
-    opacity: 0;
-    pointer-events: none;
-  }
-
-  .scope-modal-content {
-    background: #0f172a;
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    padding: 1.5rem;
-    border-radius: 1rem;
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8);
-    max-width: 22rem;
-    width: calc(100% - 3rem);
-    transition: transform 0.3s ease;
-  }
-
-  .modal-scale-in {
-    transform: scale(1);
-  }
-  .modal-scale-out {
-    transform: scale(0.95);
-  }
-
-  .modal-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-    margin-bottom: 1rem;
-  }
-
-  .modal-header-info {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-  }
-
-  .modal-icon {
-    font-size: 2.5rem;
-  }
-
-  .modal-title {
-    font-size: 1.25rem;
-    font-weight: 700;
-    color: var(--on-dark);
-    margin: 0;
-    line-height: 1;
-  }
-
-  .modal-type {
-    font-size: 0.625rem;
-    color: var(--text-muted, #94a3b8);
-    text-transform: uppercase;
-    letter-spacing: 0.1em;
-    margin: 0.25rem 0 0;
-  }
-
-  .modal-close {
-    background: none;
-    border: none;
-    color: var(--text-muted, #94a3b8);
-    cursor: pointer;
-    font-size: 1.5rem;
-    padding: 0;
-    transition: color 0.2s ease;
-  }
-
-  .modal-close:hover {
-    color: var(--on-dark);
-  }
-
-  .modal-body {
-    display: flex;
-    flex-direction: column;
-    gap: 0.75rem;
-  }
-
-  .modal-stat {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    background: rgba(255, 255, 255, 0.05);
-    padding: 0.75rem;
-    border-radius: 0.5rem;
-  }
-
-  .modal-stat-label {
-    font-size: 0.75rem;
-    color: var(--text-muted, #94a3b8);
-    text-transform: uppercase;
-  }
-
-  .modal-stat-value {
-    color: var(--on-dark);
-    font-weight: 700;
-  }
-
-  .modal-coords {
-    text-align: right;
-  }
-
-  .modal-coord {
-    font-size: 0.75rem;
-    color: var(--on-dark);
-  }
-
-  .modal-coord-secondary {
-    color: var(--text-muted, #94a3b8);
-  }
-
-  .modal-desc {
-    font-size: 0.875rem;
-    color: var(--text-muted, #94a3b8);
-    line-height: 1.6;
-    margin: 0;
-  }
-
-  .scope-controls-wrapper {
-    position: absolute;
-    bottom: 1.5rem;
-    left: 1.5rem;
-    right: 1.5rem;
-    z-index: 40;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 1rem;
-    pointer-events: auto;
-  }
-
-  .scope-controls {
-    width: 100%;
-    max-width: 56rem;
-    background: rgba(15, 23, 42, 0.9);
-    backdrop-filter: blur(20px);
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    border-radius: 1rem;
-    padding: 1rem;
-    box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
-  }
-
-  @media (min-width: 768px) {
-    .scope-controls {
-      padding: 1.5rem;
-    }
-  }
-
-  .scope-control-grid {
-    display: grid;
-    grid-template-columns: 1fr;
-    gap: 1.5rem;
-    align-items: center;
-  }
-
-  @media (min-width: 768px) {
-    .scope-control-grid {
-      grid-template-columns: 1fr auto 1fr;
-      gap: 2rem;
-    }
-  }
-
-  .scope-control-group {
-    display: flex;
-    flex-direction: column;
-    gap: 0.75rem;
-  }
-
-  .scope-control-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-
-  .scope-control-label {
-    font-size: 0.75rem;
-    font-weight: 700;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-  }
-
-  .scope-label-cyan {
-    color: var(--color-cyan, #06b6d4);
-  }
-  .scope-label-amber {
-    color: var(--color-amber, #f59e0b);
-  }
-
-  .scope-control-value {
-    color: var(--on-dark);
-    font-size: 0.875rem;
-    background: rgba(255, 255, 255, 0.1);
-    padding: 0.125rem 0.5rem;
-    border-radius: 0.25rem;
-  }
-
-  .scope-range {
-    width: 100%;
-    height: 0.375rem;
-    background: rgba(100, 116, 139, 0.4);
-    border-radius: 9999px;
-    appearance: none;
-    cursor: pointer;
-    outline: none;
-  }
-
-  .scope-range-cyan {
-    accent-color: var(--color-cyan, #06b6d4);
-  }
-  .scope-range-amber {
-    accent-color: var(--color-amber, #f59e0b);
-  }
-
-  .scope-limit-display {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    border-top: 1px solid rgba(255, 255, 255, 0.1);
-    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-    padding: 0.5rem 1rem;
-  }
-
-  @media (min-width: 768px) {
-    .scope-limit-display {
-      border-top: none;
-      border-bottom: none;
-      border-left: 1px solid rgba(255, 255, 255, 0.1);
-      border-right: 1px solid rgba(255, 255, 255, 0.1);
-      padding: 0 2rem;
-    }
-  }
-
-  .scope-limit-label {
-    font-size: 0.625rem;
-    color: var(--text-muted, #94a3b8);
-    text-transform: uppercase;
-    letter-spacing: 0.1em;
-    margin-bottom: 0.25rem;
-  }
-
-  .scope-limit-value {
-    font-size: 3rem;
-    font-weight: 900;
-    color: var(--on-dark);
-    line-height: 1;
-    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
-  }
-
-  .scope-azimuth {
-    font-size: 0.625rem;
-    color: var(--color-cyan, #06b6d4);
-    opacity: 0.5;
-    margin-top: 0.5rem;
-  }
-
-  .scope-legend {
-    display: flex;
-    gap: 1rem;
-    flex-wrap: wrap;
-    font-size: 0.625rem;
-    font-weight: 700;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    color: var(--text-muted, #64748b);
-    background: rgba(0, 0, 0, 0.8);
-    padding: 0.5rem 1.5rem;
-    border-radius: 9999px;
-    backdrop-filter: blur(4px);
-    border: 1px solid rgba(255, 255, 255, 0.05);
-  }
-
-  @media (min-width: 768px) {
-    .scope-legend {
-      gap: 2rem;
-    }
-  }
-
-  .legend-item {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-  }
-
-  .legend-planet {
-    color: var(--planet-tint);
-  }
-  .legend-star {
-    color: var(--on-dark);
-  }
-  .legend-deep {
-    color: var(--color-indigo, #818cf8);
-  }
-</style>