Feature: Welten — Profil-Chip entfernt, Footer-Links (Impressum/Die100/Datenschutz), SW by-v642
This commit is contained in:
parent
9410a8bcd4
commit
4da2088074
5 changed files with 313 additions and 5 deletions
|
|
@ -7516,3 +7516,302 @@ svg.empty-state-icon {
|
|||
background: var(--c-primary);
|
||||
border-color: var(--c-primary);
|
||||
}
|
||||
|
||||
/* ================================================================
|
||||
DREI WELTEN NAVIGATION — JETZT | HUND | WELT
|
||||
================================================================ */
|
||||
|
||||
/* Overlay */
|
||||
#worlds-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 50;
|
||||
overflow: hidden;
|
||||
background: var(--c-bg);
|
||||
display: none;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
#worlds-overlay.worlds-visible { opacity: 1; }
|
||||
|
||||
/* Track */
|
||||
#worlds-track {
|
||||
display: flex;
|
||||
width: 300%;
|
||||
height: 100%;
|
||||
will-change: transform;
|
||||
transform: translateX(-33.333%);
|
||||
}
|
||||
.world-panel {
|
||||
width: 33.333%;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
overscroll-behavior-y: contain;
|
||||
}
|
||||
#wp-welt { overflow: hidden; position: relative; }
|
||||
|
||||
/* Navigation-Punkte */
|
||||
#world-dots {
|
||||
position: fixed;
|
||||
top: calc(env(safe-area-inset-top, 0px) + 14px);
|
||||
left: 0; right: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 5px;
|
||||
z-index: 60;
|
||||
pointer-events: none;
|
||||
}
|
||||
.wdot {
|
||||
width: 6px; height: 6px;
|
||||
border-radius: 50%;
|
||||
background: var(--c-text);
|
||||
opacity: 0.2;
|
||||
transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
cursor: pointer;
|
||||
}
|
||||
.wdot.active {
|
||||
width: 22px;
|
||||
border-radius: 3px;
|
||||
opacity: 1;
|
||||
background: var(--c-primary);
|
||||
}
|
||||
|
||||
/* Welt-Labels */
|
||||
#world-labels {
|
||||
position: fixed;
|
||||
top: calc(env(safe-area-inset-top, 0px) + 28px);
|
||||
left: 0; right: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 28px;
|
||||
z-index: 59;
|
||||
pointer-events: none;
|
||||
}
|
||||
.wlabel {
|
||||
font-size: 9px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.12em;
|
||||
color: var(--c-text-secondary);
|
||||
opacity: 0.4;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* Settings-Button */
|
||||
#worlds-settings {
|
||||
position: fixed;
|
||||
top: calc(env(safe-area-inset-top, 0px) + 6px);
|
||||
right: 10px;
|
||||
width: 38px; height: 38px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
z-index: 61;
|
||||
color: var(--c-text-secondary);
|
||||
border: none;
|
||||
background: none;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
/* FAB */
|
||||
#worlds-fab {
|
||||
position: fixed;
|
||||
bottom: calc(env(safe-area-inset-bottom, 16px) + 16px);
|
||||
right: 20px;
|
||||
width: 54px; height: 54px;
|
||||
border-radius: 50%;
|
||||
background: var(--c-primary);
|
||||
color: white;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
z-index: 60;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 4px 20px rgba(196,132,58,0.45);
|
||||
transition: transform 0.12s, box-shadow 0.12s;
|
||||
}
|
||||
#worlds-fab:active { transform: scale(0.92); box-shadow: 0 2px 10px rgba(196,132,58,0.3); }
|
||||
|
||||
/* Back-Button */
|
||||
#worlds-back {
|
||||
position: fixed;
|
||||
top: 0; left: 0; right: 0;
|
||||
height: calc(env(safe-area-inset-top, 0px) + 44px);
|
||||
padding-top: env(safe-area-inset-top, 0px);
|
||||
display: none;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding-left: 16px;
|
||||
background: var(--c-bg);
|
||||
border-bottom: 1px solid var(--c-border);
|
||||
z-index: 200;
|
||||
cursor: pointer;
|
||||
color: var(--c-primary);
|
||||
font-weight: 600;
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
#worlds-back.worlds-back-visible { display: flex; }
|
||||
|
||||
/* Hide existing header + bottom-nav when worlds are active */
|
||||
.worlds-hidden { display: none !important; }
|
||||
|
||||
/* ── JETZT WORLD ─────────────────────────────────────────── */
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════
|
||||
DREI WELTEN — PANORAMA-BILD + FROSTED GLASS CHIPS
|
||||
═══════════════════════════════════════════════════════════════ */
|
||||
|
||||
/* Bild auf dem Track: alle 3 Panels teilen dasselbe Panorama */
|
||||
#worlds-track {
|
||||
background-size: 100% auto;
|
||||
background-position: 0 40%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
/* World Panel: dunkles Overlay über dem Hintergrundbild */
|
||||
.world-panel {
|
||||
background: rgba(0, 0, 0, 0.44);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between; /* Info oben, Chips unten */
|
||||
padding: calc(env(safe-area-inset-top, 0px) + 58px) 14px
|
||||
calc(env(safe-area-inset-bottom, 0px) + 88px);
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
overscroll-behavior-y: contain;
|
||||
}
|
||||
|
||||
/* Content-Divs füllen den Panel und verteilen Top/Bottom */
|
||||
#wj-content, #wh-content, #ww-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
/* Oberer Bereich: Info + Reminders */
|
||||
.world-top { display: flex; flex-direction: column; gap: 10px; }
|
||||
|
||||
/* Unterer Bereich: Chips (Daumen-Zone) */
|
||||
.world-bottom { display: flex; flex-direction: column; gap: 8px; }
|
||||
|
||||
/* Frosted-Glass Info-Card (oben in jeder Welt) */
|
||||
.world-info-card {
|
||||
background: rgba(0, 0, 0, 0.38);
|
||||
backdrop-filter: blur(18px) saturate(1.6);
|
||||
-webkit-backdrop-filter: blur(18px) saturate(1.6);
|
||||
border: 1px solid rgba(255, 255, 255, 0.14);
|
||||
border-radius: 20px;
|
||||
padding: 16px 18px;
|
||||
color: white;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.world-info-title {
|
||||
font-size: var(--text-xl);
|
||||
font-weight: 800;
|
||||
line-height: 1.1;
|
||||
color: white;
|
||||
}
|
||||
.world-info-sub {
|
||||
font-size: var(--text-xs);
|
||||
color: rgba(255, 255, 255, 0.65);
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
/* Frosted-Glass Reminder-Card (für Streak, Alerts) */
|
||||
.world-reminder {
|
||||
background: rgba(0, 0, 0, 0.32);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border-radius: 16px;
|
||||
padding: 12px 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
cursor: pointer;
|
||||
color: white;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.world-reminder:active { background: rgba(0,0,0,0.55); }
|
||||
|
||||
/* Chip-Grid: GLEICH auf allen drei Welten */
|
||||
.world-chips-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
grid-auto-rows: 80px; /* alle Chips gleich hoch */
|
||||
gap: 8px;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
/* Einzelner Chip: Frosted Glass */
|
||||
.world-chip {
|
||||
background: rgba(0, 0, 0, 0.35);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border-radius: 16px;
|
||||
padding: 14px 6px 11px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
color: white;
|
||||
transition: background 0.12s, transform 0.1s;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
user-select: none;
|
||||
}
|
||||
.world-chip:active {
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
transform: scale(0.93);
|
||||
}
|
||||
.world-chip svg { color: white; }
|
||||
.world-chip-label {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
/* Chip-Umrandung je Welt */
|
||||
#wp-jetzt .world-chip { border: 1px solid rgba(196, 132, 58, 0.55); }
|
||||
#wp-hund .world-chip { border: 1px solid rgba(196, 132, 58, 0.65); }
|
||||
#wp-welt .world-chip { border: 1px solid rgba(99, 130, 220, 0.55); }
|
||||
|
||||
/* Sektion-Label über Chip-Gruppen */
|
||||
.world-section-label {
|
||||
font-size: 9px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.10em;
|
||||
text-transform: uppercase;
|
||||
color: rgba(255, 255, 255, 0.45);
|
||||
padding: 4px 2px 0;
|
||||
}
|
||||
|
||||
/* Footer-Links (Impressum / Die 100 / Datenschutz) */
|
||||
.world-footer-links {
|
||||
text-align: center;
|
||||
padding: 10px 0 2px;
|
||||
}
|
||||
.world-footer-links span {
|
||||
font-size: 10px;
|
||||
color: rgba(255, 255, 255, 0.35);
|
||||
cursor: pointer;
|
||||
letter-spacing: 0.04em;
|
||||
transition: color 0.15s;
|
||||
}
|
||||
.world-footer-links span:hover,
|
||||
.world-footer-links span:active {
|
||||
color: rgba(255, 255, 255, 0.65);
|
||||
}
|
||||
|
||||
/* ── KEYFRAMES ───────────────────────────────────────────── */
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 0.5; }
|
||||
50% { opacity: 0.25; }
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue