CSS umgebaut
This commit is contained in:
Eskimue
@@ -5,6 +5,276 @@
|
||||
Astronomiemuseum der Sternwarte Sonneberg
|
||||
============================================================ */
|
||||
|
||||
/* --- Landing Page ------------------------------------------ */
|
||||
|
||||
body.landing-page {
|
||||
background: #03030d;
|
||||
color: #eef4ff;
|
||||
font-family: 'Space Mono', monospace;
|
||||
min-height: 100vh;
|
||||
overflow-x: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
body.landing-page #starCanvas {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
body.landing-page .nebula {
|
||||
position: fixed;
|
||||
border-radius: 50%;
|
||||
filter: blur(80px);
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
body.landing-page .nebula-1 {
|
||||
width: 600px;
|
||||
height: 400px;
|
||||
top: -100px;
|
||||
right: -150px;
|
||||
background: radial-gradient(ellipse, rgba(40, 60, 160, 0.18) 0%, transparent 70%);
|
||||
}
|
||||
|
||||
body.landing-page .nebula-2 {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
bottom: 10%;
|
||||
left: -150px;
|
||||
background: radial-gradient(ellipse, rgba(80, 20, 120, 0.14) 0%, transparent 70%);
|
||||
}
|
||||
|
||||
body.landing-page .nebula-3 {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
top: 40%;
|
||||
right: 5%;
|
||||
background: radial-gradient(ellipse, rgba(20, 80, 100, 0.12) 0%, transparent 70%);
|
||||
}
|
||||
|
||||
body.landing-page .page {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
max-width: 640px;
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
body.landing-page .hero {
|
||||
text-align: center;
|
||||
padding: 48px 20px;
|
||||
animation: landing-fade-up 0.9s ease both;
|
||||
}
|
||||
|
||||
body.landing-page .museum-pre {
|
||||
margin-bottom: 32px;
|
||||
color: rgba(200, 168, 75, 0.7);
|
||||
font-size: 9px;
|
||||
letter-spacing: 0.22em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
body.landing-page .ring-wrap {
|
||||
--ring-offset-x: 0px;
|
||||
--ring-offset-y: 0px;
|
||||
position: relative;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
margin: 0 auto 28px;
|
||||
transform: translate(var(--ring-offset-x), var(--ring-offset-y));
|
||||
transition: transform 0.1s ease-out;
|
||||
}
|
||||
|
||||
body.landing-page .crosshair {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background:
|
||||
linear-gradient(rgba(200, 168, 75, 0.15) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(200, 168, 75, 0.15) 1px, transparent 1px);
|
||||
background-size: 100% 50%, 50% 100%;
|
||||
}
|
||||
|
||||
body.landing-page .ring {
|
||||
position: absolute;
|
||||
border: 1px solid rgba(200, 168, 75, 0.3);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
body.landing-page .ring-outer {
|
||||
inset: 0;
|
||||
animation: landing-spin 60s linear infinite;
|
||||
}
|
||||
|
||||
body.landing-page .ring-inner {
|
||||
inset: 20px;
|
||||
border-color: rgba(180, 220, 255, 0.2);
|
||||
animation: landing-spin 38s linear infinite reverse;
|
||||
}
|
||||
|
||||
body.landing-page .ring-ticks {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: 50%;
|
||||
background: repeating-conic-gradient(rgba(200, 168, 75, 0.25) 0deg 0.5deg, transparent 0.5deg 30deg);
|
||||
}
|
||||
|
||||
body.landing-page .ring-core {
|
||||
position: absolute;
|
||||
inset: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(200, 168, 75, 0.25) 0%, transparent 70%);
|
||||
}
|
||||
|
||||
body.landing-page .ring-symbol {
|
||||
color: rgba(200, 168, 75, 0.9);
|
||||
font-size: 16px;
|
||||
animation: landing-pulse 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
body.landing-page .hero-title {
|
||||
margin-bottom: 10px;
|
||||
color: #f0f6ff;
|
||||
font-family: 'Orbitron', sans-serif;
|
||||
font-size: clamp(36px, 6vw, 72px);
|
||||
font-weight: 900;
|
||||
letter-spacing: 0.06em;
|
||||
line-height: 1;
|
||||
text-shadow: 0 0 40px rgba(200, 160, 80, 0.35), 0 0 80px rgba(100, 130, 255, 0.15);
|
||||
}
|
||||
|
||||
body.landing-page .hero-title em {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
body.landing-page .hero-divider {
|
||||
width: 80px;
|
||||
height: 1px;
|
||||
margin: 0 auto 20px;
|
||||
background: linear-gradient(90deg, transparent, rgba(200, 168, 75, 0.5), transparent);
|
||||
}
|
||||
|
||||
body.landing-page .hero-desc {
|
||||
margin-bottom: 24px;
|
||||
color: rgba(200, 215, 240, 0.6);
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.04em;
|
||||
line-height: 1.9;
|
||||
}
|
||||
|
||||
body.landing-page .hero-link {
|
||||
display: inline-block;
|
||||
padding-bottom: 2px;
|
||||
border-bottom: 1px solid rgba(200, 168, 75, 0.3);
|
||||
color: rgba(200, 168, 75, 0.8);
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.16em;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
transition: color 0.2s, border-color 0.2s;
|
||||
}
|
||||
|
||||
body.landing-page .hero-link:hover {
|
||||
color: #e8c870;
|
||||
border-color: #e8c870;
|
||||
}
|
||||
|
||||
body.landing-page .redirect-banner {
|
||||
position: fixed;
|
||||
bottom: 24px;
|
||||
left: 50%;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
padding: 12px 22px;
|
||||
transform: translateX(-50%);
|
||||
border: 1px solid rgba(200, 168, 75, 0.25);
|
||||
border-radius: 999px;
|
||||
background: rgba(6, 10, 26, 0.92);
|
||||
backdrop-filter: blur(16px);
|
||||
box-shadow: 0 4px 32px rgba(0, 0, 0, 0.5);
|
||||
color: rgba(200, 215, 240, 0.55);
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.14em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
body.landing-page .redirect-countdown {
|
||||
min-width: 16px;
|
||||
color: rgba(200, 168, 75, 0.9);
|
||||
font-family: 'Orbitron', sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
body.landing-page .redirect-bar-wrap {
|
||||
width: 80px;
|
||||
height: 2px;
|
||||
overflow: hidden;
|
||||
border-radius: 1px;
|
||||
background: rgba(200, 168, 75, 0.12);
|
||||
}
|
||||
|
||||
body.landing-page .redirect-bar {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 1px;
|
||||
background: rgba(200, 168, 75, 0.7);
|
||||
transform-origin: left;
|
||||
animation: landing-shrink 10s linear forwards;
|
||||
}
|
||||
|
||||
body.landing-page .redirect-link {
|
||||
color: rgba(200, 168, 75, 0.7);
|
||||
letter-spacing: 0.12em;
|
||||
text-decoration: none;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
body.landing-page .redirect-link:hover {
|
||||
color: #e8c870;
|
||||
}
|
||||
|
||||
@keyframes landing-shrink {
|
||||
from { transform: scaleX(1); }
|
||||
to { transform: scaleX(0); }
|
||||
}
|
||||
|
||||
@keyframes landing-fade-up {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(22px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes landing-spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@keyframes landing-pulse {
|
||||
0%, 100% {
|
||||
opacity: 0.6;
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: scale(1.15);
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Satellitenhimmel ───────────────────────────────────────── */
|
||||
.satpass-page .satpass-card { margin-bottom: 1.25rem; }
|
||||
|
||||
@@ -2700,6 +2970,21 @@ body.tagbogen-page main > .container {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.tagbogen-tool .modal-search-row {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.tagbogen-tool .modal-search-field {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.tagbogen-tool .modal-divider {
|
||||
border: none;
|
||||
border-top: 1px solid rgba(200,168,75,.07);
|
||||
}
|
||||
|
||||
.tagbogen-tool .coord-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
@@ -2712,6 +2997,10 @@ body.tagbogen-page main > .container {
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.tagbogen-tool .coord-field.mt-gap {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.tagbogen-tool .coord-label {
|
||||
font-size: 9px;
|
||||
letter-spacing: .12em;
|
||||
@@ -2810,6 +3099,12 @@ body.tagbogen-page main > .container {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.tagbogen-tool .overlay-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.tagbogen-tool .overlay-dot {
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
@@ -2820,6 +3115,21 @@ body.tagbogen-page main > .container {
|
||||
box-shadow: 0 0 6px currentColor;
|
||||
}
|
||||
|
||||
.tagbogen-tool .overlay-dot.is-summer {
|
||||
background: #ff6020;
|
||||
color: #ff6020;
|
||||
}
|
||||
|
||||
.tagbogen-tool .overlay-dot.is-winter {
|
||||
background: #4080ff;
|
||||
color: #4080ff;
|
||||
}
|
||||
|
||||
.tagbogen-tool .overlay-dot.is-equinox {
|
||||
background: #40d080;
|
||||
color: #40d080;
|
||||
}
|
||||
|
||||
.tagbogen-tool .overlay-btn[data-active="1"] .overlay-dot {
|
||||
opacity: 1;
|
||||
}
|
||||
@@ -2890,6 +3200,13 @@ body.tagbogen-page main > .container {
|
||||
transition: all .2s;
|
||||
}
|
||||
|
||||
.tagbogen-tool .overlay-note {
|
||||
font-size: 10px;
|
||||
color: rgba(200,168,75,.55);
|
||||
margin-bottom: 9px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.tagbogen-tool .overlay-clear-btn:hover {
|
||||
border-color: rgba(200,168,75,.35);
|
||||
color: var(--gold);
|
||||
@@ -3105,6 +3422,10 @@ body.planetvis-page main > .container {
|
||||
font-size: 0.92rem;
|
||||
}
|
||||
|
||||
.planetvis-overlay.is-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.planetvis-tool .spin-ring {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
@@ -3149,6 +3470,8 @@ body.planetvis-page main > .container {
|
||||
}
|
||||
|
||||
.planetvis-tool .planet-orb {
|
||||
--planet-orb-color: #888;
|
||||
--planet-orb-glow: rgba(255,255,255,.18);
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 50%;
|
||||
@@ -3158,6 +3481,13 @@ body.planetvis-page main > .container {
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
text-transform: uppercase;
|
||||
background: radial-gradient(circle at 38% 36%, var(--planet-orb-color), rgba(0,0,0,.88));
|
||||
box-shadow: 0 0 10px var(--planet-orb-glow), inset 0 0 4px rgba(255,255,255,.07);
|
||||
}
|
||||
|
||||
.planetvis-error-text {
|
||||
color: #c05050;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.planetvis-tool .planet-name {
|
||||
@@ -3792,6 +4122,10 @@ body.solarsystem-page main > .container {
|
||||
min-height: 1.5rem;
|
||||
}
|
||||
|
||||
.occult-status-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#occultAbortBtn[hidden] {
|
||||
display: none;
|
||||
}
|
||||
@@ -3817,6 +4151,10 @@ body.solarsystem-page main > .container {
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.occult-spinner-visible {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.occult-ui-busy .occult-spinner {
|
||||
opacity: 1;
|
||||
}
|
||||
@@ -4198,6 +4536,21 @@ body.solarsystem-page main > .container {
|
||||
.eclipse-info-table td:first-child { color: var(--text-dim); font-size: 0.78rem; }
|
||||
.eclipse-info-table td:last-child { font-weight: 600; text-align: right; }
|
||||
|
||||
.eclipse-contact-label {
|
||||
color: var(--gold);
|
||||
font-weight: 700;
|
||||
min-width: 2.4rem;
|
||||
}
|
||||
|
||||
.eclipse-contact-time {
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.eclipse-contact-desc {
|
||||
color: var(--text-dim);
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
.eclipse-info-phase {
|
||||
margin-top: 0.55rem;
|
||||
font-size: 0.8rem;
|
||||
@@ -4309,6 +4662,58 @@ body.solarsystem-page main > .container {
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.eclipse-year-select {
|
||||
flex: 1 1 80px;
|
||||
}
|
||||
|
||||
.eclipse-range-separator {
|
||||
color: var(--text-dim);
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.eclipse-canvas {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.eclipse-scale-note {
|
||||
position: absolute;
|
||||
bottom: 90px;
|
||||
left: 10px;
|
||||
font-size: 10px;
|
||||
color: var(--text-dim);
|
||||
opacity: 0.6;
|
||||
pointer-events: none;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.eclipse-speed-label {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.eclipse-speed-label .solarsystem-label {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.eclipse-control-label {
|
||||
display: block;
|
||||
margin-bottom: 0.35rem;
|
||||
}
|
||||
|
||||
.eclipse-control-range {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.eclipse-control-range + .eclipse-control-label {
|
||||
margin-top: 0.8rem;
|
||||
}
|
||||
|
||||
.eclipse-error {
|
||||
padding: 2rem;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
.eclipse-speed-sel {
|
||||
background: rgba(10,16,36,0.8);
|
||||
border: 1px solid rgba(201,168,76,0.2);
|
||||
@@ -4449,6 +4854,12 @@ body.sternenhimmel-page .controls {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
body.sternenhimmel-page .star-control-stack {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
body.sternenhimmel-page .ctrl-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -4580,7 +4991,51 @@ body.sternenhimmel-page #tooltip .tt-name {
|
||||
display: block;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
body.sternenhimmel-page #tooltip .tt-sun { color: #ffdd44; }
|
||||
body.sternenhimmel-page #tooltip .tt-moon { color: #c8c0a8; }
|
||||
body.sternenhimmel-page #tooltip .tt-planet { color: #ffdd88; }
|
||||
body.sternenhimmel-page #tooltip .tt-messier-oc { color: #7dd3fc; }
|
||||
body.sternenhimmel-page #tooltip .tt-messier-gc { color: #fca5a5; }
|
||||
body.sternenhimmel-page #tooltip .tt-messier-nb { color: #86efac; }
|
||||
body.sternenhimmel-page #tooltip .tt-messier-sc { color: #c4b5fd; }
|
||||
body.sternenhimmel-page #tooltip .tt-messier-pn { color: #67e8f9; }
|
||||
body.sternenhimmel-page #tooltip .tt-messier-gx { color: #fcd34d; }
|
||||
body.sternenhimmel-page #tooltip .tt-messier-as { color: #d1d5db; }
|
||||
|
||||
body.sternenhimmel-page .star-popup-fallback {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 10px 20px;
|
||||
background: #050d18;
|
||||
border-top: 1px solid var(--accent);
|
||||
z-index: 9999;
|
||||
font-family: 'Rajdhani', sans-serif;
|
||||
font-size: 14px;
|
||||
}
|
||||
body.sternenhimmel-page .star-popup-fallback-label {
|
||||
color: var(--text);
|
||||
}
|
||||
body.sternenhimmel-page .star-popup-fallback-link {
|
||||
color: var(--accent);
|
||||
border: 1px solid var(--accent);
|
||||
padding: 5px 16px;
|
||||
text-decoration: none;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
body.sternenhimmel-page .star-popup-fallback-close {
|
||||
margin-left: auto;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--dim);
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* ── STANDORT PANEL ─────────────────────────────────────────────────── */
|
||||
body.sternenhimmel-page #locationWrap {
|
||||
@@ -4746,6 +5201,10 @@ body.sternenhimmel-page .sp-title {
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
body.sternenhimmel-page .sp-title-offset {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
body.sternenhimmel-page .sp-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -4776,6 +5235,10 @@ body.sternenhimmel-page .sp-toggles {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
body.sternenhimmel-page .sp-toggles-compact {
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
body.sternenhimmel-page .sp-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -4873,6 +5336,22 @@ body.sternenhimmel-page .sp-slider .sp-val {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
body.sternenhimmel-page .file-input-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body.sternenhimmel-page .star-export-btn {
|
||||
width: 100%;
|
||||
padding: 5px;
|
||||
border: 1px solid var(--accent);
|
||||
background: #0a1f30;
|
||||
color: var(--accent);
|
||||
font-family: 'Rajdhani', sans-serif;
|
||||
font-size: 0.82rem;
|
||||
letter-spacing: 0.08em;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
body.sternenhimmel-page #starLoadingOverlay {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
|
||||
Reference in New Issue
Block a user