diff --git a/public/astronomical_conversions.php b/public/astronomical_conversions.php index ccd0846..0e47230 100644 --- a/public/astronomical_conversions.php +++ b/public/astronomical_conversions.php @@ -118,31 +118,39 @@ $timeLocationLongitude = isset($currentLocation['longitude']) && is_numeric($cur .astro-conv-tabs { display: flex; flex-wrap: wrap; - gap: 0.75rem; + gap: 0.5rem; + margin: 0 0 1.75rem; + border-bottom: 1px solid var(--border); + padding-bottom: 0; } .astro-conv-tab { - padding: 0.75rem 1rem; - border-radius: 999px; - border: 1px solid rgba(130, 170, 255, 0.18); - background: rgba(255,255,255,0.04); - color: #dce8ff; + border: 1px solid transparent; + border-bottom: none; + background: transparent; + color: var(--text-dim); + border-radius: var(--radius) var(--radius) 0 0; + padding: 0.6rem 1.25rem; cursor: pointer; + font: inherit; + font-size: 0.92rem; + letter-spacing: 0.03em; + transition: color 0.15s, background 0.15s, border-color 0.15s; + position: relative; + bottom: -1px; +} + +.astro-conv-tab:hover { + color: var(--gold-pale); + background: rgba(201, 168, 76, 0.06); + border-color: var(--border); } .astro-conv-tab.is-active { - background: linear-gradient(180deg, rgba(82, 153, 255, 0.28), rgba(49, 112, 255, 0.18)); - border-color: rgba(130, 170, 255, 0.4); - color: #ffffff; -} - -.astro-conv-panel { - padding: 1.2rem; - border-radius: 1rem; - background: - radial-gradient(circle at top left, rgba(82, 153, 255, 0.12), transparent 36%), - linear-gradient(180deg, rgba(13, 19, 33, 0.96), rgba(8, 11, 20, 0.98)); - border: 1px solid rgba(130, 170, 255, 0.16); + color: var(--gold-pale); + background: var(--bg-card); + border-color: var(--border); + border-bottom-color: var(--bg-card); } .astro-conv-grid { @@ -157,29 +165,30 @@ $timeLocationLongitude = isset($currentLocation['longitude']) && is_numeric($cur } .astro-conv-field label { - color: #c7d6f4; + color: var(--text-dim); font-size: 0.94rem; } .astro-conv-label-help { - border-bottom: 1px dotted rgba(199, 214, 244, 0.45); + border-bottom: 1px dotted rgba(201, 168, 76, 0.4); cursor: help; } .astro-conv-input { width: 100%; padding: 0.72rem 0.8rem; - border-radius: 0.8rem; - border: 1px solid rgba(255,255,255,0.12); - background: rgba(255,255,255,0.05); - color: #f8fbff; + border-radius: var(--radius); + border: 1px solid var(--border); + background: rgba(255,255,255,0.04); + color: var(--text); font-size: 0.96rem; + font-family: inherit; } .astro-conv-input:focus { outline: none; - border-color: rgba(130, 170, 255, 0.6); - box-shadow: 0 0 0 3px rgba(82, 153, 255, 0.16); + border-color: rgba(201, 168, 76, 0.5); + box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.1); } .astro-conv-field { @@ -195,9 +204,9 @@ $timeLocationLongitude = isset($currentLocation['longitude']) && is_numeric($cur max-width: 22rem; padding: 0.7rem 0.8rem; border-radius: 0.8rem; - background: rgba(10, 15, 27, 0.96); - border: 1px solid rgba(130, 170, 255, 0.2); - color: #eef4ff; + background: rgba(6, 8, 18, 0.97); + border: 1px solid var(--border); + color: var(--text); font-size: 0.9rem; line-height: 1.45; white-space: pre-line; @@ -228,6 +237,10 @@ $timeLocationLongitude = isset($currentLocation['longitude']) && is_numeric($cur display: block; } +.astro-conv-panel { + border-radius: 0 var(--radius) var(--radius) var(--radius); +} + @media (max-width: 960px) { .astro-conv-grid { grid-template-columns: 1fr; diff --git a/public/css/style.css b/public/css/style.css index be7175e..cd10859 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -1630,9 +1630,28 @@ body.occ-page main > .container { background: rgba(4, 6, 18, 0.85); border-right: 1px solid rgba(200,168,75,.08); } -.controls-panel::-webkit-scrollbar { width: 3px; } -.controls-panel::-webkit-scrollbar-track { background: transparent; } -.controls-panel::-webkit-scrollbar-thumb { background: rgba(200,168,75,.2); border-radius: 2px; } +.controls-panel { + scrollbar-width: thin; + scrollbar-color: rgba(201,168,76,0.45) rgba(201,168,76,0.05); +} +.controls-panel::-webkit-scrollbar { + width: 6px; +} +.controls-panel::-webkit-scrollbar-track { + background: rgba(201,168,76,0.04); + border-radius: 3px; + margin: 4px 0; +} +.controls-panel::-webkit-scrollbar-thumb { + background: linear-gradient(180deg, rgba(240,217,144,0.55), rgba(201,168,76,0.35)); + border-radius: 3px; + box-shadow: 0 0 6px rgba(201,168,76,0.25); + transition: background .2s; +} +.controls-panel::-webkit-scrollbar-thumb:hover { + background: linear-gradient(180deg, rgba(240,217,144,0.85), rgba(201,168,76,0.65)); + box-shadow: 0 0 10px rgba(201,168,76,0.45); +} /* Einzelner Steuerungsblock */ .ctrl-block { @@ -3800,7 +3819,28 @@ body.solarsystem-page main > .container { gap: 1rem; max-height: calc(100vh - 10rem); overflow-y: auto; + overflow-x: hidden; overscroll-behavior: contain; + scrollbar-width: thin; + scrollbar-color: rgba(201,168,76,0.45) rgba(201,168,76,0.05); +} +.solarsystem-sidebar::-webkit-scrollbar { + width: 6px; +} +.solarsystem-sidebar::-webkit-scrollbar-track { + background: rgba(201,168,76,0.04); + border-radius: 3px; + margin: 4px 0; +} +.solarsystem-sidebar::-webkit-scrollbar-thumb { + background: linear-gradient(180deg, rgba(240,217,144,0.55), rgba(201,168,76,0.35)); + border-radius: 3px; + box-shadow: 0 0 6px rgba(201,168,76,0.25); + transition: background .2s; +} +.solarsystem-sidebar::-webkit-scrollbar-thumb:hover { + background: linear-gradient(180deg, rgba(240,217,144,0.85), rgba(201,168,76,0.65)); + box-shadow: 0 0 10px rgba(201,168,76,0.45); } .solarsystem-sidebar-block { @@ -4014,6 +4054,14 @@ body.solarsystem-page main > .container { gap: 0.6rem; } +.jupitersystem-page .solarsystem-button-grid { + justify-items: start; +} + +.jupitersystem-page .solarsystem-button-grid .btn { + padding-inline: 1.1rem; +} + .solarsystem-sidebar .btn.is-active, .solarsystem-sidebar .btn-secondary.is-active { background: rgba(201, 168, 76, 0.16);