CSS umgebaut

This commit is contained in:
Eskimue
2026-04-02 11:17:37 +02:00
parent f5dda8e8be
commit e0ed172504
14 changed files with 612 additions and 2545 deletions
+15 -15
View File
@@ -28,10 +28,10 @@ $bodyClass = 'tagbogen-page';
</div>
<div class="modal-body">
<!-- Suche + Geolocation -->
<div style="display:flex;gap:8px;align-items:flex-end;">
<div style="flex:1">
<div class="modal-search-row">
<div class="modal-search-field">
<div class="modal-sect-label">Suche</div>
<input class="coord-input" id="locSearch" type="text" placeholder="Name eingeben..." style="width:100%" oninput="filterLocs(this.value)">
<input class="coord-input" id="locSearch" type="text" placeholder="Name eingeben..." oninput="filterLocs(this.value)">
</div>
<button class="geo-btn" id="geoBtn" onclick="geoLocate()" title="Standort über Browser ermitteln">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="15" height="15">
@@ -43,7 +43,7 @@ $bodyClass = 'tagbogen-page';
</div>
<!-- Gruppen-Dropdown -->
<div id="locGroups"></div>
<hr style="border:none;border-top:1px solid rgba(200,168,75,.07);">
<hr class="modal-divider">
<div>
<div class="modal-sect-label">Eigene Koordinaten</div>
<div class="coord-row">
@@ -56,7 +56,7 @@ $bodyClass = 'tagbogen-page';
<input class="coord-input" id="inputLon" type="number" step="0.01" min="-180" max="180" placeholder="z.B. 11.58">
</div>
</div>
<div class="coord-field" style="margin-top:8px;">
<div class="coord-field mt-gap">
<div class="coord-label">Ortsname (optional)</div>
<input class="coord-input" id="inputName" type="text" placeholder="Eigener Ort">
</div>
@@ -111,24 +111,24 @@ $bodyClass = 'tagbogen-page';
<div class="stat-item"><div class="stat-lbl">H?he</div><div class="stat-val" id="statElev">-&deg;</div></div>
<div class="stat-item"><div class="stat-lbl">Azimut</div><div class="stat-val" id="statAz">-&deg;</div></div>
</div>
<div style="margin-top:9px;">
<div class="mt-lg">
<div class="info-row"><span class="info-lbl">Himmelsrichtung</span><span class="info-val" id="statDir">-</span></div>
<div class="info-row" style="margin-bottom:0"><span class="info-lbl">Tagesphase</span><span class="info-val" id="statPhase">-</span></div>
<div class="sun-phase-bar"><div class="sun-phase-fill" id="phaseBar" style="width:0%"></div></div>
<div class="info-row"><span class="info-lbl">Tagesphase</span><span class="info-val" id="statPhase">-</span></div>
<div class="sun-phase-bar"><div class="sun-phase-fill" id="phaseBar"></div></div>
</div>
</div>
<div class="ctrl-block">
<div class="ctrl-label">Sonnenparameter</div>
<div class="info-row"><span class="info-lbl">Deklination</span><span class="info-val" id="statDecl">-&deg;</span></div>
<div class="info-row"><span class="info-lbl">Max. Elevation</span><span class="info-val" id="statMaxElev">-&deg;</span></div>
<div class="info-row" style="margin-bottom:0"><span class="info-lbl">Aufgang-Azimut</span><span class="info-val" id="statRiseAz">-&deg;</span></div>
<div class="info-row"><span class="info-lbl">Aufgang-Azimut</span><span class="info-val" id="statRiseAz">-&deg;</span></div>
</div>
<div class="ctrl-block">
<div class="ctrl-label">Jahresvergleich</div>
<div style="font-size:10px;color:rgba(200,168,75,.55);margin-bottom:9px;line-height:1.6;">?berlagerung der Sonnenb?gen f?r astronomisch wichtige Tage</div>
<div style="display:flex;flex-direction:column;gap:6px;">
<div class="overlay-note">?berlagerung der Sonnenb?gen f?r astronomisch wichtige Tage</div>
<div class="overlay-list">
<button class="overlay-btn" id="btn_sommer" onclick="toggleOverlay('sommer')" data-active="0">
<span class="overlay-dot" style="background:#ff6020;color:#ff6020"></span>
<span class="overlay-dot is-summer"></span>
<span class="overlay-text">Sommersonnenwende</span>
<div class="overlay-tooltip" id="tip_sommer">
<div class="overlay-tooltip-title">SOMMERSONNENWENDE</div>
@@ -141,7 +141,7 @@ $bodyClass = 'tagbogen-page';
</div>
</button>
<button class="overlay-btn" id="btn_winter" onclick="toggleOverlay('winter')" data-active="0">
<span class="overlay-dot" style="background:#4080ff;color:#4080ff"></span>
<span class="overlay-dot is-winter"></span>
<span class="overlay-text">Wintersonnenwende</span>
<div class="overlay-tooltip" id="tip_winter">
<div class="overlay-tooltip-title">WINTERSONNENWENDE</div>
@@ -154,7 +154,7 @@ $bodyClass = 'tagbogen-page';
</div>
</button>
<button class="overlay-btn" id="btn_fruehjahr" onclick="toggleOverlay('fruehjahr')" data-active="0">
<span class="overlay-dot" style="background:#40d080;color:#40d080"></span>
<span class="overlay-dot is-equinox"></span>
<span class="overlay-text">Tag-/Nachtgleiche</span>
<div class="overlay-tooltip" id="tip_fruehjahr">
<div class="overlay-tooltip-title">TAG-/NACHTGLEICHE</div>
@@ -168,7 +168,7 @@ $bodyClass = 'tagbogen-page';
</button>
</div>
<button class="overlay-clear-btn" onclick="clearOverlays()" style="margin-top:9px;">Alle ausblenden</button>
<button class="overlay-clear-btn mt-lg" onclick="clearOverlays()">Alle ausblenden</button>
</div>
</div>