/* ============================================================ LoonerVerse PHP Frontend – Styles Direkt übernommen aus dem Angular-Frontend (styles.css + Sidebar + Auth + Feed + weitere Komponenten) ============================================================ */ /* ── Reset & Global (aus styles.css) ── */ * { margin: 0; padding: 0; box-sizing: border-box; } html { overflow-x: hidden; } body { width: 100%; background: var(--bg-page); } body { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", sans-serif; color: var(--text); min-height: 100vh; } .stories { overflow-x: auto !important; } /* ── Brand Colors ── */ :root { --primary: #7c3aed; --primary-rgb: 124, 58, 237; --primary-dark: #6d28d9; --secondary: #ec4899; --accent: #3b82f6; --success: #10b981; --warning: #f59e0b; --danger: #ef4444; --gray-50: #f9fafb; --gray-100: #f3f4f6; --gray-200: #e5e7eb; --gray-300: #d1d5db; --gray-400: #9ca3af; --gray-500: #6b7280; --gray-600: #4b5563; --gray-700: #374151; --gray-800: #1f2937; --gray-900: #111827; /* Semantische Farben (Dark Mode überschreibt sie) */ --bg-page: #ffffff; --bg-card: #ffffff; --text: #1a1a1a; --shadow: rgba(0, 0, 0, 0.1); } /* ── Dark Theme ── Aktiviert über (Init-Script in layout.php). Die Grau-Skala wird invertiert: gray-50 (hellster Hintergrund) wird dunkelster Ton usw. – Texte in gray-700..900 werden dadurch hell. */ html[data-theme="dark"] { --bg-page: #0f1117; --bg-card: #1a1d27; --text: #e7e9ee; --shadow: rgba(0, 0, 0, 0.5); --gray-50: #232734; --gray-100: #2a2e3d; --gray-200: #363b4d; --gray-300: #4a5065; --gray-400: #8b91a5; --gray-500: #a6abbc; --gray-600: #c2c6d2; --gray-700: #d5d8e0; --gray-800: #e4e6ec; --gray-900: #f1f2f5; color-scheme: dark; } html[data-theme="dark"] img, html[data-theme="dark"] video { filter: brightness(0.92); } /* ── Scrollbar (WebKit only) ── */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--gray-100); } ::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 4px; } /* ── Utility ── */ .container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; } .card { background: var(--bg-card); border-radius: 1rem; padding: 1.5rem; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } .btn { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.75rem 1.5rem; border-radius: 0.5rem; font-weight: 500; cursor: pointer; border: none; transition: all 0.2s; font-family: inherit; font-size: 1rem; } .btn:disabled { opacity: 0.55; cursor: not-allowed; } .btn-primary { background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); color: white; } .btn-primary:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3); } .btn-secondary { background: var(--gray-100); color: var(--gray-700); } .btn-secondary:hover:not(:disabled) { background: var(--gray-200); } .btn-danger { background: var(--danger); color: white; } .btn-block { width: 100%; justify-content: center; } .btn-sm { padding: 0.5rem 1rem; font-size: 0.875rem; } .alert { padding: 0.875rem 1rem; border-radius: 0.75rem; margin-bottom: 1rem; font-size: 0.875rem; } .alert-error { background: #fee2e2; color: #dc2626; } .alert-success { background: #d1fae5; color: #065f46; } .alert-info { background: #dbeafe; color: #1e40af; } /* ══════════════════════════════════════════════ Layout (aus den Page-Komponenten) ══════════════════════════════════════════════ */ .layout { display: flex; min-height: 100vh; } .main-content { flex: 1; padding: 1rem; padding-top: calc(60px + env(safe-area-inset-top) + 1rem); padding-bottom: calc(4rem + env(safe-area-inset-bottom, 0px)); min-width: 0; max-width: 100%; overflow-x: hidden; background: var(--gray-50); } @media (min-width: 769px) { .main-content { margin-left: 0; padding: 2rem; padding-top: 2rem; padding-bottom: 2rem; } } /* ══════════════════════════════════════════════ Sidebar (direkt aus sidebar.component.ts) ══════════════════════════════════════════════ */ /* Mobile Header */ .mobile-header { display: flex; align-items: center; justify-content: space-between; position: fixed; top: var(--update-banner-height, 0); left: 0; right: 0; height: calc(60px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 1rem 0; background: var(--bg-card); border-bottom: 1px solid var(--gray-200); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); z-index: 300; } .mobile-header h1 { font-size: 1.25rem; background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; user-select: none; margin: 0; } .hamburger { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 44px; height: 44px; padding: 8px; background: none; border: none; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; flex-shrink: 0; } .hamburger span { display: block; width: 22px; height: 2px; background: var(--gray-700); border-radius: 2px; transition: opacity 0.2s; } .hamburger:active { opacity: 0.6; } /* Overlay */ .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 400; touch-action: none; } .sidebar-overlay.active { display: block; } /* Sidebar */ .sidebar { position: fixed; top: 0; left: 0; width: 260px; max-width: 85vw; height: 100dvh; display: flex; flex-direction: column; background: var(--bg-card); border-right: 1px solid var(--gray-200); padding: calc(1.25rem + env(safe-area-inset-top)) 1rem 1.25rem; box-sizing: border-box; overflow-y: auto; overflow-x: hidden; z-index: 500; transform: translateX(-100%); transition: transform 0.28s ease; } .sidebar.open { transform: translateX(0); box-shadow: 4px 0 16px rgba(0, 0, 0, 0.12); } .sidebar-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; } .sidebar-header h1 { font-size: 1.4rem; margin: 0; background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .close-btn { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: none; background: var(--gray-100); font-size: 1.1rem; color: var(--gray-600); cursor: pointer; flex-shrink: 0; touch-action: manipulation; } .close-btn:active { background: var(--gray-200); } /* Wallet Cards */ .wallet-card, .creator-earnings-card { display: block; border-radius: 1rem; padding: 1rem 1.25rem; margin-bottom: 1.25rem; color: white; text-decoration: none; transition: transform 0.2s, box-shadow 0.2s; } .wallet-card { background: linear-gradient(135deg, #3b82f6 0%, #06b6d4 100%); } .creator-earnings-card { background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); } .wallet-card:hover, .creator-earnings-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15); text-decoration: none; color: white; } .wallet-info { display: flex; align-items: center; gap: 0.75rem; } .wallet-icon { font-size: 1.75rem; } .wallet-amount { font-size: 1.4rem; font-weight: 700; line-height: 1.2; } .wallet-label { font-size: 0.9rem; font-weight: 600; opacity: 0.95; } .wallet-sublabel { font-size: 0.7rem; opacity: 0.8; } /* Nav */ .sidebar-nav { flex: 1; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; } .nav-item { display: flex; align-items: center; gap: 0.75rem; min-height: 44px; padding: 0 1rem; border-radius: 0.75rem; text-decoration: none; color: var(--gray-700); font-weight: 500; transition: background 0.15s; touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; } .nav-item:hover { background: var(--gray-100); text-decoration: none; } .nav-item.active { background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); color: white; } .nav-icon { font-size: 1.2rem; flex-shrink: 0; } .nav-divider { border: none; border-top: 1px solid var(--gray-200); margin: 0.375rem 0; } .nav-item.admin { color: var(--accent); } .nav-item.admin.active { background: var(--accent); color: white; } .nav-item.moderator { color: var(--warning); } .nav-item.moderator.active { background: var(--warning); color: white; } .nav-item.beta { color: #f97316; } .nav-item.beta.active { background: #f97316; color: white; } .nav-section-title { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gray-400); padding: 0.75rem 1rem 0.25rem; } .tag-item { font-size: 0.9rem; } /* Footer */ .sidebar-footer { display: flex; flex-direction: column; gap: 0.5rem; padding-top: 1rem; border-top: 1px solid var(--gray-200); } .logout-btn { width: 100%; padding: 0.75rem; background: var(--gray-100); border: none; border-radius: 0.5rem; font-weight: 500; color: var(--gray-700); cursor: pointer; font-family: inherit; transition: background 0.15s; } .logout-btn:hover { background: var(--gray-200); } /* Desktop Sidebar */ @media (min-width: 769px) { .mobile-header { display: none; } .sidebar-overlay { display: none !important; } .close-btn { display: none; } .sidebar { position: relative; transform: none; transition: none; height: 100vh; flex-shrink: 0; } } /* ══════════════════════════════════════════════ Auth (direkt aus login.component.ts) ══════════════════════════════════════════════ */ .auth-container { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 1rem; } .login-logo-outside { display: block; width: 100%; max-width: 420px; margin: 0 auto 1.25rem auto; text-align: center; flex-shrink: 0; align-self: center; } .login-logo-outside img { display: block; width: auto; max-width: 100%; max-height: 160px; object-fit: contain; border-radius: .75rem; margin: 0 auto; background: var(--bg-card); padding: .5rem; box-shadow: 0 4px 16px rgba(0,0,0,.18); } .login-logo-inside { display: flex; justify-content: center; margin-bottom: 1rem; } .login-logo-inside img { display: block; width: auto; max-width: 100%; max-height: 72px; object-fit: contain; border-radius: .5rem; } .auth-card { background: var(--bg-card); border-radius: 1.5rem; padding: 3rem; width: 100%; max-width: 420px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); } .auth-header { text-align: center; margin-bottom: 2rem; } .auth-header h1 { font-size: 2rem; margin-bottom: 0.5rem; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .auth-header p { color: var(--gray-600); margin: 0; } .form-group { margin-bottom: 1.5rem; } .form-group label { display: block; margin-bottom: 0.5rem; font-weight: 500; color: var(--gray-700); } .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 0.875rem; border: 2px solid var(--gray-200); border-radius: 0.75rem; font-size: 1rem; font-family: inherit; transition: all 0.2s; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1); } .form-hint { display: block; margin-top: 0.25rem; font-size: 0.75rem; color: var(--gray-500); } /* Passwort-Sichtbarkeits-Toggle */ .pw-wrap { position: relative; } .pw-wrap input { padding-right: 3rem !important; } .pw-toggle { position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; padding: 0.25rem; color: var(--gray-400); display: flex; align-items: center; justify-content: center; transition: color 0.2s; } .pw-toggle:hover { color: var(--primary); } .eye-icon, .eye-off-icon { width: 20px; height: 20px; } .error-message { background: #fee2e2; color: #dc2626; padding: 0.75rem; border-radius: 0.5rem; margin-bottom: 1rem; font-size: 0.875rem; } .success-message { background: #d1fae5; color: #065f46; padding: 0.75rem; border-radius: 0.5rem; margin-bottom: 1rem; font-size: 0.875rem; } .btn-block { width: 100%; padding: 1rem; font-size: 1rem; } .auth-footer { text-align: center; margin-top: 1.5rem; color: var(--gray-600); } .auth-footer a { color: var(--primary); text-decoration: none; font-weight: 500; } .auth-footer a:hover { text-decoration: underline; } .legal-footer { margin-top: 1rem; text-align: center; } .imprint-link { background: none; border: none; color: var(--gray-500); text-decoration: underline; font-size: 0.875rem; cursor: pointer; padding: 0.5rem 1rem; } /* ══════════════════════════════════════════════ Feed (direkt aus feed.component.ts) ══════════════════════════════════════════════ */ /* Stories */ .stories-container { overflow-x: auto; padding-bottom: 0.5rem; margin-bottom: 1rem; } .stories { display: flex; gap: 0.75rem; width: max-content; min-width: 100%; padding: 0.25rem 0.125rem; } .story { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; cursor: pointer; gap: 0.375rem; } .story-avatar { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient( 135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888 ); padding: 2.5px; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; flex-shrink: 0; } .story-avatar-inner { width: 100%; height: 100%; border-radius: 50%; border: 2px solid white; background: var(--gray-200); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; overflow: hidden; } .story-avatar-inner img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .story-name { font-size: 0.7rem; color: var(--gray-600); width: 64px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .add-story .story-avatar { background: var(--gray-200); } .add-story .story-avatar-inner { background: var(--gray-100); color: var(--primary); border: 2px dashed var(--gray-300); } .story-viewed .story-avatar { background: var(--gray-300); } /* Feed Filters */ .feed-filters { display: flex; gap: 0.5rem; margin-bottom: 1rem; } .filter-tab { padding: 0.5rem 1.25rem; border: 2px solid var(--gray-200); border-radius: 999px; background: var(--bg-card); font-size: 0.875rem; font-weight: 500; cursor: pointer; font-family: inherit; color: var(--gray-600); transition: all 0.15s; touch-action: manipulation; } .filter-tab.active, .filter-tab:hover { border-color: var(--primary); color: var(--primary); background: rgba(124, 58, 237, 0.08); } /* Posts Grid */ .posts-grid { display: flex; flex-direction: column; gap: 1rem; max-width: 680px; margin-left: auto; margin-right: auto; } /* Post Card */ .post-card { background: var(--bg-card); border-radius: 0.875rem; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); overflow: hidden; cursor: pointer; transition: box-shadow 0.2s; } .post-card:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); } .post-header { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; } .author-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--gray-200); background-size: cover; background-position: center; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--primary); font-size: 1rem; overflow: hidden; } .author-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .author-info { flex: 1; min-width: 0; } .author-header-row { display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; } .author-name { font-weight: 600; font-size: 0.9375rem; } .author-username { font-size: 0.8rem; color: var(--gray-500); } .post-time { font-size: 0.75rem; color: var(--gray-400); margin-left: auto; white-space: nowrap; } .creator-icon { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; font-size: 0.6rem; font-weight: 700; } .creator-icon.verified { background: #3b82f6; color: white; } .creator-icon.monetize { background: none; color: var(--primary); } .creator-icon.club { background: #f59e0b; color: white; } /* Post Media */ .post-media-wrapper { position: relative; overflow: hidden; background: #000; } .post-media { width: 100%; display: block; max-height: 520px; object-fit: contain; } .post-media-blur { filter: blur(18px); transform: scale(1.08); } .post-media-wrapper--blocked { min-height: 220px; } .post-locked-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.35); display: flex; flex-direction: column; align-items: center; justify-content: center; color: white; gap: 0.75rem; } .post-price-badge { position: absolute; top: 0.75rem; right: 0.75rem; background: rgba(255, 193, 7, 0.9); color: var(--text); padding: 0.375rem 0.875rem; border-radius: 2rem; font-weight: 600; font-size: 0.8rem; } .fsk18-badge { position: absolute; top: 0.75rem; left: 0.75rem; background: #dc2626; color: white; font-size: 0.7rem; font-weight: 700; padding: 0.25rem 0.6rem; border-radius: 1rem; } /* Post Actions */ .post-actions { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.75rem; border-bottom: 1px solid var(--gray-100); } .action-buttons-row { display: flex; align-items: center; gap: 0.25rem; flex-wrap: wrap; } .action-btn { display: flex; align-items: center; gap: 0.25rem; min-height: 44px; padding: 0 0.625rem; background: none; border: none; border-radius: 0.5rem; font-size: 0.875rem; color: var(--gray-700); cursor: pointer; white-space: nowrap; touch-action: manipulation; transition: background 0.15s; font-family: inherit; } .action-btn:hover { background: var(--gray-100); } .action-btn.liked { color: #ef4444; } .monetization-buttons { display: flex; gap: 0.5rem; width: 100%; } .gift-btn, .purchase-btn { flex: 1; display: flex; align-items: center; justify-content: center; padding: 0.5rem; border: none; border-radius: 0.5rem; cursor: pointer; background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); color: white; font-weight: 500; font-family: inherit; font-size: 0.875rem; transition: opacity 0.15s; touch-action: manipulation; } .gift-btn:hover, .purchase-btn:hover { opacity: 0.9; } /* Post Content */ .post-content { padding: 0.75rem; } .post-content h3 { font-size: 1rem; font-weight: 600; margin-bottom: 0.375rem; color: var(--gray-900); } .post-content p { font-size: 0.875rem; color: var(--gray-600); line-height: 1.5; margin: 0; } .hashtag-list { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.5rem; } .hashtag-item { font-size: 0.8rem; color: var(--primary); background: rgba(124, 58, 237, 0.08); padding: 0.2rem 0.6rem; border-radius: 999px; cursor: pointer; font-weight: 500; touch-action: manipulation; transition: background 0.15s; text-decoration: none; display: inline-block; } .hashtag-item:hover { background: rgba(124, 58, 237, 0.15); text-decoration: none; } .tag-follow-btn { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--primary); background: transparent; color: var(--primary); font-size: .75rem; font-weight: 700; cursor: pointer; vertical-align: middle; line-height: 1; padding: 0; flex-shrink: 0; touch-action: manipulation; transition: background .15s, color .15s; } .tag-follow-btn.following { background: var(--primary); color: #fff; } .lv-toast { position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%); background: #111; color: #fff; padding: .45rem 1rem; border-radius: 2rem; font-size: .85rem; z-index: 9999; pointer-events: none; transition: opacity .4s; white-space: nowrap; } /* Skeleton */ .skeleton-post { height: 380px; background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-200) 50%, var(--gray-100) 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: 0.875rem; } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Feed Footer */ .feed-footer { display: flex; justify-content: center; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--gray-100); } .impressum-link { background: none; border: none; color: var(--gray-400); font-size: 0.8rem; text-decoration: underline; cursor: pointer; padding: 0.5rem; } /* ── Legal Overlays (Impressum, AGB, Datenschutz) ── */ .impressum-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 1rem; overflow-y: auto; } .impressum-dialog { background: var(--bg-card); border-radius: 1rem; width: 100%; max-width: 640px; max-height: 85vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,.25); } .impressum-header { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 1.5rem; border-bottom: 1px solid #e5e7eb; flex-shrink: 0; } .impressum-header h2 { margin: 0; font-size: 1.1rem; font-weight: 700; } .impressum-close { background: none; border: none; font-size: 1.25rem; cursor: pointer; color: #6b7280; line-height: 1; padding: .25rem; } .impressum-body { padding: 1.25rem 1.5rem; overflow-y: auto; flex: 1; font-size: .9rem; line-height: 1.6; color: #374151; white-space: pre-wrap; } .impressum-footer { padding: 1rem 1.5rem; border-top: 1px solid #e5e7eb; display: flex; justify-content: flex-end; flex-shrink: 0; } .impressum-btn-close { background: #111; color: #fff; border: none; border-radius: .5rem; padding: .55rem 1.25rem; font-size: .875rem; font-weight: 600; cursor: pointer; font-family: inherit; } /* Desktop Feed */ @media (min-width: 769px) { .post-header { padding: 1rem; } .author-avatar { width: 44px; height: 44px; } .post-content { padding: 1rem; } .post-content h3 { font-size: 1.1rem; } .post-actions { padding: 0.875rem; } .posts-grid { gap: 1.5rem; } } /* ══════════════════════════════════════════════ Page Header (aus mehreren Komponenten) ══════════════════════════════════════════════ */ .page-header { margin-bottom: 1rem; } .page-header h1 { font-size: 1.25rem; margin: 0 0 0.15rem; } @media (min-width: 640px) { .page-header { margin-bottom: 1.5rem; } .page-header h1 { font-size: 1.75rem; } } .page-header p { color: var(--gray-500); font-size: 0.875rem; margin: 0; } /* ══════════════════════════════════════════════ Search Bar ══════════════════════════════════════════════ */ .search-bar { margin-bottom: 1rem; } .search-bar input { width: 100%; padding: 0.625rem 1rem; border: 2px solid var(--gray-200); border-radius: 2rem; font-size: 0.9rem; font-family: inherit; transition: border-color 0.2s; -webkit-appearance: none; } @media (min-width: 640px) { .search-bar { margin-bottom: 1.25rem; } .search-bar input { padding: 0.75rem 1.25rem; font-size: 1rem; } } .search-bar input:focus { outline: none; border-color: var(--primary); } /* ══════════════════════════════════════════════ Tabs ══════════════════════════════════════════════ */ .tabs, .content-tabs { display: flex; gap: 0.5rem; margin-bottom: 1.25rem; flex-wrap: wrap; } .tab-btn { padding: 0.5rem 1.125rem; border: none; border-radius: 2rem; background: var(--gray-100); font-size: 0.875rem; font-weight: 500; cursor: pointer; font-family: inherit; color: var(--gray-600); transition: all 0.15s; touch-action: manipulation; white-space: nowrap; -webkit-tap-highlight-color: transparent; } .tab-btn.active { background: var(--primary); color: white; } .tab-btn:hover:not(.active) { background: var(--gray-200); } /* ══════════════════════════════════════════════ Profile (aus profile.component.ts) ══════════════════════════════════════════════ */ .profile-container { max-width: 900px; } .profile-header { background: var(--bg-card); border-radius: 1rem; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07); margin-bottom: 1.5rem; } .header-bg { height: 150px; background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%); background-size: cover; background-position: center; border-radius: 1rem 1rem 0 0; } .profile-info { padding: 0 1.25rem 1rem; } /* Avatar | Text | Button – Zeile zieht 60px hoch damit Avatar den Header überlappt */ .profile-top-row { display: flex; align-items: flex-start; gap: 1rem; margin-top: -60px; } .profile-avatar { flex-shrink: 0; } /* Text fängt 65px tiefer an → klar unterhalb des Headers */ .user-details { padding-top: 65px; } /* Edit-Button (Eigenprofil) rechts neben Avatar → ebenfalls 65px Offset */ .profile-top-row .profile-actions { padding-top: 65px; } .avatar-large { width: 120px; height: 120px; border-radius: 50%; border: 4px solid white; overflow: hidden; background: linear-gradient(135deg, var(--primary) 0%, #a78bfa 100%); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 3rem; font-weight: 700; color: white; } .avatar-large img { width: 100%; height: 100%; object-fit: cover; } .user-details { display: flex; flex-direction: column; align-items: flex-start; flex: 1; min-width: 0; } .name-row { display: flex; align-items: center; justify-content: flex-start; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.25rem; } .name-row h1 { font-size: 1.5rem; margin: 0; color: var(--gray-900); } .verified-badge { background: var(--primary); color: white; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 700; flex-shrink: 0; } .creator-badge { background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%); padding: 0.2rem 0.6rem; border-radius: 1rem; font-size: 0.8rem; } .club-badge { background: linear-gradient(135deg, #8B5CF6 0%, #6366F1 100%); padding: 0.2rem 0.6rem; border-radius: 1rem; font-size: 0.8rem; color: white; } .profile-username { color: var(--gray-600); font-size: 0.875rem; margin: 0 0 0.4rem; } .profile-bio { color: var(--gray-700); font-size: 0.9rem; line-height: 1.6; margin: 0; } /* Edit-Button-Bereich (Eigenprofil, oben rechts) */ .profile-top-row .profile-actions { display: flex; gap: 0.5rem; align-items: center; justify-content: flex-end; flex-wrap: wrap; flex-shrink: 0; margin-left: auto; } /* Aktions-Buttons (Fremdprofil) – volle Breite unter der Bio */ .profile-actions-row { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.875rem; width: 100%; } .profile-actions-row .btn-follow, .profile-actions-row .btn-following, .profile-actions-row .btn-pending, .profile-actions-row .btn-message, .profile-actions-row .btn-report { flex: 1; min-width: 80px; } .btn-report { padding: 0.75rem 1.5rem; border-radius: 0.5rem; font-weight: 500; font-size: 0.875rem; cursor: pointer; font-family: inherit; background: var(--bg-card); color: var(--danger, #EF4444); border: 2px solid var(--danger, #EF4444); transition: all 0.2s; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; } .btn-report:hover { background: #FEF2F2; } .btn-edit, .btn-follow, .btn-following, .btn-pending, .btn-message { padding: 0.75rem 1.5rem; border-radius: 0.5rem; font-weight: 500; font-size: 0.875rem; cursor: pointer; font-family: inherit; transition: all 0.2s; touch-action: manipulation; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; } .btn-edit { background: var(--bg-card); color: var(--gray-900); border: 2px solid var(--gray-300); } .btn-edit:hover { border-color: var(--primary); color: var(--primary); background: var(--gray-50); } .btn-follow { background: var(--bg-card); color: var(--gray-800); border: 2px solid var(--gray-300); } .btn-follow:hover { background: var(--gray-50); border-color: var(--gray-400); } .btn-following { background: linear-gradient(135deg, var(--primary) 0%, #a78bfa 100%); color: white; border: none; } .btn-following:hover { box-shadow: 0 4px 12px rgba(124,58,237,0.3); } .btn-pending { background: var(--gray-100); color: var(--gray-600); border: 2px solid var(--gray-300); } .btn-pending:hover { background: #fee2e2; border-color: #fca5a5; color: #dc2626; } .btn-message { background: var(--bg-card); color: var(--primary); border: 2px solid var(--primary); } .btn-message:hover { background: var(--primary); color: white; } .btn-message--locked { opacity: 0.45; cursor: not-allowed; background: var(--bg-card); color: var(--gray-500); border-color: var(--gray-300); } .btn-message--locked:hover { background: var(--bg-card); color: var(--gray-500); } .profile-stats { display: flex; justify-content: space-around; gap: 1rem; padding: 1rem; border-top: 1px solid var(--gray-200); box-sizing: border-box; } .stat { display: flex; flex-direction: column; align-items: flex-start; cursor: pointer; transition: opacity 0.2s; } .stat:hover { opacity: 0.7; } .stat-clickable { background: transparent !important; border: none; outline: none; padding: 0; text-align: left; font-family: inherit; -webkit-appearance: none; appearance: none; color: inherit; box-shadow: none; cursor: pointer; } .stat strong { display: block; font-size: 1.25rem; font-weight: 700; color: var(--gray-900); } .stat span { font-size: 0.875rem; color: var(--gray-600); margin-top: 0.25rem; } .social-links { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 0.75rem; justify-content: center; } .social-link { font-size: 0.875rem; color: var(--primary); text-decoration: none; transition: opacity 0.2s; } .social-link:hover { opacity: 0.7; } /* Profile Tabs */ .profile-tabs { display: flex; gap: 0.25rem; margin-bottom: 1.5rem; border-bottom: 2px solid var(--gray-200); overflow-x: auto; padding-bottom: 0; } .profile-tabs button { padding: 0.75rem 1.25rem; border: none; background: none; font-weight: 500; color: var(--gray-500); cursor: pointer; font-family: inherit; font-size: 0.9rem; white-space: nowrap; border-bottom: 3px solid transparent; margin-bottom: -2px; transition: all 0.15s; touch-action: manipulation; } .profile-tabs button.active { color: var(--primary); border-bottom-color: var(--primary); } .profile-tabs button:hover:not(.active) { color: var(--gray-700); } /* Profile Posts Grid – mobile-first */ .profile-posts-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; } @media (min-width: 641px) { .profile-posts-grid { grid-template-columns: repeat(3, 1fr); } } .profile-post-thumb { aspect-ratio: 1/1; background: var(--gray-200); border-radius: 0.5rem; overflow: hidden; cursor: pointer; position: relative; display: block; } .profile-post-thumb img { width: 100%; height: 100%; object-fit: cover; } .profile-post-thumb:hover img { opacity: 0.85; } .profile-post-thumb.thumb-blurred img, .post-image.thumb-blurred img { filter: blur(25px) !important; transform: scale(1.1); opacity: 1; } .thumb-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; background: rgba(0,0,0,.35); z-index: 2; } .thumb-overlay span { font-size: 1.6rem; pointer-events: none; } .thumb-overlay small { color: #fff; font-size: .7rem; font-weight: 700; pointer-events: none; } .thumb-badge-premium { position: absolute; top: .25rem; right: .25rem; background: rgba(255,193,7,.9); border-radius: 999px; padding: .1rem .4rem; font-size: .65rem; font-weight: 700; z-index: 2; } .thumb-badge-video { position: absolute; bottom: .35rem; right: .35rem; background: rgba(0,0,0,.55); color: #fff; border-radius: 999px; padding: .15rem .45rem; font-size: .7rem; z-index: 2; pointer-events: none; } .video-thumb-placeholder { width: 100%; height: 100%; min-height: 120px; background: #1a1a2e; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.5); font-size: 2.5rem; } /* Mobile profile refinements */ @media (max-width: 479px) { .header-bg { height: 120px; } .profile-avatar { margin-top: -48px; } .avatar-large { width: 96px; height: 96px; font-size: 2.25rem; } .name-row h1 { font-size: 1.25rem; } .profile-stats { padding: 0.75rem 1rem; } .profile-tabs button { padding: 0.625rem 0.875rem; font-size: 0.8rem; } } /* Profil: Mobile – gestapeltes zentriertes Layout (Avatar → Name → Bio → Buttons) */ @media (max-width: 600px) { .profile-top-row { flex-direction: column; align-items: center; margin-top: 0; gap: 0.25rem; } .profile-avatar { margin-top: -52px; } .user-details { padding-top: 0.25rem; align-items: center; width: 100%; } .name-row { justify-content: center; } .profile-username, .profile-bio { text-align: center; } .profile-top-row .profile-actions { width: 100%; padding-top: 0.25rem; margin-left: 0; justify-content: center; } } /* ══════════════════════════════════════════════ Post Detail (aus post-detail.component.ts) ══════════════════════════════════════════════ */ .post-detail-container { max-width: 1000px; margin: 0 auto; } .btn-back { margin-bottom: 1.5rem; padding: 0.625rem 1.25rem; background: var(--bg-card); border: 2px solid var(--gray-200); border-radius: 0.5rem; cursor: pointer; font-weight: 500; transition: all 0.2s; font-family: inherit; display: inline-flex; align-items: center; gap: 0.4rem; } .btn-back:hover { border-color: var(--primary); color: var(--primary); } /* Post Detail Grid – mobile-first (1 col mobile, 2 col desktop) */ .post-detail-grid { display: grid; grid-template-columns: 1fr; gap: 0; background: var(--bg-card); border-radius: 1rem; overflow: hidden; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); } @media (min-width: 769px) { .post-detail-grid { grid-template-columns: 1fr 1fr; } } .post-media-section { background: #000; display: flex; align-items: center; } .post-media-section img, .post-media-section video { width: 100%; display: block; } .post-info-section { padding: 1.5rem; display: flex; flex-direction: column; width: 100%; max-width: 100%; box-sizing: border-box; overflow-x: hidden; min-width: 0; } /* ── Image person tags (shared: post detail + feed) ─── */ .img-tagger-view, .feed-tag-wrapper { position:relative; display:block; width:100%; } .view-tag-marker { position:absolute; transform:translate(-50%,-50%); pointer-events:none; z-index:10; } .view-tag-dot { width:14px; height:14px; background:#8a2be2; border:2.5px solid white; border-radius:50%; margin:0 auto; box-shadow:0 2px 6px rgba(0,0,0,.4); opacity:0; transform:scale(0); transition:transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s, opacity .2s; } .view-tag-bubble { position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%); background:rgba(0,0,0,.85); color:white; font-size:.72rem; white-space:nowrap; border-radius:5px; padding:3px 8px; text-decoration:none; opacity:0; pointer-events:none; transition:opacity .15s; z-index:11; } .view-tag-marker.highlight { pointer-events:auto; } .view-tag-marker.highlight .view-tag-dot { opacity:1; transform:scale(1.2); box-shadow:0 0 0 4px rgba(138,43,226,.25), 0 2px 8px rgba(0,0,0,.5); } .view-tag-marker.highlight .view-tag-bubble { opacity:1; pointer-events:auto; } /* Hover nur auf Maus-Geräten — verhindert sticky-hover auf Touchscreens */ @media (hover: hover) { .view-tag-marker:hover { pointer-events:auto; } .view-tag-marker:hover .view-tag-dot { opacity:1; transform:scale(1.2); box-shadow:0 0 0 4px rgba(138,43,226,.25), 0 2px 8px rgba(0,0,0,.5); } .view-tag-marker:hover .view-tag-bubble { opacity:1; pointer-events:auto; } } /* Bubbles auf Touch-Geräten komplett unterbinden */ @media (hover: none) { .view-tag-bubble { display:none !important; } } .post-image-persons { display:flex; flex-wrap:wrap; align-items:center; gap:.25rem .4rem; margin-bottom:.75rem; font-size:.85rem; } .post-image-persons-label { color:var(--gray-500,#6B7280); white-space:nowrap; } .post-image-person-link { color:var(--primary,#7C3AED); font-weight:600; text-decoration:none; } .post-image-person-link:hover { text-decoration:underline; } @media (min-width: 769px) { .post-info-section { max-height: none; overflow-y: auto; overflow-x: hidden; } } .post-detail-author { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; text-decoration: none; color: inherit; } .post-detail-author:hover { text-decoration: none; } .detail-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.75rem; } .detail-desc { color: var(--gray-600); font-size: 0.9375rem; line-height: 1.6; margin-bottom: 1rem; } .comments-section { flex: 1; border-top: 1px solid var(--gray-100); padding-top: 1rem; } .comments-section h3 { font-size: 1rem; font-weight: 600; margin-bottom: 1rem; } .comment-item { display: flex; gap: 0.75rem; padding: 0.75rem 0; border-bottom: 1px solid var(--gray-100); } .comment-avatar { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; background: var(--gray-200); overflow: hidden; display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--primary); font-size: 0.875rem; } .comment-avatar img { width: 100%; height: 100%; object-fit: cover; } .comment-body { flex: 1; } .comment-author { font-weight: 600; font-size: 0.875rem; } .comment-text { font-size: 0.9rem; color: var(--gray-700); margin: 0.2rem 0; } .comment-time { font-size: 0.75rem; color: var(--gray-400); } .comment-form { display: flex; gap: 0.75rem; margin-top: 1rem; width: 100%; max-width: 100%; box-sizing: border-box; } .comment-form input { flex: 1; min-width: 0; padding: 0.625rem 0.875rem; border: 2px solid var(--gray-200); border-radius: 2rem; font-size: 0.9rem; font-family: inherit; box-sizing: border-box; } .comment-form input:focus { outline: none; border-color: var(--primary); } .comment-submit { padding: 0.625rem 1.25rem; border-radius: 2rem; background: var(--primary); color: white; border: none; cursor: pointer; font-weight: 600; font-family: inherit; touch-action: manipulation; } .comment-submit:hover { opacity: 0.9; } /* ══════════════════════════════════════════════ Upload ══════════════════════════════════════════════ */ .upload-container { max-width: 600px; } .upload-box { border: 3px dashed var(--gray-300); border-radius: 1rem; padding: 3rem; text-align: center; cursor: pointer; transition: all 0.2s; background: var(--bg-card); margin-bottom: 1.5rem; } .upload-box:hover { border-color: var(--primary); background: rgba(124, 58, 237, 0.04); } .upload-placeholder p { font-weight: 600; color: var(--gray-700); margin: 1rem 0 0.5rem; } .upload-placeholder span { font-size: 0.875rem; color: var(--gray-500); } .upload-icon-big { font-size: 3rem; } /* Toggle Switch */ .toggle-item { display: flex; align-items: center; justify-content: space-between; padding: 1rem 0; border-bottom: 1px solid var(--gray-100); } .toggle-info strong { display: block; font-weight: 600; } .toggle-info p { font-size: 0.875rem; color: var(--gray-500); margin: 0.25rem 0 0; } .toggle-switch { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 44px; /* Touch-Target ≥ 44px */ flex-shrink: 0; cursor: pointer; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 48px; height: 26px; background: var(--gray-300); border-radius: 26px; cursor: pointer; transition: background 0.2s; } .slider::before { content: ""; position: absolute; width: 20px; height: 20px; left: 3px; bottom: 3px; background: var(--bg-card); border-radius: 50%; transition: transform 0.2s; } input:checked + .slider { background: var(--primary); } input:checked + .slider::before { transform: translateX(22px); } /* ══════════════════════════════════════════════ Discover – 1:1 Angular discover.component.ts ══════════════════════════════════════════════ */ /* Tabs – underline style wie Angular */ .content-tabs { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; border-bottom: 2px solid var(--gray-200); width: 100%; max-width: 100%; box-sizing: border-box; overflow-x: hidden; } .tab-btn { padding: 0.5rem 1rem; background: transparent; border: none; border-bottom: 3px solid transparent; cursor: pointer; font-weight: 500; color: var(--gray-600); transition: all 0.2s; margin-bottom: -2px; font-size: 0.875rem; touch-action: manipulation; white-space: nowrap; -webkit-tap-highlight-color: transparent; } @media (min-width: 768px) { .tab-btn { padding: 0.75rem 1.5rem; font-size: 1rem; } } .tab-btn:hover:not(.active) { color: var(--primary); } .tab-btn.active { border-bottom-color: var(--primary); } /* Search bar */ .search-bar { width: 100%; max-width: 100%; box-sizing: border-box; } .search-bar input { width: 100%; max-width: 100%; padding: 0.875rem 1.25rem; border: 2px solid var(--gray-200); border-radius: 3rem; font-size: 0.9375rem; margin-bottom: 1.5rem; box-sizing: border-box; font-family: inherit; -webkit-appearance: none; transition: border-color 0.2s; background: var(--bg-card); } @media (min-width: 768px) { .search-bar input { max-width: 600px; padding: 1rem; font-size: 1rem; margin-bottom: 2rem; } } .search-bar input:focus { outline: none; border-color: var(--primary); } /* Category chips – horizontal scroll */ .discover-categories { display: flex; gap: 0.75rem; margin-bottom: 2rem; overflow-x: auto; overflow-y: hidden; width: 100%; max-width: 100%; box-sizing: border-box; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; flex-wrap: nowrap; padding-bottom: 0.25rem; overscroll-behavior-x: contain; } .discover-categories::-webkit-scrollbar { display: none; } .category-btn { padding: 0.5rem 1rem; border: 2px solid var(--gray-200); background: var(--bg-card); border-radius: 2rem; cursor: pointer; font-weight: 500; white-space: nowrap; font-size: 0.875rem; font-family: inherit; touch-action: manipulation; transition: all 0.15s; flex-shrink: 0; } @media (min-width: 768px) { .category-btn { padding: 0.75rem 1.5rem; font-size: 1rem; } } .category-btn.active { background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); color: white; border-color: transparent; } /* Content grid */ .content-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; width: 100%; max-width: 100%; box-sizing: border-box; overflow-x: hidden; } @media (min-width: 768px) { .content-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; } } /* Post card */ .post-card { background: var(--bg-card); border-radius: 1rem; overflow: hidden; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.1); transition: transform 0.2s, box-shadow 0.2s; width: 100%; max-width: 100%; box-sizing: border-box; position: relative; text-decoration: none; color: inherit; display: block; min-width: 0; } .post-card:hover { transform: translateY(-4px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); text-decoration: none; } .post-image { position: relative; aspect-ratio: 1; overflow: hidden; width: 100%; max-width: 100%; box-sizing: border-box; } .post-image img { width: 100%; height: 100%; max-width: 100%; object-fit: cover; display: block; transition: filter 0.3s; box-sizing: border-box; } .post-image-placeholder { width: 100%; aspect-ratio: 1 / 1; background: linear-gradient(135deg, rgba(124,58,237,.1), rgba(124,58,237,.25)); display: flex; align-items: center; justify-content: center; padding: 1rem; box-sizing: border-box; } .post-title-preview { font-weight: 600; color: var(--primary); text-align: center; font-size: 0.95rem; line-height: 1.4; } .post-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 100%); display: flex; align-items: flex-end; justify-content: center; padding: 1rem; opacity: 0; transition: opacity 0.2s; } .post-card:hover .post-overlay { opacity: 1; } .post-stats { display: flex; gap: 1.5rem; color: white; font-weight: 600; font-size: 0.9375rem; } .post-price-badge { position: absolute; top: 0.5rem; left: 0.5rem; background: rgba(255, 193, 7, 0.95); color: white; padding: 0.25rem 0.75rem; border-radius: 1rem; font-size: 0.875rem; font-weight: 600; } .tooltip-container { position: relative; } .tooltip { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 0.5rem; padding: 0.5rem 0.75rem; background: rgba(0,0,0,0.9); color: white; font-size: 0.75rem; white-space: nowrap; border-radius: 0.375rem; opacity: 0; pointer-events: none; transition: opacity 0.2s; z-index: 1000; } .tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 4px solid transparent; border-top-color: rgba(0,0,0,0.9); } .tooltip-container:hover .tooltip { opacity: 1; } .post-info { padding: 1rem; width: 100%; max-width: 100%; box-sizing: border-box; word-wrap: break-word; overflow-wrap: break-word; } .post-author { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; width: 100%; max-width: 100%; box-sizing: border-box; } .author-text { display: flex; flex-direction: column; } .author-name { font-size: 0.875rem; color: var(--gray-700); font-weight: 500; } .author-header-row { display: flex; align-items: center; gap: 0.25rem; flex-wrap: nowrap; } .post-title { font-size: 0.9375rem; color: var(--gray-900); font-weight: 500; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; width: 100%; max-width: 100%; box-sizing: border-box; word-wrap: break-word; overflow-wrap: break-word; } /* Creators grid */ .creators-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; width: 100%; max-width: 100%; box-sizing: border-box; overflow-x: hidden; } @media (min-width: 768px) { .creators-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.5rem; } } .creator-card { background: var(--bg-card); border-radius: 1rem; padding: 1.5rem; text-align: center; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.1); transition: transform 0.2s, box-shadow 0.2s; border: 1px solid var(--gray-200); width: 100%; max-width: 100%; box-sizing: border-box; text-decoration: none; color: inherit; display: block; min-width: 0; } .creator-card:hover { transform: translateY(-4px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); border-color: var(--primary); text-decoration: none; } .creator-avatar-wrapper { position: relative; display: inline-block; margin-bottom: 1rem; } .creator-avatar { width: 100px; height: 100px; border-radius: 50%; background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); background-size: cover; background-position: center; margin: 0 auto; border: 3px solid var(--gray-200); display: flex; align-items: center; justify-content: center; font-size: 2rem; font-weight: 700; color: white; } .creator-avatar.has-avatar { font-size: 0; border-color: var(--primary); } .verified-badge { position: absolute; bottom: 0; right: 0; width: 28px; height: 28px; background: #3B82F6; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 0.875rem; border: 3px solid white; } .creator-info { text-align: center; } .creator-name { font-size: 1.125rem; font-weight: 600; color: var(--gray-900); margin: 0 0 0.25rem 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .creator-username { font-size: 0.875rem; color: var(--gray-600); margin: 0; } /* Skeleton loading */ .loading-state { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } @media (min-width: 768px) { .loading-state { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; } } .skeleton-card { aspect-ratio: 1; background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-200) 50%, var(--gray-100) 75%); background-size: 200% 100%; animation: skeleton-loading 1.5s infinite; border-radius: 1rem; } @keyframes skeleton-loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Empty state */ .empty-state { text-align: center; padding: 4rem 2rem; } .empty-icon { font-size: 4rem; margin-bottom: 1rem; } .empty-state p { color: var(--gray-600); margin-bottom: 0.5rem; } .empty-hint { font-size: 0.875rem; color: var(--gray-500); } /* Mobile refinements */ @media (max-width: 767px) { .content-grid { gap: 0.625rem; } .creators-grid { gap: 0.625rem; } .post-info { padding: 0.5rem 0.625rem 0.75rem; } .creator-card { padding: 0.875rem 0.625rem; } .creator-avatar { width: 64px; height: 64px; font-size: 1.5rem; } .creator-name { font-size: 0.875rem; } .creator-username { font-size: 0.75rem; } /* Discover: Suche auf Mobile */ .unified-search-wrap { margin-bottom: 1rem; } /* Dropdown kleiner auf Mobile damit Tastatur Platz hat */ .unified-results { max-height: min(380px, calc(100dvh - 260px)); border-radius: 1rem; } /* Suchfeld auf Mobile etwas kompakter */ .unified-search-wrap > input[type="text"] { padding: .75rem 1rem .75rem 2.75rem; font-size: 0.9375rem; } } /* ══════════════════════════════════════════════ Trends ══════════════════════════════════════════════ */ /* Trends Grid – mobile-first */ .trends-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } @media (min-width: 641px) { .trends-grid { grid-template-columns: 1fr 1fr; } } .hashtag-card { background: var(--bg-card); border-radius: 1rem; padding: 1rem 1.25rem; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07); display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; cursor: pointer; transition: transform 0.15s; text-decoration: none; color: inherit; } .hashtag-card:hover { transform: translateX(4px); text-decoration: none; } .hashtag-name { font-weight: 600; color: var(--primary); font-size: 1rem; } .hashtag-count { font-size: 0.8rem; color: var(--gray-500); } /* ══════════════════════════════════════════════ Wallet ══════════════════════════════════════════════ */ .wallet-balance-card { background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); color: white; border-radius: 1.25rem; padding: 2rem; margin-bottom: 1.5rem; box-shadow: 0 8px 24px rgba(124, 58, 237, 0.35); } .balance-amount { font-size: 2.5rem; font-weight: 700; } .balance-label { opacity: 0.8; font-size: 0.9rem; margin-top: 0.25rem; } .transaction-item { display: flex; align-items: center; justify-content: space-between; padding: 0.875rem 0; border-bottom: 1px solid var(--gray-100); } .transaction-item:last-child { border-bottom: none; } .transaction-label { font-weight: 500; } .transaction-desc { font-size: 0.8rem; color: var(--gray-500); } .transaction-amount { font-weight: 700; } .transaction-amount.positive { color: var(--success); } .transaction-amount.negative { color: var(--danger); } /* ══════════════════════════════════════════════ Settings ══════════════════════════════════════════════ */ /* Settings – mobile-first */ .settings-container { max-width: 680px; width: 100%; margin: 0 auto; } .settings-section { background: var(--bg-card); border-radius: 0.875rem; margin-bottom: 1rem; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07); overflow: hidden; } .settings-section-title { padding: 0.875rem 1rem; font-weight: 600; border-bottom: 1px solid var(--gray-100); background: var(--gray-50); font-size: 0.9rem; } .settings-row { display: flex; align-items: center; justify-content: space-between; padding: 0.875rem 1rem; border-bottom: 1px solid var(--gray-100); gap: 0.75rem; min-height: 56px; } .settings-row:last-child { border-bottom: none; } .settings-label { font-weight: 500; font-size: 0.9375rem; line-height: 1.3; } .settings-desc { font-size: 0.8rem; color: var(--gray-500); margin-top: 0.2rem; line-height: 1.4; } /* Touch-Ziele in Settings-Rows */ .settings-row .btn-sm { min-height: 44px; white-space: nowrap; flex-shrink: 0; } /* Sehr kleine Screens: Button unter den Text umbrechen */ @media (max-width: 380px) { .settings-row { flex-wrap: wrap; padding: 0.75rem 0.875rem; } .settings-row .btn-sm { width: 100%; justify-content: center; } } /* Desktop: ursprüngliche Abstände wiederherstellen */ @media (min-width: 640px) { .settings-section { border-radius: 1rem; margin-bottom: 1.5rem; } .settings-section-title { padding: 1rem 1.5rem; font-size: 0.9375rem; } .settings-row { padding: 1rem 1.5rem; gap: 1rem; } } /* ══════════════════════════════════════════════ Messenger ══════════════════════════════════════════════ */ /* Messenger – mobile-first */ .messenger-layout { display: flex; flex-direction: column; gap: 1rem; height: calc(100dvh - 60px - env(safe-area-inset-top) - 1rem); } @media (min-width: 769px) { .messenger-layout { flex-direction: row; height: calc(100dvh - 4rem); } } .conversations-list { width: 100%; max-height: 35dvh; flex-shrink: 0; background: var(--bg-card); border-radius: 1rem; overflow-y: auto; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07); } @media (min-width: 769px) { .conversations-list { width: 280px; max-height: none; } } .conv-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.875rem 1rem; cursor: pointer; transition: background 0.15s; border-bottom: 1px solid var(--gray-100); text-decoration: none; color: inherit; } .conv-item:hover { background: var(--gray-50); text-decoration: none; } .conv-item.active { background: rgba(124, 58, 237, 0.08); } .conv-name { font-weight: 600; font-size: 0.9rem; } .conv-preview { font-size: 0.8rem; color: var(--gray-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chat-area { flex: 1; background: var(--bg-card); border-radius: 1rem; display: flex; flex-direction: column; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07); overflow: hidden; min-width: 0; } /* Mobile: zeige entweder Liste oder Chat, nie beides */ @media (max-width: 768px) { .conversations-list[data-mobile-hidden] { display: none; } .chat-area:not([data-mobile-active]) { display: none; } /* Body-Scroll sperren wenn Chat aktiv → korrekte Höhenberechnung */ body.chat-open { overflow: hidden; height: 100dvh; } body.chat-open .main-content { overflow: hidden; height: 100dvh; padding-bottom: 0; } body.chat-open .messenger-layout { height: calc(100dvh - 60px - env(safe-area-inset-top) - 1rem); } .conversations-list { max-height: none; padding-bottom: calc(3.5rem + env(safe-area-inset-bottom, 0px)); } .chat-area[data-mobile-active] { height: 100%; min-height: unset; border-radius: 0; } .chat-area[data-mobile-active] .chat-messages { touch-action: pan-y; overscroll-behavior-y: contain; } } .chat-back-btn { display: none; margin-right: .75rem; color: var(--primary); font-weight: 600; text-decoration: none; } @media (max-width: 768px) { .chat-back-btn { display: inline-flex; align-items: center; padding: .5rem .75rem .5rem 0; min-height: 44px; touch-action: manipulation; } } .chat-header { padding: 1rem 1.25rem; border-bottom: 1px solid var(--gray-100); font-weight: 600; display: flex; align-items: center; } .chat-messages { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem; } .msg { max-width: 70%; padding: 0.625rem 0.875rem; border-radius: 1rem; font-size: 0.9rem; line-height: 1.5; } .msg.own { align-self: flex-end; background: var(--primary); color: white; border-radius: 1rem 1rem 0 1rem; } .msg.other { align-self: flex-start; background: var(--gray-100); border-radius: 1rem 1rem 1rem 0; } .msg-time { font-size: 0.65rem; opacity: 0.6; margin-top: 0.2rem; display: block; } .chat-input-area { display: flex; gap: 0.75rem; padding: 1rem; padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--gray-100); } .chat-input-area input { flex: 1; padding: 0.625rem 1rem; border: 2px solid var(--gray-200); border-radius: 2rem; font-size: 0.9rem; font-family: inherit; } .chat-input-area input:focus { outline: none; border-color: var(--primary); } .send-btn { padding: 0.625rem 1.25rem; border-radius: 2rem; border: none; background: var(--primary); color: white; cursor: pointer; font-family: inherit; font-weight: 600; touch-action: manipulation; } /* ══════════════════════════════════════════════ Loading / Empty States ══════════════════════════════════════════════ */ .loading-state { text-align: center; padding: 3rem; color: var(--gray-400); } .loading-spinner { width: 40px; height: 40px; border: 4px solid var(--gray-200); border-top-color: var(--primary); border-radius: 50%; animation: spin 0.7s linear infinite; margin: 0 auto 1rem; } @keyframes spin { to { transform: rotate(360deg); } } .empty-state { text-align: center; padding: 3rem; color: var(--gray-500); } .empty-icon { font-size: 3rem; margin-bottom: 1rem; } /* ══════════════════════════════════════════════ Dialog / Modal ══════════════════════════════════════════════ */ .dialog-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); z-index: 600; display: flex; align-items: center; justify-content: center; padding: 1rem; } .dialog { background: var(--bg-card); border-radius: 1rem; width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35); } .dialog-header { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--gray-200); } .dialog-header h2 { margin: 0; font-size: 1.1rem; } .dialog-close { background: none; border: none; font-size: 1.1rem; cursor: pointer; color: var(--gray-500); } .dialog-body { padding: 1.5rem; } .dialog-footer { padding: 1rem 1.5rem; border-top: 1px solid var(--gray-100); display: flex; justify-content: flex-end; gap: 0.75rem; } /* ══════════════════════════════════════════════ Pagination ══════════════════════════════════════════════ */ .pagination { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 1.5rem; color: var(--gray-600); } .pagination button { padding: 0.5rem 1rem; border: 1px solid var(--gray-300); border-radius: 0.5rem; background: var(--bg-card); cursor: pointer; font-size: 0.9rem; font-family: inherit; } .pagination button:disabled { opacity: 0.4; cursor: not-allowed; } .pagination button:not(:disabled):hover { background: var(--gray-100); } /* ══════════════════════════════════════════════ Personen-Suche (Entdecken → Personen-Tab) ══════════════════════════════════════════════ */ .people-search-wrap { max-width: 540px; margin: 0 auto; } .people-search-bar { position: relative; margin-bottom: 0.5rem !important; } .people-hint { text-align: center; font-size: 0.85rem; color: var(--gray-500); margin-top: 0.25rem; min-height: 1.2em; } /* Ergebnisliste */ .people-results { display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: var(--surface, #fff); border: 1.5px solid var(--gray-200); border-radius: 1rem; box-shadow: 0 8px 24px rgba(0,0,0,.10); z-index: 200; overflow: hidden; max-height: 420px; overflow-y: auto; } /* dunkles Theme */ [data-theme="dark"] .people-results, .dark .people-results { background: var(--surface, #1e1e2e); border-color: var(--gray-700, #3a3a4a); } .people-result-item { display: flex; align-items: center; gap: 0.875rem; padding: 0.75rem 1rem; text-decoration: none; color: inherit; transition: background 0.15s; border-bottom: 1px solid var(--gray-100); } .people-result-item:last-child { border-bottom: none; } .people-result-item:hover, .people-result-item:focus { background: var(--gray-50, #f8f8fb); outline: none; } [data-theme="dark"] .people-result-item:hover, .dark .people-result-item:hover { background: rgba(255,255,255,.06); } .people-result-info { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; } .people-result-name { font-weight: 600; font-size: 0.92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .people-result-user { font-size: 0.8rem; color: var(--gray-500); } /* Lade- / Leer-Zustände */ .people-result-loading, .people-result-empty { padding: 1.25rem 1rem; text-align: center; color: var(--gray-500); font-size: 0.9rem; } /* Avatar in der Ergebnisliste kleiner */ .people-result-item .creator-avatar { width: 44px; height: 44px; font-size: 1.1rem; flex-shrink: 0; } .people-result-item .creator-avatar-wrapper { flex-shrink: 0; } /* ══════════════════════════════════════════════ Vereinte Suche – Entdecken (unified search) ══════════════════════════════════════════════ */ /* ── Wrapper (gibt Positionskontext für das Dropdown) ── */ .unified-search-wrap { position: relative; margin-bottom: 1.5rem; z-index: 10; /* Stacking-Context für Dropdown über Content-Grid */ isolation: isolate; } /* ── Sucheingabe ── */ .unified-search-wrap > input[type="text"] { display: block; width: 100%; box-sizing: border-box; padding: .875rem 1.25rem .875rem 3rem; border: 2px solid var(--gray-200, #e5e7eb); border-radius: 3rem; font-size: 1rem; font-family: inherit; color: inherit; background-color: var(--surface, #fff); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 1.1rem center; transition: border-color .2s, box-shadow .2s; -webkit-appearance: none; } .unified-search-wrap > input[type="text"]:focus { outline: none; border-color: var(--primary, #7c3aed); box-shadow: 0 0 0 4px rgba(124,58,237,.12); } [data-theme="dark"] .unified-search-wrap > input[type="text"], .dark .unified-search-wrap > input[type="text"] { background-color: var(--surface, #1e1e2e); border-color: var(--gray-700, #3f3f5a); color: var(--text, #f1f1f9); } /* ── Dropdown-Container ── */ .unified-results { display: none; position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: var(--bg-card); border-radius: 1.25rem; border: 1.5px solid rgba(0,0,0,.07); box-shadow: 0 4px 6px -1px rgba(0,0,0,.06), 0 16px 40px rgba(0,0,0,.13); z-index: 999; overflow: hidden; /* Viewport-bewusste Höhe: auf Mobile mit Tastatur nicht abschneiden */ max-height: min(500px, calc(100dvh - 220px)); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; /* iOS smooth scroll */ /* smooth scrollbar */ scrollbar-width: thin; scrollbar-color: rgba(0,0,0,.15) transparent; } [data-theme="dark"] .unified-results, .dark .unified-results { background: #1e1e2e; border-color: rgba(255,255,255,.1); box-shadow: 0 4px 6px -1px rgba(0,0,0,.3), 0 20px 48px rgba(0,0,0,.4); } /* ── Gruppen-Trenner (HASHTAGS / PERSONEN) ── */ .usr-group-label { display: flex; align-items: center; gap: .75rem; padding: .55rem 1.1rem .4rem; } .usr-group-label span { font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--gray-400, #a1a1aa); white-space: nowrap; } .usr-group-label::before, .usr-group-label::after { content: ''; flex: 1; height: 1px; background: var(--gray-100, #f4f4f5); } [data-theme="dark"] .usr-group-label::before, [data-theme="dark"] .usr-group-label::after, .dark .usr-group-label::before, .dark .usr-group-label::after { background: rgba(255,255,255,.08); } /* ── Basis-Zeilenstil ── */ .usr-item { display: flex !important; align-items: center; gap: .85rem; padding: .7rem 1.1rem; text-decoration: none !important; color: inherit !important; transition: background .12s; cursor: pointer; border-bottom: 1px solid var(--gray-100, #f4f4f5); min-height: 56px; /* gut tappbar auf Mobilgeräten */ /* iOS Safari: mit display:flex benötigt explizites width */ width: 100%; box-sizing: border-box; } .usr-item:last-child { border-bottom: none; } .usr-item:hover, .usr-item:focus, .usr-item--focused { background: var(--gray-50, #f9f9fb) !important; outline: none; } [data-theme="dark"] .usr-item:hover, [data-theme="dark"] .usr-item--focused, .dark .usr-item:hover, .dark .usr-item--focused { background: rgba(255,255,255,.06) !important; } /* Chevron rechts */ .usr-item-chevron { margin-left: auto; font-size: 1.1rem; color: var(--gray-300, #d4d4d8); flex-shrink: 0; line-height: 1; } /* Info-Block (Mitte) */ .usr-item-body { display: flex; flex-direction: column; gap: .05rem; min-width: 0; flex: 1; } /* ── Hashtag-Zeile ── */ .usr-tag-icon { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%); color: var(--primary, #7c3aed); display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 1.1rem; flex-shrink: 0; line-height: 1; } [data-theme="dark"] .usr-tag-icon, .dark .usr-tag-icon { background: linear-gradient(135deg, rgba(124,58,237,.3) 0%, rgba(109,40,217,.3) 100%); color: #a78bfa; } .usr-tag-name { font-size: .96rem; font-weight: 600; color: var(--text, #18181b); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } [data-theme="dark"] .usr-tag-name, .dark .usr-tag-name { color: #f1f1f9; } .usr-tag-count { font-size: .76rem; color: var(--gray-400, #a1a1aa); white-space: nowrap; flex-shrink: 0; } /* ── User-Zeile ── */ .usr-avatar-wrap { flex-shrink: 0; position: relative; } .usr-avatar { display: block; width: 42px; height: 42px; border-radius: 50%; object-fit: cover; } img.usr-avatar { border: 2px solid var(--gray-100, #f4f4f5); } span.usr-avatar--init { display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1rem; color: #fff; letter-spacing: -.01em; } .usr-user-name { font-size: .95rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text, #18181b); display: flex; align-items: center; gap: .25rem; } [data-theme="dark"] .usr-user-name, .dark .usr-user-name { color: #f1f1f9; } .usr-user-handle { font-size: .82rem; color: var(--gray-500, #71717a); } /* Mini-Badges */ .usr-badge { display: inline-flex; align-items: center; justify-content: center; font-size: .7rem; line-height: 1; } .usr-badge--verified { background: var(--primary, #7c3aed); color: #fff; border-radius: 50%; width: 15px; height: 15px; font-weight: 700; } .usr-badge--club { font-size: .75rem; } /* ── Lade-Animation (drei Punkte) ── */ .usr-loading { display: flex; justify-content: center; align-items: center; gap: .4rem; padding: 1.5rem 1rem; } .usr-loading-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--primary, #7c3aed); opacity: .4; animation: usrDotBounce 1.2s ease-in-out infinite both; } .usr-loading-dot:nth-child(2) { animation-delay: .2s; } .usr-loading-dot:nth-child(3) { animation-delay: .4s; } @keyframes usrDotBounce { 0%, 80%, 100% { transform: scale(.7); opacity: .3; } 40% { transform: scale(1); opacity: 1; } } /* ── Leer-Zustand ── */ .usr-empty { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 1.75rem 1rem; color: var(--gray-400, #a1a1aa); font-size: .9rem; } .usr-empty-icon { font-size: 1.75rem; line-height: 1; }