/* watchedIT – optimierte CSS (08/2025) Dieses Stylesheet fasst Dark & Light Mode zusammen. - Light-Mode via - Dark-Mode via - Duplikate entfernt, kaputte Platzhalter beseitigt, fehlende Klammern ergänzt. */ /* =============================== Design Tokens =============================== */ :root { --accent: #1a9990; --accent-dark: #20b9b3; --accent-700: #0e7490; /* dunklere Akzent-Variante für Text */ --ink-on-accent: #0b1f24; /* Textfarbe auf Akzentflächen */ /* Dark Defaults (werden nur genutzt, wenn body.dark aktiv ist) */ --bg: #17191C; --card: #23252a; --card-light: #1F2225; --text: #F7F7F7; --text-soft: #b0bec5; --header: #000000; --shadow: 0 2px 24px rgba(0, 0, 0, 0.16); --radius-main: 13px; /* Cards, Modal, Accordion */ --radius-img: 6px; /* Poster, kleine Elemente */ } /* =============================== Scrollbars & Motion =============================== */ ::-webkit-scrollbar { width: 8px; background: #252730; } ::-webkit-scrollbar-thumb { background: var(--accent-dark); border-radius: 4px; } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } /* =============================== Header / Navbar – Modus-spezifisch =============================== */ /* Hamburger/Icon */ body.dark .navbar-toggle-icon { color: var(--accent) !important; fill: var(--accent) !important; } body.light .navbar-toggle-icon { color: var(--accent-dark) !important; fill: var(--accent-dark) !important; } .navbar-toggler { border: 0 !important; } .navbar-toggler:focus { box-shadow: none; } /* Linkfarben */ body.dark .nav-link, body.dark .navbar-brand, body.dark .offcanvas-title, body.dark .logo-text { color: #f2f2f2 !important; } body.dark .nav-link.active, body.dark .nav-link:focus, body.dark .nav-link:hover { color: var(--accent) !important; border: 1px solid var(--accent) !important; background: transparent !important; } body.light .nav-link, body.light .navbar-brand, body.light .offcanvas-title, body.light .logo-text { color: #0b1320 !important; } body.light .nav-link.active, body.light .nav-link:focus, body.light .nav-link:hover { color: var(--accent-dark) !important; border: 1px solid var(--accent-dark) !important; background: transparent !important; } /* =============================== Page-Specific Dark Mode Fallback =============================== */ /* Login-Seite: Dark Mode als Standard wenn keine Klasse gesetzt */ body.page-login:not(.dark):not(.light) { background-color: var(--bg); color: var(--text); } body.page-login:not(.dark):not(.light) .btn-primary { background-color: #232629; color: var(--accent-dark); border: 1px solid var(--accent-dark); } body.page-login:not(.dark):not(.light) .btn-primary:hover { background-color: var(--accent-dark); color: var(--ink-on-accent); border-color: var(--accent-dark); } /* =============================== Forms & Buttons =============================== */ .form-label, .form-control, .form-select, .btn-success, .btn-outline-secondary { font-size: 1.07em; } .form-control, .form-select { background: var(--card-light) !important; color: #fff !important; border: 1.5px solid var(--accent) !important; border-radius: 0.375rem !important; } .form-control:focus, .form-select:focus { border-color: var(--accent) !important; outline: none; } .btn-outline-accent { border: 1.5px solid var(--accent) !important; color: var(--accent) !important; background: transparent !important; } .btn-outline-accent:active, .btn-outline-accent:focus, .btn-outline-accent:hover { background: var(--accent) !important; color: #1b232a !important; border-color: var(--accent) !important; } .btn-accent { background: var(--accent) !important; color: #0b1720 !important; border: 1.5px solid var(--accent) !important; font-weight: 600; padding: 0.5rem 1rem; border-radius: var(--radius-main) !important; transition: all 0.2s ease; } .btn-accent:hover, .btn-accent:focus { background: var(--accent-dark) !important; color: #0b1720 !important; border-color: var(--accent-dark) !important; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(52, 216, 225, 0.3); } /* Action Button für group detail */ .watchedit-btn-action { background: var(--card); color: var(--accent); border: 1.5px solid rgba(52, 216, 225, 0.3); border-radius: var(--radius-main); padding: 1em 0.8em; display: flex; flex-direction: column; align-items: center; gap: 0.5em; cursor: pointer; transition: all 0.2s ease; font-weight: 600; font-size: 0.9em; } .watchedit-btn-action i { font-size: 1.8em; } .watchedit-btn-action:hover { background: rgba(52, 216, 225, 0.1); border-color: var(--accent); transform: translateY(-2px); color: var(--accent); } .watchedit-btn-action:active { transform: translateY(0); } /* Kleinere Variante für kompakte Darstellung */ .watchedit-btn-action-sm { background: var(--card); color: var(--accent); border: 1.5px solid rgba(52, 216, 225, 0.3); border-radius: var(--radius-main); padding: 0.6em 0.4em; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3em; cursor: pointer; transition: all 0.2s ease; font-weight: 600; font-size: 0.75em; min-height: 75px; } .watchedit-btn-action-sm span { text-align: center; line-height: 1.2; } .watchedit-btn-action-sm i { font-size: 1.5em; } .watchedit-btn-action-sm:hover { background: rgba(52, 216, 225, 0.1); border-color: var(--accent); transform: translateY(-2px); color: var(--accent); } .watchedit-btn-action-sm:active { transform: translateY(0); } body.dark .btn.btn-accent.w-100 { border: 1px solid var(--accent-dark); color: var(--accent-dark); } body.dark input::placeholder { color: #ffffff; opacity: 0.8; } /* =============================== Card List / Cards (Farben in Modus-Abschnitten) =============================== */ .watchedit-card-list { display: flex; flex-direction: column; gap: 1.2em; margin: 1.5em 0; } .watchedit-card { display: flex; align-items: center; gap: 1.3em; cursor: pointer; position: relative; padding: 0.8em 1em; border-radius: var(--radius-main); box-shadow: var(--shadow); transition: box-shadow 0.2s, transform 0.35s cubic-bezier(.23, 1.1, .32, 1); z-index: 1; touch-action: pan-y; overflow: visible; border: 1px solid transparent; } .watchedit-card:active, .watchedit-card:focus { box-shadow: 0 2px 36px var(--accent); border: 1.5px solid var(--accent); } .watchedit-card.swiping { transition: none; } .watchedit-poster-mini { width: 68px; height: 95px; border-radius: var(--radius-img) !important; object-fit: cover; background: #22272a; box-shadow: 0 2px 8px rgba(52, 216, 225, 0.06); } .watchedit-card-content { flex: 0.85; } .watchedit-card-list .watchedit-card-content { flex: 0.95; } .page-list_items .watchedit-card-list .watchedit-card-content { flex: 0.85; } .watchedit-card-title { margin-bottom: .18em; font-size: 1.15em; font-weight: 600; letter-spacing: .2px; } .watchedit-card-meta { color: var(--text-soft); font-size: .89em; } .watchedit-card-actions { display: flex; flex-direction: column; gap: .5em; } .icon-btn { background: none; border: none; color: var(--accent); font-size: 1.42em; border-radius: 50%; transition: background .12s, color .12s; padding: .16em; } .icon-btn:active, .icon-btn:focus, .icon-btn:hover { background: var(--accent); color: #0b1720; } /* Swipe-Hintergründe */ .swipe-bg { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; display: flex; align-items: center; justify-content: center; font-size: 1.8em; transition: background 0.16s, opacity 0.18s; } .swipe-bg.left { background: linear-gradient(90deg, #e85151 0%, #e85151 80%, transparent 100%); color: #fff; justify-content: flex-end; padding-right: 1.2em; } .swipe-bg.right { background: linear-gradient(270deg, var(--accent) 0%, var(--accent) 80%, transparent 100%); color: #fff; justify-content: flex-start; padding-left: 1.2em; } /* Wrapper für Swipe-Karten */ .watchedit-card-wrapper { position: relative; } .watchedit-card-wrapper .watchedit-card { position: relative; z-index: 2; } /* Unread Count Badge (Kreis) */ .unread-count-badge { position: absolute; top: 0.5rem; right: 0.5rem; background: #dc3545; color: #fff; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 600; z-index: 10; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } /* Listen-Cards mit Swipe-Unterstützung */ .list-card { position: relative; z-index: 2; cursor: pointer; user-select: none; transition: transform 0.3s ease; } .list-card.swiping { transition: none; } /* Icon für Listen */ .list-card .watchedit-card-icon { font-size: 2.5em; color: var(--accent); opacity: 0.9; display: flex; align-items: center; justify-content: center; min-width: 60px; } /* Geteilte Listen - ohne Swipe */ .list-card-shared { position: relative; z-index: 2; cursor: pointer; user-select: none; } .list-card-shared .watchedit-card-icon { font-size: 2.5em; color: var(--accent); opacity: 0.7; display: flex; align-items: center; justify-content: center; min-width: 60px; } /* Listenbild in Cards */ .list-image { width: 60px; height: 60px; object-fit: cover; border-radius: 6px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } /* Item-Count Badges in Listen-Cards */ .list-item-count { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; } .count-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 0.75rem; padding: 2px 5px; border-radius: 5px; font-weight: 500; transition: all 0.2s ease; letter-spacing: 0.2px; } .count-label { font-weight: 400; opacity: 0.85; } .count-number { font-weight: 600; font-size: 0.85em; } /* Dark Mode Badge Styles */ body.dark .count-badge.movie { background: rgba(13, 202, 240, 0.15); color: #0dcaf0; border: 1px solid rgba(13, 202, 240, 0.3); } body.dark .count-badge.series { background: rgba(157, 56, 251, 0.15); color: #ffffff; border: 1px solid rgba(157, 56, 251, 0.3); } body.dark .count-badge.doku { background: rgba(52, 216, 225, 0.15); color: var(--accent); border: 1px solid rgba(52, 216, 225, 0.3); } body.dark .count-badge.pinned { background: rgba(255, 193, 7, 0.15); color: #ffc107; border: 1px solid rgba(255, 193, 7, 0.3); } body.dark .count-badge.followers { background: rgba(108, 117, 125, 0.15); color: #adb5bd; border: 1px solid rgba(108, 117, 125, 0.3); } body.dark .count-badge.follow-badge { background: rgba(52, 216, 225, 0.15); color: var(--accent); border: 1px solid rgba(52, 216, 225, 0.3); transition: all 0.2s; } body.dark .count-badge.follow-badge:hover { background: rgba(52, 216, 225, 0.25); } body.dark .count-badge.follow-badge.following { background: rgba(40, 167, 69, 0.15); color: #28a745; border: 1px solid rgba(40, 167, 69, 0.3); } body.dark .count-badge.follow-badge.following:hover { background: rgba(220, 53, 69, 0.15); color: #dc3545; border: 1px solid rgba(220, 53, 69, 0.3); } /* Light Mode Badge Styles */ body.light .count-badge.movie { background: rgba(13, 202, 240, 0.1); color: #0891b2; border: 1px solid rgba(13, 202, 240, 0.25); } body.light .count-badge.series { background: rgba(157, 56, 251, 0.1); color: #7c3aed; border: 1px solid rgba(157, 56, 251, 0.25); } body.light .count-badge.doku { background: rgba(32, 185, 179, 0.1); color: var(--accent-dark); border: 1px solid rgba(32, 185, 179, 0.25); } body.light .count-badge.pinned { background: rgba(255, 193, 7, 0.1); color: #d97706; border: 1px solid rgba(255, 193, 7, 0.25); } body.light .count-badge.followers { background: rgba(108, 117, 125, 0.1); color: #495057; border: 1px solid rgba(108, 117, 125, 0.25); } body.light .count-badge.follow-badge { background: rgba(32, 185, 179, 0.1); color: var(--accent-dark); border: 1px solid rgba(32, 185, 179, 0.25); transition: all 0.2s; } body.light .count-badge.follow-badge:hover { background: rgba(32, 185, 179, 0.2); } body.light .count-badge.follow-badge.following { background: rgba(40, 167, 69, 0.1); color: #28a745; border: 1px solid rgba(40, 167, 69, 0.25); } body.light .count-badge.follow-badge.following:hover { background: rgba(220, 53, 69, 0.1); color: #dc3545; border: 1px solid rgba(220, 53, 69, 0.25); } /* List Image Preview in Edit Modal */ .list-image-preview { display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; border: 2px solid var(--border-color, #ddd); border-radius: 8px; overflow: hidden; background: var(--card-background, #fff); } .list-image-preview-img { width: 100%; height: 100%; object-fit: cover; } /* Edit List Button in Share Modal */ .edit-list-button-container { padding-bottom: 16px; margin-bottom: 16px; border-bottom: 2px solid var(--accent); } #btnEditListFromShare { font-size: 1rem; font-weight: 600; padding: 12px 20px; border: 1px solid var(--accent) !important; background: transparent; transition: all 0.3s ease; position: relative; overflow: hidden; } /* Dark Mode Button */ body.dark #btnEditListFromShare { color: var(--accent); } body.dark #btnEditListFromShare:hover { background: var(--accent); color: #000; box-shadow: 0 0 25px rgba(52, 216, 225, 0.4); transform: translateY(-2px); } body.dark #btnEditListFromShare::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(52, 216, 225, 0.3), transparent); transition: left 0.5s; } body.dark #btnEditListFromShare:hover::before { left: 100%; } /* Light Mode Button */ body.light #btnEditListFromShare { color: var(--accent-dark); border-color: var(--accent-dark) !important; box-shadow: 0 0 15px rgba(32, 185, 179, 0.2); } body.light #btnEditListFromShare:hover { background: var(--accent-dark); color: #fff; box-shadow: 0 0 25px rgba(32, 185, 179, 0.4); transform: translateY(-2px); } body.light #btnEditListFromShare::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(32, 185, 179, 0.3), transparent); transition: left 0.5s; } body.light #btnEditListFromShare:hover::before { left: 100%; } /* Status-Overlay & Icons */ .card-status-spot { position: absolute; top: 8px; right: 11px; font-size: 1.4em; z-index: 5; } .card-status-spot .status-favorit { color: #ffd700 !important; } .card-status-spot .status-gesehen { color: #23ff83 !important; } .card-status-spot .status-dabei { color: #e23434 !important; } .card-status-spot-mid { position: absolute; top: 50%; right: 16px; transform: translateY(-50%); z-index: 6; display: flex; align-items: center; font-size: 2.5em; height: 100%; } .status-icon-bg { display: flex; align-items: center; justify-content: center; width: 1.2em; height: 1.2em; font-size: 0.6em; } .status-icon-bg.favorit i { color: #2de9e6; font-size: 0.7em; } .status-icon-bg.gesehen i { color: #9d38fb; font-size: 0.7em; } .status-icon-bg.laeuft i { background: linear-gradient(135deg, #2de9e6 10%, #9d38fb 90%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; color: #9d38fb; font-size: 0.7em; } .icon-gradient-favorit { color: #2de9e6; filter: drop-shadow(0 0 2px #2de9e6); } .icon-gradient-gesehen { color: #9d38fb; filter: drop-shadow(0 0 3px #9d38fb); } .icon-gradient-dabei { background: linear-gradient(135deg, #2de9e6 20%, #9d38fb 80%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 2px #2de9e6); } /* =============================== Modal (Details) =============================== */ .watchedit-modal { display: none; position: fixed; inset: 0; background: rgba(20, 28, 32, 0.88); z-index: 1200; justify-content: center; align-items: flex-start; max-width: 100vw; overflow-x: hidden; overflow-y: auto; padding: 20px 0; } .watchedit-modal.show { display: flex !important; } .watchedit-modal-content { position: relative; background: var(--card); color: var(--text); border-radius: var(--radius-main) !important; padding: 2em 1.5em 1em; max-width: 430px; width: 95vw; max-height: 85vh; overflow-y: auto; box-shadow: 0 2px 40px rgba(0, 0, 0, 0.38); margin: 20px auto; overflow-x: hidden; } .watchedit-modal-close { position: absolute; top: 10px; right: 10px; background: #232a33; color: #34d8e1; border: none; border-radius: 50%; width: 34px; height: 34px; font-size: 1.5em; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 8px #0007; transition: background .18s; cursor: pointer; z-index: 10; } .watchedit-modal-close:hover { background: var(--accent); color: #181c1f; } /* Modal Header, Body, Footer */ .watchedit-modal-header { margin-bottom: 1.5em; } .watchedit-modal-header h5 { font-size: 1.4em; font-weight: 700; margin: 0; } .watchedit-modal-header .btn-close { position: absolute; top: 10px; right: 10px; background: #232a33; color: var(--accent); border: none; border-radius: 50%; width: 34px; height: 34px; font-size: 1.5em; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 8px #0007; transition: background .18s; cursor: pointer; z-index: 10; } .watchedit-modal-header .btn-close:hover { background: var(--accent); color: #181c1f; } .watchedit-modal-body { margin-bottom: 1.5em; } .watchedit-modal-footer { display: flex; gap: 0.75em; justify-content: flex-end; } #modalContentInner img { max-width: 140px; border-radius: 19px; float: left; margin: 0 1.2em 1.2em 0; box-shadow: 0 1.5px 12px var(--accent-dark); } .video-responsive { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; margin-top: 1.1em; border-radius: 1em; } .video-responsive iframe { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 1em; box-shadow: var(--shadow); } #modalContentInner .text-center.mt-3 a { color: #ffffff; } #modalContentInner .text-center.mt-3 .small.text-muted.mt-2 { color: #ffffff !important; } /* =============================== Status-Select Modal =============================== */ /* Modal Container */ .status-modal-inner { position: relative; width: 100%; max-width: 520px; margin: 60px auto 20px; } /* Close Button */ .modal-close-btn { position: absolute; top: -12px; right: -12px; background: var(--accent); border: none; width: 38px; height: 38px; border-radius: 50%; color: #0b1f24; font-size: 20px; cursor: pointer; z-index: 10; box-shadow: 0 4px 12px rgba(52, 216, 225, 0.3); transition: all 0.2s; } .modal-close-btn:hover { background: var(--accent-dark); transform: rotate(90deg); } /* Modal Content */ .status-select-content { background: linear-gradient(135deg, #232c37 0%, #1e2630 100%); border-radius: 16px; padding: 2.5em 2em 2em; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(52, 216, 225, 0.1); } /* Modal List Title */ .modal-list-title { font-size: 1.1rem; font-weight: 600; color: var(--accent); text-align: center; margin: 0 0 1.5rem 0; padding-bottom: 1rem; border-bottom: 2px solid rgba(52, 216, 225, 0.2); } body.light .modal-list-title { color: var(--accent-dark); border-bottom-color: rgba(32, 185, 179, 0.2); } /* Fix für Checkbox-Interaktion im Modal */ .status-select-content .form-check { pointer-events: auto; position: relative; z-index: 2; } .status-select-content .form-check-input { cursor: pointer; pointer-events: auto; } .status-select-content .form-check-label { cursor: pointer; pointer-events: auto; } /* =============================== Bootstrap Modal Overrides (Light/Dark) =============================== */ /* Dark Mode - Standard */ body.dark .modal-content { background: var(--card) !important; color: var(--text) !important; border: 1px solid rgba(52, 216, 225, 0.15); border-radius: var(--radius-main) !important; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4); } body.dark .modal-header { background: var(--card) !important; border-bottom: 1px solid rgba(52, 216, 225, 0.15); color: var(--text) !important; } body.dark .modal-body { background: var(--card) !important; color: var(--text) !important; } body.dark .modal-footer { background: var(--card) !important; border-top: 1px solid rgba(52, 216, 225, 0.15); } body.dark .modal-title { color: var(--text) !important; } body.dark .btn-close { background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2334D8E1'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat !important; opacity: 1 !important; filter: brightness(1); } body.dark .btn-close:hover { opacity: 0.8 !important; } /* Dark Mode - Bootstrap Cards (analog zu Modals) */ body.dark .card { background: var(--card) !important; color: var(--text) !important; border: 1px solid rgba(52, 216, 225, 0.15); box-shadow: var(--shadow); } body.dark .card-header { background: var(--card) !important; border-bottom: 1px solid rgba(52, 216, 225, 0.15); color: var(--text) !important; } body.dark .card-body { background: var(--card) !important; color: var(--text) !important; } body.dark .form-control, body.dark .form-select, body.dark input[type="number"], body.dark input[type="date"], body.dark input[type="datetime-local"], body.dark input[type="text"], body.dark textarea { background: var(--card-light) !important; border: 1px solid rgba(52, 216, 225, 0.3) !important; color: var(--text) !important; } body.dark .form-control:focus, body.dark .form-select:focus, body.dark input[type="date"]:focus, body.dark input[type="datetime-local"]:focus { background: var(--card) !important; border-color: var(--accent) !important; color: var(--text) !important; box-shadow: 0 0 0 0.2rem rgba(26, 153, 144, 0.25) !important; } /* Light Mode - Bootstrap Modals */ body.light .modal-content { background: var(--card) !important; color: var(--text) !important; border: 1px solid rgba(32, 185, 179, 0.2); border-radius: var(--radius-main) !important; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15); } body.light .modal-header { background: var(--card) !important; border-bottom: 1px solid rgba(32, 185, 179, 0.2); color: var(--text) !important; } body.light .modal-body { background: var(--card) !important; color: var(--text) !important; } body.light .modal-footer { background: var(--card) !important; border-top: 1px solid rgba(32, 185, 179, 0.2); } body.light .modal-title { color: var(--text) !important; } /* Light Mode - Bootstrap Cards (analog zu Modals) */ body.light .card { background: var(--card) !important; color: var(--text) !important; border: 1px solid rgba(32, 185, 179, 0.2); box-shadow: var(--shadow); } body.light .card-header { background: var(--card) !important; border-bottom: 1px solid rgba(32, 185, 179, 0.2); color: var(--text) !important; } body.light .card-body { background: var(--card) !important; color: var(--text) !important; } body.light .form-control, body.light .form-select, body.light input[type="number"] { background: #ffffff !important; border: 1px solid #c7d2de; color: var(--text) !important; } body.light .form-control:focus, body.light .form-select:focus { border-color: var(--accent); } body.light .btn-close { background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2320b9b3'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat !important; opacity: 1 !important; } body.light .btn-close:hover { opacity: 0.7 !important; } /* Modal Backdrop */ body.dark .modal-backdrop { background-color: rgba(0, 0, 0, 0.7); } body.light .modal-backdrop { background-color: rgba(0, 0, 0, 0.4); } /* Form-Elemente in Modals */ body.light .modal-content .form-control, body.light .modal-content .form-select { background: var(--card-light) !important; color: var(--text) !important; border: 1.5px solid rgba(32, 185, 179, 0.2) !important; } body.light .modal-content .form-control:focus, body.light .modal-content .form-select:focus { border-color: var(--accent-dark) !important; background: #ffffff !important; } body.light .modal-content .form-text { color: var(--text-soft) !important; } /* Status Section */ .status-section { margin-bottom: 2em; padding-bottom: 1.5em; border-bottom: 1px solid rgba(52, 216, 225, 0.15); } .section-title { font-size: 0.85em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.5); margin-bottom: 1.2em; text-align: center; } /* Status Buttons Container */ .status-buttons { display: flex; justify-content: center; gap: 0.6em; flex-wrap: nowrap; } .status-choice-text { background: rgba(255, 255, 255, 0.03); border: 2px solid transparent; border-radius: 12px; padding: 1em 0.5em; flex: 1; min-width: 0; cursor: pointer; transition: all 0.2s; display: flex; flex-direction: column; align-items: center; gap: 0.4em; font-weight: 600; font-size: 0.9em; color: #fff; } .status-choice-text:hover { transform: translateY(-4px); border-color: currentColor; background: rgba(255, 255, 255, 0.06); } .status-choice-text:active { transform: translateY(-2px); } .status-choice-text.active { border-color: transparent; background: rgba(255, 255, 255, 0.08); box-shadow: 0 0 20px rgba(52, 216, 225, 0.6), 0 0 40px rgba(52, 216, 225, 0.3), inset 0 0 20px rgba(52, 216, 225, 0.1); transform: scale(1.05); } .status-icon-big { font-size: 1.8em; display: flex; align-items: center; justify-content: center; height: 1.2em; } .status-icon-big.favorit { color: #2de9e6; } .status-icon-big.gesehen { color: #9d38fb; } .status-icon-big.laeuft { background: linear-gradient(135deg, #2de9e6 20%, #9d38fb 80%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .status-label { font-weight: 600; font-size: 1em; color: #fff; letter-spacing: 0.02em; } /* Settings Section */ .settings-section { margin-bottom: 2em; } /* Error Card */ .error-card { text-align: center; padding: 3em 2em; background: var(--card); border-radius: var(--radius-main); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); max-width: 500px; margin: 0 auto; } .error-icon { font-size: 4em; color: var(--accent-dark); margin-bottom: 0.5em; } .error-title { font-size: 1.5em; font-weight: 700; color: var(--text); margin-bottom: 0.5em; } .error-message { font-size: 1em; color: var(--text); opacity: 0.7; margin-bottom: 2em; line-height: 1.6; } .btn-error-home { display: inline-flex; align-items: center; gap: 0.5em; padding: 0.8em 2em; background: var(--accent); color: white; text-decoration: none; border-radius: var(--radius-main); font-weight: 600; transition: all 0.2s; } .btn-error-home:hover { background: var(--accent-dark); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(52, 216, 225, 0.3); color: white; } body.light .error-card { background: white; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); } body.light .error-icon { color: var(--accent-dark); } body.light .btn-error-home { background: var(--accent-dark); } body.light .btn-error-home:hover { background: var(--accent); box-shadow: 0 4px 12px rgba(32, 185, 179, 0.3); } /* Share/Pin Container */ .share-pin-container { display: grid; grid-template-columns: 1fr 1fr; gap: 1em; margin-bottom: 1.5em; padding: 1em 0; border-top: 1px solid rgba(52, 216, 225, 0.15); border-bottom: 1px solid rgba(52, 216, 225, 0.15); } @media (max-width: 768px) { .share-pin-container { grid-template-columns: 1fr; } } .section-title { font-size: 0.85em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); margin-bottom: 0.8em; opacity: 0.9; } body.light .section-title { color: var(--accent-dark); } /* Share Section */ .share-section { margin: 0; padding: 0; } .group-share-list { display: flex; flex-direction: column; gap: 0.5em; max-height: 180px; overflow-y: auto; } .group-share-item { display: flex; align-items: center; gap: 0.6em; padding: 0.4em 0.5em; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(52, 216, 225, 0.15); border-radius: 8px; transition: all 0.2s; } .group-share-item:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(52, 216, 225, 0.3); } .group-avatar-small { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(52, 216, 225, 0.3); } .group-avatar-icon { display: flex; align-items: center; justify-content: center; background: rgba(52, 216, 225, 0.15); color: rgba(52, 216, 225, 0.9); font-size: 14px; } .group-name { flex: 1; font-size: 0.88em; font-weight: 500; color: rgba(255, 255, 255, 0.9); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .share-to-group-btn { background: rgba(52, 216, 225, 0.1); border: 1px solid rgba(52, 216, 225, 0.3); border-radius: 6px; padding: 0.35em 0.7em; cursor: pointer; transition: all 0.2s; color: var(--accent); font-size: 0.85em; white-space: nowrap; } /* Thread Item Poster (in thread list) */ .thread-item-poster { width: 50px; height: 75px; object-fit: cover; border-radius: 6px; margin-right: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } /* Item Detail Card (in thread modal) */ .item-detail-card { display: flex; gap: 1em; padding: 1em; background: rgba(52, 216, 225, 0.05); border: 1px solid rgba(52, 216, 225, 0.2); border-radius: 12px; margin-bottom: 1.5em; } .item-poster-container { flex-shrink: 0; } .item-poster { width: 100px; height: 150px; object-fit: cover; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); } .item-deleted-placeholder { width: 100px; height: 150px; border-radius: 8px; background: linear-gradient(135deg, #2c2c2c 0%, #1a1a1a 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border: 2px dashed rgba(255, 255, 255, 0.2); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); } .item-deleted-placeholder i { font-size: 2em; color: rgba(255, 255, 255, 0.3); } .item-deleted-placeholder span { font-size: 0.75em; color: rgba(255, 255, 255, 0.5); text-align: center; padding: 0 10px; } .item-info { flex: 1; display: flex; flex-direction: column; justify-content: center; } .item-title { font-size: 1.1em; font-weight: 600; margin-bottom: 0.5em; color: rgba(255, 255, 255, 0.95); } .item-meta { margin-bottom: 0.8em; } .item-meta .badge { font-size: 0.85em; padding: 0.35em 0.8em; } .share-to-group-btn:hover { background: rgba(52, 216, 225, 0.2); border-color: var(--accent); transform: scale(1.05); } .share-to-group-btn:disabled { opacity: 0.5; cursor: not-allowed; } .share-to-group-btn.shared { background: rgba(157, 56, 251, 0.2); border-color: #9d38fb; color: #9d38fb; } .loading-spinner { text-align: center; padding: 2em; color: var(--accent); font-size: 1.5em; } .no-groups-message, .error-message { text-align: center; padding: 1.5em; color: rgba(255, 255, 255, 0.5); font-size: 0.9em; } .error-message { color: rgba(255, 100, 100, 0.8); } /* Pin to Profile Section */ .pin-section { margin: 0; padding: 0; } .pin-btn { width: 100%; padding: 0.7em; background: rgba(255, 255, 255, 0.03); border: 2px dashed rgba(52, 216, 225, 0.3); border-radius: 8px; cursor: not-allowed; opacity: 0.6; transition: all 0.2s; display: flex; align-items: center; justify-content: center; gap: 0.5em; color: rgba(255, 255, 255, 0.6); font-size: 0.88em; position: relative; } .pin-btn i { font-size: 1.2em; color: var(--accent); } .pin-btn .badge.coming-soon { position: absolute; top: -8px; right: -8px; background: linear-gradient(135deg, #2de9e6, #9d38fb); color: #fff; font-size: 0.7em; padding: 0.3em 0.6em; border-radius: 12px; font-weight: 600; letter-spacing: 0.05em; } /* Nav Link Disabled (für Coming Soon Features) */ .nav-link-disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; position: relative; } .nav-link-disabled .badge-coming-soon { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); background: linear-gradient(135deg, #2de9e6, #9d38fb); color: #fff; font-size: 0.65em; padding: 0.25em 0.5em; border-radius: 8px; font-weight: 600; letter-spacing: 0.05em; white-space: nowrap; } /* Settings Section (continuing) */ .form-group { margin-bottom: 1.2em; } .form-label { display: block; font-size: 0.9em; font-weight: 500; color: rgba(255, 255, 255, 0.7); margin-bottom: 0.5em; text-align: left; } .status-select-content .form-select { width: 100%; padding: 0.7em 1em; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(52, 216, 225, 0.2); border-radius: 8px; color: #fff; font-size: 0.95em; cursor: pointer; transition: all 0.2s; } .status-select-content .form-select:hover { border-color: rgba(52, 216, 225, 0.4); background: rgba(255, 255, 255, 0.08); } .status-select-content .form-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(52, 216, 225, 0.1); } .status-select-content .form-select option { background: #1e2630; color: #fff; } /* Action Buttons Inline (nach Streamer-Select) */ .action-buttons-inline { display: flex; flex-direction: column; gap: 0.6em; margin-top: 1em; } .btn-action-full { width: 100%; padding: 0.75em 1em; background: var(--accent); color: white; border: none; border-radius: var(--radius-main); font-weight: 600; font-size: 0.9em; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; justify-content: center; gap: 0.5em; } .btn-action-full:hover { background: var(--accent-dark); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(52, 216, 225, 0.3); } body.light .btn-action-full { background: var(--accent-dark); } body.light .btn-action-full:hover { background: var(--accent); box-shadow: 0 2px 8px rgba(32, 185, 179, 0.3); } /* Action Buttons */ .action-buttons { display: flex; gap: 0.8em; margin-top: 1.5em; position: relative; z-index: 1; } .action-buttons .btn { flex: 1; padding: 0.8em 1.5em; border: none; border-radius: 10px; font-weight: 600; font-size: 0.95em; cursor: pointer; transition: all 0.2s; position: relative; z-index: 1; } .action-buttons .btn-primary { background: var(--accent); color: #0b1f24; box-shadow: 0 4px 12px rgba(52, 216, 225, 0.25); } .action-buttons .btn-primary:hover { background: var(--accent-dark); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(52, 216, 225, 0.35); } .action-buttons .btn-secondary { background: rgba(255, 255, 255, 0.08); color: var(--accent); border: 1px solid rgba(52, 216, 225, 0.3); } .action-buttons .btn-secondary:hover { background: rgba(255, 255, 255, 0.12); border-color: var(--accent); transform: translateY(-2px); } #modalStreamerSaveBtn { background: var(--accent); color: #0b1f24; box-shadow: 0 4px 12px rgba(52, 216, 225, 0.25); } #modalStreamerSaveBtn:hover { background: var(--accent-dark); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(52, 216, 225, 0.35); } #modalSaveMoveBtn { background: rgba(255, 255, 255, 0.08); color: var(--accent); border: 1px solid rgba(52, 216, 225, 0.3); } #modalSaveMoveBtn:hover { background: rgba(255, 255, 255, 0.12); border-color: var(--accent); transform: translateY(-2px); } /* Friends List */ .friends-list { display: flex; flex-direction: column; gap: 0.75em; margin-top: 1em; max-height: 300px; overflow-y: auto; position: relative; z-index: 10; } .friends-list .form-check { position: relative; z-index: 10; display: flex; align-items: center; justify-content: space-between; width: 100%; } .friends-list .form-check-input { width: 1.2em; height: 1.2em; margin-top: 0.1em; cursor: pointer; border: 2px solid rgba(52, 216, 225, 0.5); background: rgba(255, 255, 255, 0.05); position: relative; z-index: 11; flex-shrink: 0; } .friends-list .form-check-input:checked { background-color: transparent; border-color: var(--accent); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%2334D8E1' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: center; background-size: 100% 100%; } .friends-list .form-check-label { cursor: pointer; color: #fff; font-size: 0.95em; position: relative; z-index: 11; display: flex; align-items: center; justify-content: space-between; gap: 0.5em; flex: 1; padding-left: 0.5em; } .badge-shared { display: inline-flex; align-items: center; padding: 0.25em 0.6em; font-size: 0.7em; background: rgba(52, 216, 225, 0.15); color: var(--accent); border-radius: 8px; font-weight: 600; border: 1px solid rgba(52, 216, 225, 0.3); letter-spacing: 0.03em; opacity: 0.85; margin-left: auto; } /* Bereits geteilte Friends */ .friends-list .form-check.already-shared { background: rgba(52, 216, 225, 0.1); border-color: rgba(52, 216, 225, 0.4); opacity: 0.7; } .friends-list .form-check.already-shared .form-check-input { cursor: not-allowed; } /* Shared Users Liste */ .shared-users-list { margin-bottom: 1.5em; padding-bottom: 1em; border-bottom: 1px solid rgba(52, 216, 225, 0.2); } .section-subtitle { font-size: 0.9em; color: rgba(255, 255, 255, 0.7); margin-bottom: 0.75em; font-weight: 500; } #sharedUsersContent { display: flex; flex-direction: column; gap: 0.5em; } .shared-user-item { display: flex; justify-content: space-between; align-items: center; background: rgba(52, 216, 225, 0.1); padding: 0.6em 0.8em; border-radius: 6px; border: 1px solid rgba(52, 216, 225, 0.3); } .shared-user-name { color: var(--accent); font-size: 0.9em; display: flex; align-items: center; } .shared-user-name i { font-size: 0.9em; } .btn-unshare { background: rgba(232, 81, 81, 0.2); border: 1px solid rgba(232, 81, 81, 0.3); color: #e85151; border-radius: 4px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; padding: 0; } .btn-unshare:hover { background: rgba(232, 81, 81, 0.3); border-color: #e85151; transform: scale(1.1); } .btn-unshare i { font-size: 0.9em; } .action-buttons .btn:active { transform: translateY(0); } /* Light Mode Overrides */ body.light .status-select-content { background: linear-gradient(135deg, #ffffff 0%, #eef3f8 100%); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(199, 210, 222, 0.5); } body.light .section-title { color: rgba(0, 0, 0, 0.5); } body.light .status-section { border-bottom-color: rgba(52, 216, 225, 0.2); } body.light .status-choice-text { background: rgba(52, 216, 225, 0.05); border-color: transparent; } body.light .status-choice-text:hover { background: rgba(52, 216, 225, 0.12); border-color: currentColor; } body.light .status-choice-text.active { border-color: transparent; box-shadow: 0 0 20px rgba(52, 216, 225, 0.5), 0 0 40px rgba(52, 216, 225, 0.25), inset 0 0 15px rgba(52, 216, 225, 0.15); } body.light .status-label { color: #1e293b; } body.light .status-icon-big.favorit { color: #0ea5e9; } body.light .status-icon-big.gesehen { color: #8b5cf6; } body.light .status-icon-big.laeuft { background: linear-gradient(135deg, #0ea5e9 20%, #8b5cf6 80%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } body.light .form-label { color: rgba(0, 0, 0, 0.7); } body.light .status-select-content .form-select { background: #e7edf4; border-color: #c7d2de; color: #0b1320; } body.light .status-select-content .form-select:hover { border-color: rgba(52, 216, 225, 0.5); background: #ffffff; } body.light .status-select-content .form-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(52, 216, 225, 0.15); } body.light .status-select-content .form-select option { background: #ffffff; color: #0b1320; } /* Light Mode - Share Section */ body.light .share-section { border-bottom-color: rgba(52, 216, 225, 0.2); } body.light .group-share-item { background: rgba(52, 216, 225, 0.05); border-color: rgba(52, 216, 225, 0.2); } body.light .group-share-item:hover { background: rgba(52, 216, 225, 0.1); border-color: rgba(52, 216, 225, 0.4); } body.light .group-name { color: #1e293b; } body.light .share-to-group-btn { background: rgba(52, 216, 225, 0.08); border-color: rgba(52, 216, 225, 0.3); color: var(--accent-700); } body.light .share-to-group-btn:hover { background: rgba(52, 216, 225, 0.15); border-color: var(--accent); } body.light .share-to-group-btn.shared { background: rgba(139, 92, 246, 0.15); border-color: #8b5cf6; color: #8b5cf6; } body.light .no-groups-message, body.light .error-message { color: rgba(0, 0, 0, 0.5); } body.light .error-message { color: rgba(220, 38, 38, 0.8); } /* Light Mode - Thread Item Poster & Detail Card */ body.light .item-detail-card { background: rgba(52, 216, 225, 0.08); border-color: rgba(52, 216, 225, 0.25); } body.light .item-title { color: #0b1320; } body.light .item-meta .badge { background-color: #e0f2fe !important; color: var(--accent-700) !important; } /* Light Mode - Pin Section */ body.light .pin-section { border-bottom-color: rgba(52, 216, 225, 0.2); } body.light .pin-btn { background: rgba(52, 216, 225, 0.03); border-color: rgba(52, 216, 225, 0.3); color: rgba(0, 0, 0, 0.5); } body.light .pin-btn i { color: var(--accent-700); } body.light #modalStreamerSaveBtn { background: var(--accent); color: #0b1f24; } body.light #modalSaveMoveBtn { background: rgba(52, 216, 225, 0.1); color: var(--accent-700); border-color: rgba(52, 216, 225, 0.4); } body.light #modalSaveMoveBtn:hover { background: rgba(52, 216, 225, 0.15); border-color: var(--accent); } /* =============================== Accordion (Dark) =============================== */ .watchedit-accordion-item { background: #25292d; border-radius: var(--radius-main); border: none; margin-bottom: 0.5em; overflow: hidden; } .watchedit-accordion-btn { background: #232629; color: var(--accent); font-weight: 600; border-radius: var(--radius-main); box-shadow: none; outline: none; } .watchedit-accordion-btn:focus, .watchedit-accordion-btn:active { background: #22292c; color: var(--accent); box-shadow: none; outline: none; } .dark .watchedit-accordion-body { color: #ffffff; background: #232629; border-radius: var(--radius-main) !important; padding: 1.3em 1em 1.1em; } /* Immer abgerundet */ .accordion-button, .accordion-button.collapsed, .watchedit-accordion-btn, .watchedit-accordion-btn.collapsed { border-radius: var(--radius-main); } .accordion-button, .watchedit-accordion-btn { border: none !important; box-shadow: none !important; } .accordion-button::after, .accordion-button.collapsed::after { filter: invert(1) grayscale(1); border-radius: var(--radius-main) !important; } .accordion-item { border-radius: 15px; margin-bottom: 8px; background: none !important; border: none !important; box-shadow: none !important; } .accordion { background: none !important; } .accordion-button:not(.collapsed) { color: var(--accent); background-color: transparent; } /* Spezifische Korrektur */ #accordionAddManual .accordion-item.watchedit-accordion-item h2 { font-size: 1em; } #accordionAddManual .accordion-item.watchedit-accordion-item span { padding-bottom: 4px; } /* Abstand-Fixes */ .accordion.mb-4 { margin-bottom: 2.2em !important; } .d-flex.justify-content-center.gap-5.mb-4 { margin-bottom: 0 !important; } .stream { color: #fff; font-size: 1.1em; margin-bottom: 0.3em; display: block; padding-bottom: 10px !important; } /* =============================== Suche (Live-Suche) =============================== */ #searchResults .list-group-item { background-color: #17191C; color: #fff; } #searchResults .list-group-item .text-muted { color: #ffffff !important; white-space: pre; } #searchResults .list-group-item .btn.add-to-list { font-size: 14px; background-color: var(--accent-dark); border-color: var(--accent-dark); color: #17191c; } /* =============================== Badge / Meta / Cast =============================== */ .badge.meta-season, .badge.bg-accent { background-color: #9d38fb; } /* Season Badge Positionierung auf Poster */ .discover-poster-wrapper .badge.meta-season { position: absolute; bottom: 8px; right: 8px; z-index: 2; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } /* Datum-Badge: Kein Umbruch */ .discover-item .badge.meta-season { white-space: nowrap; } .badge-meta { background: #232a33; color: var(--accent); border-radius: 1.2em; padding: .22em .7em; font-size: 0.97em; margin-right: .33em; margin-bottom: 0.19em; display: inline-block; } /* Schauspieler mit Bild */ .badge-cast { display: inline-flex; align-items: center; background: var(--bs-secondary-bg, #262b32); color: #fff; border-radius: 2em; margin: 2px 4px 2px 0; padding: 2px 10px 2px 2px; font-size: 1em; } .badge-cast .cast-img { width: 34px; height: 34px; object-fit: cover; border-radius: 50%; margin-right: 6px; background: #1a1a1a; box-shadow: 0 2px 8px #0004; } .cast-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 0.8em 0.7em; margin-top: .4em; width: 100%; box-sizing: border-box; overflow-x: hidden; } .cast-person { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; min-width: 0; } .cast-img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: #181d23; box-shadow: 0 2px 8px #1118; margin-bottom: .4em; border: 2px solid #1fb3b8; } .cast-img-empty { background: #232a33; } .cast-name { font-size: 0.96em; color: #e7f6fd; text-align: center; word-break: break-word; line-height: 1.2; min-height: 2em; overflow-wrap: break-word; } /* Meta-Infos im Modal */ .dark .modal-meta2, .dark .modal-meta3 { margin-bottom: 0.35em; color: #ffffff; font-size: 0.9em; display: flex; align-items: center; flex-wrap: wrap; gap: 0.5em; } /* Status-Icon inline im Modal */ .status-icon-inline { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; font-size: 12px; } .status-icon-inline.favorit { background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%); color: #fff; } .status-icon-inline.gesehen { background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%); color: #fff; } .status-icon-inline.laeuft { background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%); color: #fff; } .meta-info { color: #b0bec5; font-size: 0.99em; } .meta-vote { color: #ffd700; font-weight: 600; } .meta-votecount { color: #ffffff; font-size: 0.97em; margin-left: 0.15em; } #modalMeta .badge { font-size: 1em; margin: 0 4px 0.25em 0; } /* Poster im Modal */ #modalPoster { max-width: 120px; max-height: 180px; width: 100%; height: auto; margin: 0 auto 0.9em; display: block; border-radius: 14px; box-shadow: 0 2px 10px #0006; } .watchedit-modal .modal-poster { max-width: 180px; max-height: 260px; border-radius: 14px; box-shadow: 0 4px 16px #0002; margin-bottom: 1.2em; object-fit: cover; } .watchedit-modal h2 { font-size: 1.2em; font-weight: 700; } .watchedit-modal .badge { font-size: 0.8em; margin-bottom: 0.25em; } /* Beschreibung im Accordion (Dark) */ body.dark #descriptionAccordionBody .accordion-body #modalDescription, body.dark .text-muted { color: #ffffff !important; } /* =============================== Responsive =============================== */ @media (max-width: 600px) { .watchedit-modal-content { padding: 2.5em .6em .5em; } .watchedit-card { padding: 0.6em; } .watchedit-poster-mini { width: 58px; height: 80px; } } .dark .list-group .list-group-item { background-color: #232629; border: 0px; margin: 5px 0px; border-radius: inherit; color: #ffffff; } .dark .list-group .list-group-item span { background-color: var(--accent) !important; font-weight: 600; } .dark .accordion-item .accordion-header .accordion-button span { color: var(--accent-dark); font-weight: 600; } .dark .accordion-item .accordion-header .accordion-button { background-color: #232629; border: 1px solid var(--accent-dark) !important; color: var(--accent-dark); border-radius: var(--radius-main) !important; } .dark .btn-primary { background-color: #232629; color: var(--accent-dark); border: 1px solid var(--accent-dark); } .dark .input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) { margin-left: calc(-9 * var(--bs-border-width)); border-top-left-radius: 0; border-bottom-left-radius: 0; background-color: #232629; } .watchedit-modal-content .accordion-item .accordion-header .accordion-button, .watchedit-modal-content .accordion-item:last-of-type>.accordion-header .accordion-button.collapsed { border-radius: var(--radius-main) !important; } .dark #modalTrailerBtnWrap a { color: #ffffff !important; } #headingManualAdd .accordion-button, #headingFilter .accordion-button { border: 0px !important; } #accordionAddManual .accordion-body.watchedit-accordion-body, #accordionFilter .accordion-body.watchedit-accordion-body { margin-top: -18px !important; } /* =========================== Light Mode – Theme Overrides (aktiv via ) =========================== */ body.light { /* noch etwas dunkler als #f4f7fb gewünscht */ --bg: #eaf1f7; --text: #0b1320; /* hoher Textkontrast */ --text-soft: #334155; /* kräftiger Soft-Text */ --card: #eef3f8; /* etwas dunklere Cards/Inputs */ --card-light: #e7edf4; /* helle Flächen im Light, z.B. Input-Gebiet */ --header: #ffffff; /* weiße Navbar */ --shadow: 0 2px 24px rgba(0, 0, 0, 0.08); } /* Global */ body.light { background: var(--bg) !important; color: var(--text) !important; } /* Navbar / Header */ body.light .watchedit-navbar, body.light .navbar, body.light .offcanvas { background: var(--header) !important; border-bottom: 1px solid #c7d2de; } body.light .navbar-brand, body.light .nav-link, body.light .offcanvas-title { color: #0b1320 !important; } body.light .nav-link:hover, body.light .nav-link:focus { color: var(--accent-dark) !important; } /* Cards */ body.light .watchedit-card { background: var(--card); color: var(--text); border: 1px solid #c7d2de; } body.light .notification-item { background: var(--card); color: var(--text); border: 1px solid #c7d2de; border-left: 4px solid transparent; } body.light .notification-item.unread { background-color: rgba(26, 153, 144, 0.1); border-left-color: var(--accent); border: 1px solid var(--accent); } body.light .notification-item:hover { background-color: rgba(26, 153, 144, 0.15); border-color: var(--accent); } body.light .watchedit-card-meta { color: var(--text-soft); } body.light .icon-btn:hover, body.light .icon-btn:focus { color: #0b1320; } /* Formular / Inputs */ body.light .form-control, body.light .form-select { background: var(--card); color: #0b1320 !important; border: 1px solid #c7d2de !important; } body.light .form-control::placeholder { color: #6b7280; opacity: .9; } /* Suche (Live-Ergebnisse) */ body.light #searchResults .list-group-item { background: var(--card); color: #0b1320; border: 1px solid #c7d2de; } body.light #searchResults .list-group-item .text-muted { color: #6b7280 !important; } /* Badges / Meta / Cast */ body.light .badge-meta { background: #e6f7f8; color: var(--accent-700); border: 1px solid #c1edf0; } body.light .cast-img { background: #f3f4f6; border-color: var(--accent); box-shadow: 0 1px 4px rgba(0, 0, 0, .06); } /* Accordion */ body.light .watchedit-accordion-item, body.light .watchedit-accordion-body { background: var(--card); border: 1px solid #c7d2de; } body.light .watchedit-accordion-btn, body.light .accordion-button { background: #ffffff; color: #0b1320 !important; border: 1px solid #c7d2de !important; border-radius: var(--radius-main) !important; } body.light .accordion-button:not(.collapsed) { color: #0b1320 !important; background: var(--card) !important; } /* Modal */ body.light .watchedit-modal-content { background: var(--card); color: var(--text); box-shadow: 0 16px 48px rgba(0, 0, 0, .10); } body.light .watchedit-modal-close { background: #f3f4f6; color: #0b1320; } body.light #modalContentInner .text-center.mt-3 a { color: #0b1320; } body.light #modalContentInner .text-center.mt-3 .small.text-muted.mt-2 { color: #6b7280 !important; } /* Status-Select */ body.light .status-select-modal .status-select-content { background: #ffffff; color: #0b1320; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.10); } body.light .status-label, body.light .status-choice-text { color: #0b1320; } body.light .status-choice[data-status="favorit"]:hover, body.light .status-choice[data-status="favorit"]:focus { background: #fff7d1; color: #b45309; } body.light .status-choice[data-status="gesehen"]:hover, body.light .status-choice[data-status="gesehen"]:focus { background: #eafff2; color: #047857; } body.light .status-choice[data-status="dabei"]:hover, body.light .status-choice[data-status="dabei"]:focus { background: #e8fbff; color: var(--accent-700); } /* Buttons & Inputs Misc */ body.light .list-group .list-group-item { background-color: #ffffff; border: 1px solid #e5e7eb; margin: 5px 0px; border-radius: inherit; } body.light .list-group .list-group-item span { color: var(--accent-dark); font-weight: 600; } body.light .accordion-item .accordion-header .accordion-button span { color: var(--accent-dark); font-weight: 600; } body.light .btn-primary { background-color: #ffffff; color: var(--accent-dark); border: 1px solid var(--accent-dark); } body.light .input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) { background-color: #ffffff; } /* Kleinigkeiten */ body.light .stream { color: #0b1320; } /* =============================== Dark Mode – Variablen-Override (Dark gewinnt immer) =============================== */ body.dark { --bg: #17191C; --text: #F7F7F7; --text-soft: #b0bec5; --card: #23252a; --card-light: #1F2225; --header: #000000; --shadow: 0 2px 24px rgba(0, 0, 0, 0.16); } body.dark main, body.dark .container, body.dark .content { background: transparent !important; } /* =============================== Contrast Enhancements (Akzent #20b9b3) =============================== */ body.light .accent, body.light .text-accent { color: var(--accent-700) !important; } body.light .btn-outline-accent { border-color: var(--accent-700) !important; color: var(--accent-700) !important; } body.light .btn-outline-accent:hover, body.light .btn-outline-accent:focus, body.light .btn-outline-accent:active { background: var(--accent) !important; color: var(--ink-on-accent) !important; border-color: var(--accent) !important; } body.light .nav-link:hover { text-decoration: underline; text-underline-offset: 3px; } body.light .bg-light { border: 1px solid; background-color: transparent !important; } /* =============================== Dark Mode – starke Overrides (falls beide Klassen gesetzt sind) =============================== */ body.dark, body.dark.light { background: var(--bg) !important; color: var(--text) !important; } body.dark .watchedit-navbar, body.dark .navbar, body.dark .offcanvas, body.dark.light .watchedit-navbar, body.dark.light .navbar, body.dark.light .offcanvas { background: var(--header) !important; border-bottom: 1.5px solid rgba(52, 216, 225, 0.10); } /* Offcanvas-Body padding für Bottom-Nav */ .offcanvas-body { padding-bottom: 90px !important; } body.dark .watchedit-card, body.dark.light .watchedit-card { background: #1f2327; color: #fff; border: 1px solid #2a3036; } body.dark .watchedit-card-meta, body.dark.light .watchedit-card-meta { color: var(--text-soft); } body.dark .icon-btn:hover, body.dark .icon-btn:focus, body.dark.light .icon-btn:hover, body.dark.light .icon-btn:focus { color: #0b1720; } /* Navbar Toggler Icon (Bootstrap) – farbige Linien je Modus */ .navbar-toggler-icon { background-size: 1.5rem 1.5rem; } body.light .navbar-toggler-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%2320b9b3' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); } body.dark .navbar-toggler-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%2334D8E1' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); } /* === Modal Visibility (CSP-konform, keine Inline-Styles) === */ .watchedit-modal, .watchedit-modal-backdrop { display: none; } .watchedit-modal.show, .watchedit-modal-backdrop.show { display: flex !important; /* zentrierter Inhalt */ } .bg-light { background-color: transparent !important; ; } body.dark .bg-light { border: 0px solid !important; background-color: transparent !important; } /* --- Streaming Provider Chips --- */ .providers-grid { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; } body.dark .providers-grid { color: #ffffff; } .provider-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .5rem; border-radius: .6rem; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .05); font-size: .9rem; line-height: 1; } .provider-chip img { width: 24px; height: 24px; border-radius: .25rem; object-fit: contain; } .provider-chip:hover { filter: brightness(1.08); } .provider-chip span { white-space: nowrap; color: #ffffff; } body.light .provider-chip span { white-space: nowrap; color: #0b1320; } body.light .provider-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .5rem; border-radius: .6rem; border: 1px solid #0b1320; background: rgba(255, 255, 255, 1); font-size: .9rem; line-height: 1; } .watchedit-list-header { border-bottom: 1px solid rgba(255, 255, 255, 0.06); padding-bottom: 0.75rem; } .watchedit-list-header { border-bottom-color: var(--accent-dark); } .watchedit-list-back { color: var(--accent-dark); padding: 10px 0px; } .watchedit-list-back:hover { color: var(--accent-dark); } body.dark .watchedit-list-title { font-size: 1.55rem; font-weight: 600; color: #ffffff; } body.light .watchedit-list-title { font-size: 1.55rem; font-weight: 600; color: var(--bs-heading-color); } .list-group-item a { color: var(--accent-dark) !important; text-decoration: none !important; } .list-btn-group { display: flex; gap: 0.75rem; /* mehr Abstand */ } .list-btn-group .btn { padding: 0.55rem 1rem; font-size: 1rem; border-radius: 8px; } .list-btn-group .btn-outline-danger i { font-size: 1.2rem; } /* Status-Modal – Overlay & Box */ #statusSelectModal.watchedit-modal { position: fixed; inset: 0; z-index: 1100; display: none; align-items: center; justify-content: center; background: rgba(10, 20, 40, .88); backdrop-filter: blur(4px); } #statusSelectModal.watchedit-modal.show { display: flex; } body.light #statusSelectModal.watchedit-modal { background: rgba(234, 241, 247, .94); } .status-modal-inner { position: relative; background: var(--card); border-radius: 22px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55); max-width: 480px; width: calc(100% - 40px); margin-top: 150px; } #shareListModal .status-modal-inner { margin-top: 50px; } ; .dark .list-group .list-group-item.streamer { color: #fff; } /* Close-Button im Status-Modal (oben rechts, touch-freundlich) */ .modal-close-btn { position: absolute; top: 10px; right: 12px; width: 30px; height: 30px; border-radius: 50%; border: none; background: rgba(255, 255, 255, 0.12); color: #ffffff; font-size: 20px; line-height: 30px; padding: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; } /* Markierte Status-Option im Modal */ .status-choice.status-selected i, .status-choice.status-selected .status-icon, .status-choice.status-selected .status-icon-bg { box-shadow: 0 0 0 2px rgba(0, 211, 255, 0.9); border-radius: 999px; } .status-choice-text.status-selected .status-label { font-weight: 600; } /* Modal Close Button sauber ausrichten */ .modal-close-btn { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.12); color: var(--accent); font-size: 1.5em; line-height: 28px; text-align: center; cursor: pointer; z-index: 20; } .modal-close-btn:hover, .modal-close-btn:active { background: rgba(255, 255, 255, 0.22); } /* Neuer schöner Rahmen für gewählten Status */ .status-selected { border: 2px solid #00eaff; border-radius: 14px; padding: 10px 16px; background: rgba(0, 234, 255, 0.08); box-shadow: 0 0 12px rgba(0, 234, 255, 0.4); transition: all 0.15s ease-out; } .status-choice-text { border: 2px solid transparent; border-radius: 14px; padding: 10px 16px; background: transparent; } .status-select-content.text-center .gap-5 { gap: 2rem !important; margin-top: 15px; } /* WatchedIT-ID Connect Section */ .wit-threema-id-section { background: rgba(0, 0, 0, 0.2); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 1.25rem; margin-bottom: 1rem; transition: background 0.2s ease, border-color 0.2s ease; } body.light .wit-threema-id-section { background: rgba(0, 0, 0, 0.08); border: 1px solid rgba(0, 0, 0, 0.15); } .wit-threema-title { font-size: 0.75rem; font-weight: 500; color: var(--bs-secondary); opacity: 0.6; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.5px; } body.light .wit-threema-title { opacity: 0.5; color: #666666; } .wit-threema-code { font-size: 1.25rem; font-weight: 600; font-family: 'Courier New', monospace; letter-spacing: 2px; color: var(--accent); } .wit-icon-btn { width: 48px; height: 48px; border-radius: 12px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.15); color: #ffffff; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; } body.light .wit-icon-btn { background: rgba(0, 0, 0, 0.08); border: 1px solid rgba(0, 0, 0, 0.15); color: #333333; } .wit-icon-btn:hover { background: var(--accent); border-color: var(--accent); color: white; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(26, 153, 144, 0.3); } .wit-icon-btn i { font-size: 1.25rem; } .wit-icon-btn.wit-copy-done { background: var(--bs-success); border-color: var(--bs-success); color: white; } /* Button "ID neu erstellen" Styling */ .wit-connect-buttons .btn-outline-secondary { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.2); color: var(--text); border-radius: 12px; padding: 0.6rem 1rem; font-weight: 500; transition: all 0.2s ease; } body.light .wit-connect-buttons .btn-outline-secondary { background: rgba(0, 0, 0, 0.05); border: 1px solid rgba(0, 0, 0, 0.15); color: #333333; } .wit-connect-buttons .btn-outline-secondary:hover { background: var(--accent); border-color: var(--accent); color: white; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(26, 153, 144, 0.3); } /* QR-Code Modal Styling */ #modal_qr_code { padding: 1rem; background: #ffffff; border-radius: 12px; display: inline-block; } body.dark #modal_qr_code { background: #ffffff; padding: 1.25rem; } #modal_qr_code img { display: block; border-radius: 8px; } .wit-connect-area, .wit-connect-buttons { transition: opacity 0.2s ease; } .wit-connect-disabled .wit-connect-area, .wit-connect-disabled .wit-connect-buttons { opacity: 0.5; } .wit-connect-disabled .wit-connect-interactive { pointer-events: none; } /* Profil – allgemeiner Save-Button-Abstand */ #wit-connect-block+hr { margin-top: 2rem; } .wit-friend-card { border-radius: 0.75rem; overflow: hidden; } .wit-friend-card .accordion-button { background: transparent; } .wit-friend-card .accordion-button:not(.collapsed) { box-shadow: none; } .wit-friend-card .friend-name { font-weight: 600; } .wit-friend-card .accordion-body { padding-top: 0.75rem; } .accordion-button .wit-friend-avatar { flex-shrink: 0; } .wit-friend-avatar { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; border: 2px solid var(--bs-border-color, #444); background: #222; display: flex; align-items: center; justify-content: center; } .wit-friend-avatar-icon i { font-size: 28px; } /* Karte / Accordion */ .wit-friend-card { border-radius: 0.9rem; overflow: hidden; border: 1px solid rgba(0, 255, 200, 0.35); background: rgba(0, 0, 0, 0.15); } /* Kopfbereich (Accordion-Button) schlanker */ .wit-friend-card .accordion-button { padding: 0.6rem 0.9rem; background: transparent; box-shadow: none; } .wit-friend-card .accordion-button:not(.collapsed) { background: rgba(0, 0, 0, 0.2); } /* Avatar: immer klein & rund */ .wit-friend-avatar { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 2px solid var(--accent) !important; background: #111; display: flex; align-items: center; justify-content: center; } .light .wit-friend-avatar { background: #fff; } /* Icon-Fallback im Avatar */ .wit-friend-avatar-icon i { font-size: 28px; } /* Name */ .friend-name { font-weight: 600; font-size: 0.98rem; } /* Body etwas kompakter */ .wit-friend-card .accordion-body { padding: 0.75rem 0.9rem 0.9rem; } .form-check-input:checked { background-color: var(--accent-dark); border-color: var(--accent-dark); } body.dark .accordion .form-check-label.friends { color: #ffffff; } /* List Options Section (Pin & Public) */ .list-options-section { background: rgba(52, 216, 225, 0.05); border: 1px solid rgba(52, 216, 225, 0.15); border-radius: 8px; padding: 1rem; } body.light .list-options-section { background: rgba(32, 185, 179, 0.05); border-color: rgba(32, 185, 179, 0.15); } .list-options-section .form-check { margin-bottom: 0.5rem; } .list-options-section .form-check:last-child { margin-bottom: 0; } .list-options-section .form-check-label { font-weight: 500; color: var(--text); cursor: pointer; } .list-options-section .form-check-label i { color: var(--accent); } body.light .list-options-section .form-check-label i { color: var(--accent-dark); } .friend-badges { margin-top: 2px; } .wit-friend-badge { font-size: 0.65rem; border-radius: 999px; padding: 0.15rem 0.55rem; text-transform: uppercase; letter-spacing: 0.04em; } body.dark .wit-friend-badge { background: rgba(52, 216, 225, 0.12); border: 1px solid rgba(52, 216, 225, 0.45); color: var(--accent); } /* =============================== Friend Request Cards =============================== */ .friend-request-card { border-radius: 0.9rem; overflow: hidden; border: 1px solid rgba(0, 255, 200, 0.25); transition: all 0.3s ease; } body.dark .friend-request-card { background: rgba(0, 0, 0, 0.15); } body.light .friend-request-card { background: rgba(255, 255, 255, 0.8); border: 1px solid rgba(26, 153, 144, 0.2); } .friend-request-card:hover { border-color: var(--accent); transform: translateY(-2px); } body.dark .friend-request-card:hover { background: rgba(0, 0, 0, 0.25); } body.light .friend-request-card:hover { background: rgba(255, 255, 255, 1); } .sent-request-card { border-color: rgba(255, 193, 7, 0.3); } body.dark .sent-request-card { background: rgba(42, 36, 0, 0.15); } body.light .sent-request-card { background: rgba(255, 248, 225, 0.8); border-color: rgba(255, 193, 7, 0.3); } .sent-request-card:hover { border-color: rgba(255, 193, 7, 0.6); } body.light .wit-friend-badge { background: rgba(52, 216, 225, 0.15); border: 1px solid rgba(52, 216, 225, 0.5); color: var(--accent-700); } .dark .accordion-item .accordion-header .accordion-button.friend-toggle span { color: #fff; font-weight: 400; } .light .accordion-item .accordion-header .accordion-button.friend-toggle span { color: #0b1320; font-weight: 400; } .dark .accordion-item .accordion-header .friend-name.me-2 { color: #ffffff; font-weight: 600; } .light .accordion-item .accordion-header .friend-name.me-2 { color: #0b1320; font-weight: 600; } /* User Search Styles */ .wit-search-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; } .wit-search-avatar-icon { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.875rem; } body.dark .wit-search-avatar-icon { background-color: #23252a; color: var(--accent); } body.light .wit-search-avatar-icon { background-color: #e5e7eb; color: var(--accent-dark); } #user-search-results .list-group-item { transition: background-color 0.2s ease; } body.dark #user-search-results .list-group-item:hover { background-color: rgba(52, 216, 225, 0.05); } body.light #user-search-results .list-group-item:hover { background-color: rgba(32, 185, 179, 0.05); } .input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) { margin-left: calc(-9 * var(--bs-border-width)); } /* ========================= Groups Feature Styles ========================= */ /* Group Cards Base */ .group-card { position: relative; } .group-card .admin-badge { position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.9em; z-index: 2; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12); } body.dark .group-card .admin-badge { background-color: rgba(52, 216, 225, 0.2); color: var(--accent); } body.light .group-card .admin-badge { background-color: rgba(32, 185, 179, 0.2); color: var(--accent-dark); } .group-card .unread-badge { position: absolute; top: 12px; right: 12px; min-width: 24px; height: 24px; padding: 0 8px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 600; z-index: 2; } body.dark .group-card .unread-badge { background-color: #dc3545; color: #fff; } body.light .group-card .unread-badge { background-color: #dc3545; color: #fff; } .group-card .watchedit-card-title { font-size: 1.08rem; font-weight: 600; margin-bottom: 0.3rem; } .group-card .watchedit-card-meta { font-size: 0.875rem; opacity: 0.7; } .group-card .group-description { font-size: 0.92rem; margin-top: 0.2rem; line-height: 1.3; opacity: 0.8; color: var(--text-soft, #b0b6c3); } .group-card .group-stats { display: flex; gap: 0.7rem; margin-top: 0.4rem; font-size: 0.89rem; opacity: 0.7; } .group-card .group-stats>span { display: flex; align-items: center; gap: 0.25rem; } /* Group Filters */ .group-filters { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.5rem; } .group-filters input[type="text"], .group-filters .form-control { flex: 1; min-width: 200px; } .group-filters select, .group-filters .form-select { flex: 1; min-width: 150px; } /* Kompakte Filter-Variante */ .group-filters-compact { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 0.5rem; margin-bottom: 1.5rem; } .group-filters-compact .form-control, .group-filters-compact .form-select { font-size: 0.95rem; padding: 0.5rem 0.75rem; } @media (max-width: 768px) { .group-filters { flex-direction: column; } .group-filters input[type="text"], .group-filters .form-control, .group-filters select, .group-filters .form-select { min-width: 100%; flex: 1; } .group-filters-compact { grid-template-columns: 1fr; } } .group-filters .filter-btn { padding: 0.5rem 1rem; border-radius: 8px; border: 1px solid; transition: all 0.2s ease; cursor: pointer; font-size: 0.875rem; } body.dark .group-filters .filter-btn { background-color: #23252a; border-color: #3d4147; color: var(--text); } body.dark .group-filters .filter-btn:hover { background-color: #2d3035; } body.dark .group-filters .filter-btn.active { background-color: rgba(52, 216, 225, 0.2); border-color: var(--accent); color: var(--accent); } body.light .group-filters .filter-btn { background-color: #fff; border-color: #dee2e6; color: var(--text); } body.light .group-filters .filter-btn:hover { background-color: #f8f9fa; } body.light .group-filters .filter-btn.active { background-color: rgba(32, 185, 179, 0.1); border-color: var(--accent-dark); color: var(--accent-dark); } /* Empty State */ .groups-empty { text-align: center; padding: 3rem 1rem; opacity: 0.6; } .groups-empty i { font-size: 3rem; margin-bottom: 1rem; opacity: 0.5; } .groups-empty p { font-size: 1.125rem; margin-bottom: 0; } /* ========================= Thread Styles (Group Detail) ========================= */ .thread-card { cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; position: relative; min-height: 90px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.10); background: var(--card-bg, #181b20); border: 1px solid var(--border, #23252a); transition: box-shadow 0.18s, transform 0.18s; } .thread-card:hover { transform: translateY(-2px); } body.dark .thread-card:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } body.light .thread-card:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .thread-card .badge { position: absolute; top: 10px; right: 10px; z-index: 3; } .thread-stats { display: flex; gap: 1rem; margin-top: 0.5rem; font-size: 0.875rem; } .thread-stats>span { display: flex; align-items: center; gap: 0.25rem; opacity: 0.7; } /* Message Bubbles */ .message { animation: fadeIn 0.3s ease; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .message .bg-primary { background: linear-gradient(135deg, var(--accent), var(--accent-dark)) !important; } body.light .message .bg-light { background-color: #f8f9fa; color: #212529; } body.dark .message .bg-light { background-color: #23252a; color: var(--text); } /* Archived Threads */ .archived-thread-item { opacity: 0.7; } .archived-thread-item:hover { opacity: 1; } /* Button Bar */ .btn-group .btn { white-space: nowrap; } @media (max-width: 768px) { .btn-group .btn { font-size: 0.875rem; padding: 0.5rem 0.75rem; } .btn-group .btn i { display: block; margin-bottom: 0.25rem; } } /* ======================== Group Invitations Styles ======================== */ /* Invitation Card Container */ body.dark .group-invitation-card { background: var(--card) !important; border: 1px solid rgba(52, 216, 225, 0.15) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); } body.light .group-invitation-card { background: var(--card) !important; border: 1px solid rgba(32, 185, 179, 0.2) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } /* Invitation Card Header */ body.dark .group-invitation-card .card-header.bg-accent { background: var(--accent) !important; color: #0b1f24 !important; } body.light .group-invitation-card .card-header.bg-accent { background: var(--accent) !important; color: #0b1f24 !important; } /* Invitation Item Borders */ body.dark .group-invitation-item { border-color: rgba(52, 216, 225, 0.1) !important; } body.light .group-invitation-item { border-color: rgba(32, 185, 179, 0.15) !important; } /* Text Colors */ body.dark .group-invitation-card h6 { color: var(--text) !important; } body.light .group-invitation-card h6 { color: var(--text) !important; } body.dark .group-invitation-card .text-muted { color: var(--text-soft) !important; } body.light .group-invitation-card .text-muted { color: var(--text-soft) !important; } /* Privacy Badges */ body.dark .group-invitation-card .badge.bg-secondary { background-color: rgba(52, 216, 225, 0.2) !important; color: var(--accent) !important; border: 1px solid rgba(52, 216, 225, 0.4); } body.light .group-invitation-card .badge.bg-secondary { background-color: rgba(32, 185, 179, 0.2) !important; color: var(--accent-dark) !important; border: 1px solid rgba(32, 185, 179, 0.4); } body.dark .group-invitation-card .badge.bg-success { background-color: rgba(52, 216, 225, 0.2) !important; color: var(--accent) !important; border: 1px solid rgba(52, 216, 225, 0.4); } body.light .group-invitation-card .badge.bg-success { background-color: rgba(32, 185, 179, 0.2) !important; color: var(--accent-dark) !important; border: 1px solid rgba(32, 185, 179, 0.4); } /* =============================== Bottom Navigation Bar =============================== */ .bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; height: calc(70px + env(safe-area-inset-bottom)); display: flex; justify-content: space-around; align-items: center; z-index: 1050; padding: 0 1rem; padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); } body.dark .bottom-nav { background: #1a1d21; border-top: 1px solid rgba(52, 216, 225, 0.1); } body.light .bottom-nav { background: #ffffff; border-top: 1px solid rgba(32, 185, 179, 0.15); } .bottom-nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-decoration: none; transition: all 0.2s ease; padding: 0.5rem 1rem; border-radius: 8px; min-width: 60px; } body.dark .bottom-nav-item { color: var(--text-soft); } body.light .bottom-nav-item { color: #6c757d; } .bottom-nav-item i { font-size: 1.3rem; } .bottom-nav-item span { font-size: 0.9rem; font-weight: 500; } body.dark .bottom-nav-item:hover, body.dark .bottom-nav-item.active { color: var(--accent); background: rgba(52, 216, 225, 0.1); } body.light .bottom-nav-item:hover, body.light .bottom-nav-item.active { color: var(--accent-dark); background: rgba(32, 185, 179, 0.1); } /* Platz f�r Bottom Nav am unteren Rand */ body { padding-bottom: calc(85px + env(safe-area-inset-bottom)); padding-top: calc(70px + env(safe-area-inset-top)); min-height: 100vh; min-height: -webkit-fill-available; } html { height: -webkit-fill-available; } /* =============================== Top Navbar - Profilbild & Glocke =============================== */ .navbar.fixed-top { height: auto; background-color: var(--header); box-sizing: content-box; z-index: 1030; } .notification-icon { text-decoration: none; position: relative; } .notification-icon:hover i { transform: scale(1.1); transition: transform 0.2s ease; } .notification-badge { position: absolute; top: -5px; right: -8px; font-size: 0.65rem; min-width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; padding: 0 5px; } .profile-avatar { text-decoration: none; display: block; border-radius: 50%; border: 2px solid transparent; transition: border-color 0.2s ease; } body.dark .profile-avatar:hover { border-color: var(--accent); } body.light .profile-avatar:hover { border-color: var(--accent-dark); } .profile-avatar::after { display: none !important; } /* Dropdown Menu Styles */ body.dark .dropdown-menu { background: var(--card); border: 1px solid rgba(52, 216, 225, 0.1); box-shadow: var(--shadow); } body.light .dropdown-menu { background: #ffffff; border: 1px solid rgba(32, 185, 179, 0.15); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } body.dark .dropdown-item { color: var(--text); } body.light .dropdown-item { color: #0b1320; } body.dark .dropdown-item:hover { background: rgba(52, 216, 225, 0.1); color: var(--accent); } body.light .dropdown-item:hover { background: rgba(32, 185, 179, 0.1); color: var(--accent-dark); } /* Profilbild Platzhalter (wenn kein Bild vorhanden) */ .profile-avatar-placeholder { width: 35px; height: 35px; border: 2px solid transparent; transition: border-color 0.2s ease; } body.dark .profile-avatar-placeholder { background: rgba(52, 216, 225, 0.15); color: var(--accent); } body.light .profile-avatar-placeholder { background: rgba(32, 185, 179, 0.15); color: var(--accent-dark); } body.dark .profile-avatar:hover .profile-avatar-placeholder { border-color: var(--accent); background: rgba(52, 216, 225, 0.25); } body.light .profile-avatar:hover .profile-avatar-placeholder { border-color: var(--accent-dark); background: rgba(32, 185, 179, 0.25); } .profile-avatar-placeholder i { font-size: 1.1rem; } /* Notification Bell Icon - Akzentfarbe */ body.dark .notification-bell { color: #ffffff; ; } body.light .notification-bell { color: var(--accent-dark) !important; } /* Modal-Dialog Zentrierung Fix - dynamisches padding-right überschreiben */ .modal .modal-dialog-centered, .modal.show .modal-dialog-centered, .modal-dialog-centered[style*="padding-right"] { padding-right: 0 !important; padding-left: 0 !important; } /* Modal-Elemente selbst - padding-right entfernen */ #groupSettingsModal, #createGroupModal, .modal.show { padding-right: 0 !important; } /* Body padding-right beim Modal öffnen entfernen */ body.modal-open { padding-right: 0 !important; } /* Gruppenbild Border */ .group-card .watchedit-card-icon img, .group-invitation-item img.rounded-circle { border: 2px solid var(--accent) !important; } .dark .form-text { color: #ffffff; } /* =============================== Benachrichtigungen =============================== */ /* Header-Bereich */ #notificationsList .card { background-color: transparent; border: none; border-radius: 0; overflow: visible; } #notificationsList .card-body { background-color: transparent; padding: 0; } /* Notification Wrapper für Swipe */ .notification-wrapper { position: relative; overflow: hidden; margin-bottom: 0; } .notification-wrapper .swipe-bg { position: absolute; top: 0; bottom: 0; width: 100%; display: flex; align-items: center; font-weight: 600; font-size: 0.9rem; opacity: 0; transition: opacity 0.2s ease; z-index: 0; color: white; } .notification-wrapper .swipe-bg.left { left: 0; background: linear-gradient(90deg, #e85151 0%, #e85151 80%, transparent 100%); color: #fff; justify-content: flex-end; padding-right: 1.2em; } .notification-wrapper .swipe-bg.right { right: 0; background: linear-gradient(270deg, var(--accent) 0%, var(--accent) 80%, transparent 100%); color: #fff; justify-content: flex-start; padding-left: 1.2em; } .notification-wrapper .swipe-bg i { font-size: 1.5rem; } /* Notification Item */ .notification-item { position: relative; z-index: 1; transition: transform 0.3s ease, box-shadow 0.3s ease; border-left: 4px solid transparent; background-color: var(--card); border-radius: var(--radius-main); margin-bottom: 0.5rem; padding: 1rem; touch-action: pan-y; user-select: none; box-shadow: var(--shadow); } .notification-item:last-child { margin-bottom: 0; } /* Dark Mode - normale Benachrichtigungen */ body.dark .notification-item { background-color: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); } body.dark .notification-item:hover:not(.swiping) { background-color: rgba(26, 153, 144, 0.2); border-color: var(--accent); } /* Light Mode - normale Benachrichtigungen */ body.light .notification-item { background-color: #ffffff; border: 1px solid #c7d2de; } body.light .notification-item:hover:not(.swiping) { background-color: rgba(26, 153, 144, 0.15); border-color: var(--accent); } /* Ungelesene Benachrichtigungen */ .notification-item.unread { background-color: rgba(26, 153, 144, 0.15); border-left-color: var(--accent); box-shadow: 0 2px 8px rgba(26, 153, 144, 0.2); } body.dark .notification-item.unread { background-color: rgba(26, 153, 144, 0.15); border-left-color: var(--accent); box-shadow: 0 2px 8px rgba(26, 153, 144, 0.2); } body.light .notification-item.unread { background-color: rgba(26, 153, 144, 0.1); border-left-color: var(--accent); border: 1px solid var(--accent); } /* Icon Styling */ .notification-icon-type { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 1.3rem; flex-shrink: 0; } .notification-icon-type.friend_request, .notification-icon-type.friend_accepted { background: linear-gradient(135deg, rgba(26, 153, 144, 0.2), rgba(32, 185, 179, 0.2)); color: var(--accent-dark); border: 2px solid rgba(26, 153, 144, 0.3); } .notification-icon-type.group_invitation, .notification-icon-type.group_new_member, .notification-icon-type.group_member_left, .notification-icon-type.group_member_removed, .notification-icon-type.group_new_thread, .notification-icon-type.group_thread_reply, .notification-icon-type.group_role_changed { background: linear-gradient(135deg, rgba(26, 153, 144, 0.2), rgba(32, 185, 179, 0.2)); color: var(--accent-dark); border: 2px solid rgba(26, 153, 144, 0.3); } .notification-icon-type.shared_list_new_item, .notification-icon-type.list_shared_with_you { background: linear-gradient(135deg, rgba(26, 153, 144, 0.2), rgba(32, 185, 179, 0.2)); color: var(--accent); border: 2px solid rgba(26, 153, 144, 0.3); } .notification-icon-type.admin_user_report, .notification-icon-type.admin_content_report { background: linear-gradient(135deg, rgba(220, 53, 69, 0.2), rgba(220, 53, 69, 0.3)); color: #ff6b7a; border: 2px solid rgba(220, 53, 69, 0.4); } /* Text Styling */ .notification-item strong { color: var(--text); font-weight: 600; font-size: 1rem; display: block; margin-bottom: 0.25rem; } .notification-item .text-muted { color: var(--text-soft) !important; font-size: 0.9rem; line-height: 1.5; } .notification-time { font-size: 0.8rem; color: rgba(176, 190, 197, 0.7); font-weight: 500; } /* Filter Pills */ .filter-pills { border-bottom: 2px solid rgba(26, 153, 144, 0.15); padding-bottom: 1rem; margin-bottom: 2rem; display: flex; flex-wrap: wrap; gap: 0.75rem; } .filter-pills .nav-link { border-radius: 25px; padding: 0.6rem 1.5rem; color: var(--text); transition: all 0.3s ease; border: 2px solid rgba(255, 255, 255, 0.1); background-color: rgba(35, 37, 42, 0.5); font-weight: 500; font-size: 0.95rem; } .filter-pills .nav-link:hover { color: var(--accent-dark); background-color: rgba(26, 153, 144, 0.15); border-color: rgba(26, 153, 144, 0.3); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(26, 153, 144, 0.2); } .nav-pills.filter-pills .nav-link.active { background: linear-gradient(135deg, var(--accent), var(--accent-dark)); color: #ffffff !important; border-color: var(--accent); box-shadow: 0 4px 16px rgba(26, 153, 144, 0.3); font-weight: 600; } /* Empty State */ .empty-state { padding: 4rem 2rem; text-align: center; background-color: transparent; border-radius: var(--radius-main); margin: 0; } .empty-state i { font-size: 4rem; margin-bottom: 1.5rem; opacity: 0.3; color: var(--accent); } .empty-state p { color: var(--text-soft); font-size: 1.1rem; font-weight: 500; } /* Mark as Read Button */ .mark-read-btn { color: var(--accent); padding: 0.4rem 0.6rem; transition: all 0.2s ease; border-radius: 6px; } .mark-read-btn:hover { color: var(--accent-dark); background-color: rgba(26, 153, 144, 0.15); } /* Action Buttons */ #markAllReadBtn { color: var(--accent); border-color: var(--accent); border-width: 2px; font-weight: 500; padding: 0.5rem 1.2rem; transition: all 0.3s ease; } #markAllReadBtn:hover { background-color: var(--accent); color: var(--ink-on-accent); box-shadow: 0 4px 12px rgba(26, 153, 144, 0.3); transform: translateY(-2px); } .btn-outline-secondary { color: var(--text); border-color: rgba(255, 255, 255, 0.2); border-width: 2px; font-weight: 500; padding: 0.5rem 1.2rem; } .btn-outline-secondary:hover { background-color: rgba(255, 255, 255, 0.1); color: var(--text); border-color: rgba(255, 255, 255, 0.3); } /* Password toggle button border in light mode */ body.light .password-wrapper .btn-outline-secondary.wit-password-toggle { border-top: 1px solid rgba(0, 0, 0, 0.2) !important; border-right: 1px solid rgba(0, 0, 0, 0.2) !important; border-bottom: 1px solid rgba(0, 0, 0, 0.2) !important; border-left: 1px solid transparent !important; } .btn-outline-secondary.wit-password-toggle { background-color: var(--bg); } /* Responsive */ @media (max-width: 768px) { .filter-pills { gap: 0.5rem; } .filter-pills .nav-link { padding: 0.5rem 1rem; font-size: 0.9rem; } .notification-icon-type { width: 42px; height: 42px; font-size: 1.1rem; } } /* ============================================ PUBLIC PROFILE STYLES ============================================ */ .profile-container { max-width: 1200px; margin: 0 auto; padding: 20px; } .profile-header { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); border-radius: 16px; padding: 40px; margin-bottom: 30px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); } .profile-header-content { display: flex; gap: 30px; align-items: center; flex-direction: column; text-align: center; } .profile-avatar { flex-shrink: 0; } .profile-header .profile-avatar img { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; border: 4px solid rgba(255, 255, 255, 0.1); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); } body.dark .profile-info { flex-grow: 1; color: #fff; } body.light .profile-info { flex-grow: 1; color: #0b1320; } body.dark .profile-username { font-size: 2rem; font-weight: 700; margin-bottom: 5px; display: inline-block; align-items: center; gap: 10px; color: #fff; } body.light .profile-username { font-size: 2rem; font-weight: 700; margin-bottom: 5px; display: inline-block; align-items: center; gap: 10px; color: #0b1320; } body.dark .profile-handle { font-size: 1.1rem; color: #94a3b8; margin-bottom: 15px; display: block; align-items: center; gap: 8px; } body.light .profile-handle { font-size: 1.1rem; color: #64748b; margin-bottom: 15px; display: block; align-items: center; gap: 8px; } .profile-badge { font-size: 1.2rem; filter: drop-shadow(0 0 2px rgba(52, 216, 225, 0.3)); } body.dark .profile-bio { font-size: 1rem; line-height: 1.6; margin-bottom: 15px; color: #cbd5e1; } body.light .profile-bio { font-size: 1rem; line-height: 1.6; margin-bottom: 15px; color: #334155; } .profile-social-links { display: block; gap: 15px; margin-bottom: 15px; } body.dark .profile-social-links a { color: var(--accent); font-size: 1.4rem; transition: all 0.3s ease; opacity: 0.8; text-decoration: none; display: inline-flex; align-items: center; } body.dark .profile-social-links a svg { width: 1.4rem; height: 1.4rem; } body.dark .profile-social-links a:hover { opacity: 1; color: var(--accent-bright); transform: translateY(-2px); text-decoration: none; } body.light .profile-social-links a { color: var(--accent-dark); font-size: 1.4rem; transition: all 0.3s ease; opacity: 0.8; text-decoration: none; display: inline-flex; align-items: center; } body.light .profile-social-links a svg { width: 1.4rem; height: 1.4rem; } body.light .profile-social-links a:hover { opacity: 1; color: var(--accent); transform: translateY(-2px); text-decoration: none; } .profile-meta { display: flex; gap: 20px; align-items: center; font-size: 0.9rem; } body.dark .profile-meta { color: #94a3b8; } body.light .profile-meta { color: #64748b; } .profile-actions { display: block; gap: 10px; margin-top: 20px; } /* Alte Friend-Button Styles entfernt - siehe neue Styles weiter unten */ body.dark .btn-friend-pending { background: #64748b; color: white; } body.light .btn-friend-pending { background: #94a3b8; color: white; } body.dark .btn-edit-profile { background: rgba(255, 255, 255, 0.1); color: white; border: 1px solid rgba(255, 255, 255, 0.2); } body.light .btn-edit-profile { background: rgba(32, 185, 179, 0.1); color: #0b1320; border: 1px solid rgba(32, 185, 179, 0.3); } .profile-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 15px; } body.dark .profile-tag { padding: 6px 14px; background: rgba(255, 255, 255, 0.1); border-radius: 20px; font-size: 0.85rem; color: #e2e8f0; display: flex; align-items: center; gap: 6px; } body.light .profile-tag { padding: 6px 14px; background: rgba(32, 185, 179, 0.15); border-radius: 20px; font-size: 0.85rem; color: #0f172a; display: flex; align-items: center; gap: 6px; } .profile-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-bottom: 30px; } .stat-card { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); border-radius: 12px; padding: 20px; text-align: center; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); } .stat-value { font-size: 2rem; font-weight: 700; color: #667eea; margin-bottom: 5px; } .stat-label { font-size: 0.9rem; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.5px; } .section-title { font-size: 1.3rem; font-weight: 700; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; color: #fff; } .favorites-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 10px; margin-bottom: 20px; } /* Override für Pinned Lists - 2 Spalten */ .content-section:has(.pinned-list-item) .favorites-grid { grid-template-columns: repeat(2, 1fr); } .favorite-item { position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 2/3; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); transition: transform 0.3s; cursor: pointer; } body.light .favorite-item { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); } .favorite-item:hover { transform: translateY(-5px) scale(1.02); } .favorite-item img { width: 100%; height: 100%; object-fit: cover; } body.dark .favorite-star { position: absolute; top: 8px; right: 8px; background: rgba(0, 0, 0, 0.7); color: var(--accent); padding: 6px; border-radius: 50%; font-size: 0.9rem; transition: all 0.2s; } body.light .favorite-star { position: absolute; top: 8px; right: 8px; background: rgba(255, 255, 255, 0.9); color: var(--accent-dark); padding: 6px; border-radius: 50%; font-size: 0.9rem; transition: all 0.2s; } .favorite-star:hover { transform: scale(1.1); } body.dark .activity-item { display: flex; gap: 15px; padding: 15px; background: rgba(255, 255, 255, 0.03); border-radius: 8px; margin-bottom: 10px; } body.light .activity-item { display: flex; gap: 15px; padding: 15px; background: rgba(32, 185, 179, 0.08); border-radius: 8px; margin-bottom: 10px; border: 1px solid rgba(32, 185, 179, 0.12); } body.dark .activity-icon { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%); display: flex; align-items: center; justify-content: center; color: white; } body.light .activity-icon { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--accent-dark) 0%, #1a9990 100%); display: flex; align-items: center; justify-content: center; color: white; } body.dark .activity-content { flex-grow: 1; color: #cbd5e1; } body.light .activity-content { flex-grow: 1; color: #334155; } .activity-text { margin-bottom: 5px; } body.dark .activity-time { font-size: 0.85rem; color: #64748b; } body.light .activity-time { font-size: 0.85rem; color: #64748b; } .commonalities-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; } body.dark .commonality-item { text-align: center; padding: 15px; background: rgba(255, 255, 255, 0.03); border-radius: 8px; } body.light .commonality-item { text-align: center; padding: 15px; background: rgba(32, 185, 179, 0.08); border-radius: 8px; border: 1px solid rgba(32, 185, 179, 0.15); } body.dark .commonality-icon { font-size: 1.5rem; margin-bottom: 8px; color: var(--accent); } body.light .commonality-icon { font-size: 1.5rem; margin-bottom: 8px; color: var(--accent-dark); } body.dark .commonality-count { font-size: 1.5rem; font-weight: 700; color: #fff; } body.light .commonality-count { font-size: 1.5rem; font-weight: 700; color: #0b1320; } body.dark .commonality-label { font-size: 0.85rem; color: #94a3b8; } body.light .commonality-label { font-size: 0.85rem; color: #475569; } .friends-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 15px; } .friend-avatar { text-align: center; text-decoration: none; transition: all 0.2s; } .friend-avatar:hover { transform: translateY(-3px); } body.dark .friend-avatar img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; margin-bottom: 5px; border: 2px solid rgba(52, 216, 225, 0.3); transition: all 0.2s; } body.light .friend-avatar img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; margin-bottom: 5px; border: 2px solid rgba(32, 185, 179, 0.3); transition: all 0.2s; } .friend-avatar:hover img { border-color: var(--accent); } body.light .friend-avatar:hover img { border-color: var(--accent-dark); } body.dark .friend-name { font-size: 0.8rem; color: #cbd5e1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.light .friend-name { font-size: 0.8rem; color: #334155; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ============================================ PROFILE SETTINGS STYLES ============================================ */ .settings-container { max-width: 800px; margin: 0 auto; background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); border-radius: 16px; padding: 40px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); } .settings-container h1 { font-size: 2rem; margin-bottom: 30px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .settings-container .section { margin-bottom: 40px; padding-bottom: 30px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .settings-container .section:last-child { border-bottom: none; } .settings-container .section-title { font-size: 1.3rem; font-weight: 600; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; } .settings-container .alert { padding: 12px 20px; border-radius: 8px; margin-bottom: 20px; } .settings-container .alert-success { background: rgba(34, 197, 94, 0.15); border: 1px solid rgba(34, 197, 94, 0.3); color: #86efac; } .settings-container .alert-danger { background: rgba(239, 68, 68, 0.15); border: 1px solid rgba(239, 68, 68, 0.3); color: #fca5a5; } .tags-container { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 15px; } .tag-item { background: rgba(255, 255, 255, 0.1); padding: 8px 16px; border-radius: 20px; display: flex; align-items: center; gap: 8px; font-size: 0.9rem; } .tag-remove { color: #ef4444; cursor: pointer; font-size: 1rem; transition: transform 0.2s; } .tag-remove:hover { transform: scale(1.2); } .add-tag-form { display: flex; gap: 10px; margin-bottom: 10px; } .tag-input { flex: 1; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); color: #fff; padding: 8px 12px; border-radius: 8px; } .tag-input:focus { background: rgba(255, 255, 255, 0.08); border-color: #667eea; outline: none; } .btn-sm { padding: 8px 16px; font-size: 0.9rem; } .pinned-items-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 15px; margin-top: 20px; } .pinned-item { position: relative; border-radius: 8px; overflow: hidden; aspect-ratio: 2/3; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); cursor: pointer; } .pinned-item img { width: 100%; height: 100%; object-fit: cover; } .pinned-item-remove { position: absolute; top: 5px; right: 5px; background: rgba(239, 68, 68, 0.9); color: white; border: none; border-radius: 50%; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 0.9rem; transition: all 0.2s; } .pinned-item-remove:hover { background: #dc2626; transform: scale(1.1); } /* Profile Media Queries */ @media (max-width: 576px) { .profile-header-content { flex-direction: column; text-align: center; align-items: center; } .profile-meta { flex-direction: column; gap: 10px; } /* Gemeinsamkeiten bleiben auch auf Smartphones nebeneinander */ .commonalities-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; } .commonality-item { padding: 10px; } .commonality-icon { font-size: 1.2rem !important; margin-bottom: 4px !important; } .commonality-count { font-size: 1.2rem !important; } .commonality-label { font-size: 0.7rem !important; } .settings-container { padding: 20px; } } /* ============================================ PROFILE SETTINGS FORM STYLES ============================================ */ .settings-container .form-label { color: #94a3b8; font-size: 0.9rem; margin-bottom: 8px; display: block; } .settings-container .form-control, .settings-container .form-select { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); color: #fff; padding: 12px; border-radius: 8px; width: 100%; margin-bottom: 20px; } .settings-container .form-control:focus, .settings-container .form-select:focus { background: rgba(255, 255, 255, 0.08); border-color: #667eea; outline: none; } .settings-container textarea.form-control { min-height: 100px; resize: vertical; } .settings-container .form-check { margin-bottom: 15px; } .settings-container .form-check-input { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); } .settings-container .form-check-input:checked { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-color: #667eea; } .settings-container .form-check-label { color: #cbd5e1; margin-left: 8px; } .settings-container .btn-primary { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none; padding: 12px 30px; border-radius: 8px; font-weight: 600; cursor: pointer; transition: all 0.3s; } .settings-container .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(102, 126, 234, 0.4); } .username-preview { margin-top: 10px; padding: 10px; background: rgba(102, 126, 234, 0.1); border-radius: 8px; font-size: 0.9rem; color: #94a3b8; } .char-count { text-align: right; font-size: 0.85rem; color: #64748b; margin-top: -15px; margin-bottom: 15px; } /* =============================== User Profile - Additional Styles =============================== */ /* Profile Header Improvements */ body.dark .profile-header { background: var(--card); border: 1px solid rgba(52, 216, 225, 0.1); padding: 1.5em !important; } body.light .profile-header { background: var(--card); border: 1px solid rgba(32, 185, 179, 0.15); padding: 1.5em !important; } .profile-header .profile-avatar img { width: 100px !important; height: 100px !important; } .profile-username { font-size: 1.5em !important; } .profile-username i { color: var(--accent); transition: all 0.2s; font-size: 0.8em !important; } .profile-username i:hover { color: var(--accent-dark); transform: scale(1.1); } body.light .profile-username i { color: var(--accent-dark); } .profile-handle { font-size: 0.9em !important; } .profile-bio { font-size: 0.9em !important; } .profile-meta { font-size: 0.85em !important; } /* Stat Cards */ body.dark .stat-card { background: var(--card); border: 1px solid rgba(52, 216, 225, 0.1); padding: 1.2em !important; } body.light .stat-card { background: var(--card); border: 1px solid rgba(32, 185, 179, 0.15); padding: 1.2em !important; } .stat-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(52, 216, 225, 0.15); border-color: var(--accent); } body.light .stat-card:hover { border-color: var(--accent-dark); box-shadow: 0 8px 24px rgba(32, 185, 179, 0.2); } .stat-value { color: var(--accent); font-size: 1.5em !important; } body.light .stat-value { color: var(--accent-dark); } .stat-label { font-size: 0.9em !important; } /* Content Sections */ body.dark .content-section { background: var(--card); border: 1px solid rgba(52, 216, 225, 0.1); padding: 1.5em !important; margin-bottom: 1em !important; border-radius: 12px; } body.light .content-section { background: var(--card); border: 1px solid rgba(32, 185, 179, 0.15); padding: 1.5em !important; margin-bottom: 1em !important; border-radius: 12px; } .section-title { color: var(--text); border-bottom: 2px solid rgba(52, 216, 225, 0.2); padding-bottom: 0.6em; margin-bottom: 1em !important; font-size: 1.1em !important; } .section-title i { color: var(--accent); font-size: 0.9em; } body.light .section-title { border-bottom-color: rgba(32, 185, 179, 0.2); } body.light .section-title i { color: var(--accent-dark); } /* Pinned Lists Container - Listenansicht */ .pinned-lists-container { display: flex; flex-direction: column; gap: 1rem; } body.dark .pinned-list-card { display: flex; gap: 1rem; padding: 1rem; border-radius: var(--radius-main); border: 1px solid rgba(52, 216, 225, 0.2); background: var(--card); transition: all 0.2s; cursor: pointer; } body.dark .pinned-list-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(52, 216, 225, 0.2); border-color: var(--accent); } body.light .pinned-list-card { display: flex; gap: 1rem; padding: 1rem; border-radius: var(--radius-main); border: 1px solid rgba(32, 185, 179, 0.2); background: rgba(255, 255, 255, 0.9); transition: all 0.2s; cursor: pointer; } body.light .pinned-list-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(32, 185, 179, 0.2); border-color: var(--accent-dark); } body.dark .pinned-list-icon { flex-shrink: 0; width: 70px; height: 70px; border-radius: var(--radius-img); overflow: hidden; background: rgba(52, 216, 225, 0.1); border: 2px solid rgba(52, 216, 225, 0.3); } body.light .pinned-list-icon { flex-shrink: 0; width: 70px; height: 70px; border-radius: var(--radius-img); overflow: hidden; background: rgba(32, 185, 179, 0.1); border: 2px solid rgba(32, 185, 179, 0.3); } .pinned-list-icon .list-image { width: 100%; height: 100%; object-fit: cover; } .pinned-list-content { flex: 1; display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; } .pinned-list-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } body.dark .pinned-list-title { font-size: 1.1rem; font-weight: 600; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); } body.light .pinned-list-title { font-size: 1.1rem; font-weight: 600; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #0b1320; } body.dark .btn-icon-inline { width: 32px; height: 32px; border-radius: 50%; background: transparent; border: 1px solid rgba(52, 216, 225, 0.5); color: var(--accent); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; flex-shrink: 0; } body.dark .btn-icon-inline:hover { background: var(--accent); color: var(--ink-on-accent); transform: scale(1.1); } body.light .btn-icon-inline { width: 32px; height: 32px; border-radius: 50%; background: transparent; border: 1px solid rgba(32, 185, 179, 0.5); color: var(--accent-dark); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; flex-shrink: 0; } body.light .btn-icon-inline:hover { background: var(--accent-dark); color: #ffffff; transform: scale(1.1); } /* Public Lists Grid */ body.light .btn-icon-inline:hover { background: var(--accent-dark); } /* Public Lists Grid */ /* Public Lists Grid */ .public-lists-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; margin-top: 1.5rem; } /* Override for pinned lists - not used, pinned-lists-grid is separate */ .pinned-lists-grid.public-lists-grid { grid-template-columns: repeat(3, 1fr) !important; } .public-list-card { background: var(--card); border: 1px solid rgba(52, 216, 225, 0.2); border-radius: 12px; overflow: hidden; transition: all 0.3s ease; cursor: pointer; display: flex; flex-direction: column; } body.dark .public-list-card:hover { border-color: var(--accent); transform: translateY(-4px); box-shadow: 0 8px 24px rgba(52, 216, 225, 0.3); } body.light .public-list-card { border-color: rgba(32, 185, 179, 0.2); } body.light .public-list-card:hover { border-color: var(--accent-dark); transform: translateY(-4px); box-shadow: 0 8px 24px rgba(32, 185, 179, 0.3); } .list-card-image { width: 100%; height: 180px; background-size: cover; background-position: center; background-color: rgba(52, 216, 225, 0.1); position: relative; } body.light .list-card-image { background-color: rgba(32, 185, 179, 0.1); } .list-card-content { flex: 1; padding: 1.2rem; display: flex; flex-direction: column; gap: 0.8rem; } .list-card-header { margin-bottom: 0; } .list-card-title { font-size: 1.1rem; font-weight: 600; color: var(--text); margin: 0; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .list-card-description { font-size: 0.9rem; color: var(--text-secondary); margin: 0; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .list-card-stats { display: flex; gap: 1rem; font-size: 0.85rem; color: var(--text-secondary); flex-wrap: wrap; margin-top: auto; padding-top: 0.5rem; border-top: 1px solid rgba(52, 216, 225, 0.1); } body.light .list-card-stats { border-top-color: rgba(32, 185, 179, 0.1); } .list-card-stats span { display: flex; align-items: center; gap: 0.3rem; } .list-card-stats i { color: var(--accent); } body.light .list-card-stats i { color: var(--accent-dark); } .btn-follow-list { background: var(--accent); color: var(--ink-on-accent); border: none; width: 100%; padding: 0.6rem; border-radius: 8px; font-weight: 500; transition: all 0.3s ease; } .btn-follow-list:hover { background: var(--accent-bright); transform: scale(1.02); } .btn-follow-list.following { background: #dc3545; } .btn-follow-list.following:hover { background: #c82333; } body.light .btn-follow-list { background: var(--accent-dark); } body.light .btn-follow-list:hover { background: var(--accent); } /* Friend Action Buttons */ .btn-friend-action { background: var(--accent); color: white; border: none; padding: 0.7em 1.5em; border-radius: var(--radius-main); font-weight: 600; cursor: pointer; transition: all 0.2s; display: inline-flex; align-items: center; gap: 0.5em; font-size: 0.95rem; } .btn-friend-action:hover { background: var(--accent-dark); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(52, 216, 225, 0.4); } body.light .btn-friend-action { background: var(--accent-dark); color: white; } body.light .btn-friend-action:hover { background: var(--accent); box-shadow: 0 4px 12px rgba(32, 185, 179, 0.4); } .btn-friend-pending { background: rgba(52, 216, 225, 0.2) !important; color: var(--accent) !important; cursor: default !important; } .btn-friend-pending:hover { transform: none !important; box-shadow: none !important; background: rgba(52, 216, 225, 0.2) !important; } body.light .btn-friend-pending { background: rgba(32, 185, 179, 0.2) !important; color: var(--accent-dark) !important; } body.light .btn-friend-pending:hover { background: rgba(32, 185, 179, 0.2) !important; } .btn-edit-profile { background: var(--card-light) !important; color: var(--accent) !important; border: 1.5px solid var(--accent) !important; } .btn-edit-profile:hover { background: var(--accent) !important; color: white !important; } body.light .btn-edit-profile { border-color: var(--accent-dark) !important; color: var(--accent-dark) !important; background: rgba(32, 185, 179, 0.08) !important; } body.light .btn-edit-profile:hover { background: var(--accent-dark) !important; color: white !important; } /* Activity Items */ body.dark .activity-item { background: rgba(52, 216, 225, 0.03); border-bottom: 1px solid rgba(52, 216, 225, 0.1); } body.light .activity-item { background: rgba(32, 185, 179, 0.03); border-bottom: 1px solid rgba(32, 185, 179, 0.1); } .activity-item:last-child { border-bottom: none; } body.dark .activity-icon { background: rgba(52, 216, 225, 0.1); color: var(--accent); } body.light .activity-icon { background: rgba(32, 185, 179, 0.1); color: var(--accent-dark); } .activity-text strong { color: var(--accent); font-weight: 600; } body.light .activity-text strong { color: var(--accent-dark); } /* Commonalities */ body.dark .commonality-item { background: linear-gradient(135deg, rgba(52, 216, 225, 0.05) 0%, rgba(52, 216, 225, 0.1) 100%); border: 1px solid rgba(52, 216, 225, 0.2); } body.light .commonality-item { background: linear-gradient(135deg, rgba(32, 185, 179, 0.05) 0%, rgba(32, 185, 179, 0.1) 100%); border: 1px solid rgba(32, 185, 179, 0.2); } .commonality-item:hover { transform: translateY(-4px); } body.dark .commonality-item:hover { background: linear-gradient(135deg, rgba(52, 216, 225, 0.1) 0%, rgba(52, 216, 225, 0.15) 100%); } body.light .commonality-item:hover { background: linear-gradient(135deg, rgba(32, 185, 179, 0.1) 0%, rgba(32, 185, 179, 0.15) 100%); } .commonality-icon { color: var(--accent); } body.light .commonality-icon { color: var(--accent-dark); } /* Friends Grid */ .friend-avatar img { border: 3px solid rgba(52, 216, 225, 0.3); transition: all 0.2s; } .friend-avatar:hover img { border-color: var(--accent); box-shadow: 0 4px 16px rgba(52, 216, 225, 0.3); } body.light .friend-avatar img { border-color: rgba(32, 185, 179, 0.3); } body.light .friend-avatar:hover img { border-color: var(--accent-dark); box-shadow: 0 4px 16px rgba(32, 185, 179, 0.3); } .friend-avatar:hover .friend-name { color: var(--accent); } body.light .friend-avatar:hover .friend-name { color: var(--accent-dark); } /* Favorites Grid */ .favorite-star { background: rgba(0, 0, 0, 0.7); color: var(--accent); backdrop-filter: blur(8px); } body.light .favorite-star { background: rgba(255, 255, 255, 0.9); color: var(--accent-dark); } .favorite-item:hover { box-shadow: 0 12px 32px rgba(52, 216, 225, 0.3); } body.light .favorite-item:hover { box-shadow: 0 12px 32px rgba(32, 185, 179, 0.3); } /* =============================== RATING FUNCTIONALITY =============================== */ /* Rating Button Container im Status Modal */ .rating-button-container { margin-top: 1rem; padding-top: 1rem; padding-bottom: 1rem; border-top: 1px solid rgba(255, 255, 255, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.1); } body.light .rating-button-container { border-top: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(0, 0, 0, 0.1); } .btn-rate-item { /* Nutzt bestehende btn-action-full Klasse, hier nur zusätzliches Styling */ width: 100%; } .btn-rate-outline { width: 100%; padding: 0.75em 1em; background: rgba(255, 255, 255, 0.05); color: var(--accent); border: 2px solid var(--accent); border-radius: var(--radius-main); font-weight: 600; font-size: 0.9em; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; justify-content: center; gap: 0.5em; } .btn-rate-outline:hover { background: var(--accent); color: white; transform: translateY(-1px); box-shadow: 0 2px 8px rgba(52, 216, 225, 0.3); } body.light .btn-rate-outline { background: rgba(0, 0, 0, 0.03); color: var(--accent-dark); border-color: var(--accent-dark); } /* Rating Modal */ .rating-modal-inner { max-width: 500px; width: 90%; margin: 2rem auto; } .rating-modal-content { padding: 2rem; } .rating-modal-title { font-size: 1.5rem; font-weight: 700; margin-bottom: 1.5rem; text-align: center; } body.dark .rating-modal-title { color: var(--text); } body.light .rating-modal-title { color: #0b1320; } /* Sterne-Auswahl */ .rating-stars-select { display: flex; justify-content: center; gap: 0.5rem; margin: 1.5rem 0; } .star-btn { background: none; border: none; font-size: 2.5rem; cursor: pointer; color: #64748b; transition: all 0.2s ease; padding: 0.25rem; } .star-btn i { transition: all 0.2s ease; } .star-btn:hover i, .star-btn.active i { color: #f59e0b; transform: scale(1.1); } .star-btn:active i { transform: scale(0.95); } /* Rating Value Display */ .rating-value-display { text-align: center; font-size: 1.25rem; font-weight: 600; margin: 1rem 0; } body.dark .rating-value-display { color: var(--accent); } body.light .rating-value-display { color: var(--accent-dark); } #ratingValue { font-size: 2rem; font-weight: 700; color: #f59e0b; } /* Rating Stars Display (in Cards) */ .rating-display { padding-top: 0.75rem; border-top: 1px solid rgba(255, 255, 255, 0.1); } body.light .rating-display { border-top: 1px solid rgba(0, 0, 0, 0.1); } .my-rating { margin-bottom: 0.5rem; } .rating-stars { display: inline-flex; gap: 0.15rem; margin-right: 0.5rem; } .rating-star-gold { color: #f59e0b; font-size: 1rem; } .rating-star-grey { color: #64748b; font-size: 1rem; } .rating-number { font-weight: 600; color: #f59e0b; font-size: 0.95rem; } .rating-comment { font-style: italic; line-height: 1.4; max-width: 100%; word-wrap: break-word; } .rating-date { opacity: 0.7; } .not-rated { font-style: italic; } /* Rating Card Wrapper */ .rating-card-wrapper { cursor: pointer; } .rating-card { transition: all 0.2s ease; } .rating-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(52, 216, 225, 0.3); } body.light .rating-card:hover { box-shadow: 0 8px 24px rgba(32, 185, 179, 0.3); } /* Rating Average Badge */ .rating-average-badge { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0.75rem; background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); color: white; border-radius: 20px; font-size: 0.875rem; font-weight: 600; margin-left: 0.5rem; } .rating-average-badge i { font-size: 0.75rem; } .rating-average-badge-small { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.15rem 0.5rem; background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); color: white; border-radius: 12px; font-size: 0.75rem; font-weight: 600; margin-left: 0.5rem; } .rating-average-badge-small i { font-size: 0.65rem; } /* Responsive */ @media (max-width: 576px) { .rating-stars-select { gap: 0.25rem; } .star-btn { font-size: 2rem; } .rating-modal-content { padding: 1.5rem; } } /* =============================== RATINGS IN DETAIL MODAL =============================== */ .rating-item { padding: 1rem; margin-bottom: 1rem; border-radius: var(--radius-main); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.2); } .dark .rating-item { color: #ffffff; } body.light .rating-item { background: rgba(0, 0, 0, 0.06); border: 1px solid rgba(0, 0, 0, 0.15); } .rating-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; } .rating-user { display: flex; align-items: center; gap: 0.5rem; } .rating-user-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; } .rating-user-avatar-placeholder { width: 32px; height: 32px; border-radius: 50%; background: var(--accent); display: flex; align-items: center; justify-content: center; color: white; font-size: 0.875rem; } .rating-stars-display { display: flex; align-items: center; gap: 0.5rem; } .stars-gold { color: #f59e0b; font-size: 1.125rem; letter-spacing: 2px; } .rating-value { font-weight: 600; color: #f59e0b; font-size: 0.875rem; } .rating-comment { margin-top: 0.5rem; padding: 0.75rem; background: rgba(0, 0, 0, 0.2); border-radius: 8px; font-style: italic; line-height: 1.5; } body.light .rating-comment { background: rgba(0, 0, 0, 0.05); } .rating-date { margin-top: 0.5rem; font-size: 0.8rem; opacity: 0.7; } .ratings-list { max-height: 400px; overflow-y: auto; } .ratings-list::-webkit-scrollbar { width: 6px; } .ratings-list::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 3px; } /* =============================== Discover Pages (neue Filme/Serien) =============================== */ /* Animations */ @keyframes slideIn { from { transform: translateX(400px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes slideOut { from { transform: translateX(0); opacity: 1; } to { transform: translateX(400px); opacity: 0; } } /* Discover Grid */ .discover-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; padding: 1rem 0; } @media (max-width: 768px) { .discover-grid { gap: 1rem; } } /* Discover Item */ .discover-item { position: relative; transition: transform 0.2s ease; } .discover-item:hover { transform: translateY(-5px); } .discover-poster-wrapper { position: relative; border-radius: var(--radius-img); overflow: hidden; background: var(--card-light); aspect-ratio: 2/3; } .discover-poster { width: 100%; height: 100%; object-fit: cover; display: block; } /* Hover-Overlay */ .discover-overlay { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.6) 50%, transparent 100%); padding: 0.75rem; opacity: 0; transition: opacity 0.3s ease; display: flex; justify-content: space-between; align-items: flex-end; } .discover-item:hover .discover-overlay { opacity: 1; } .discover-rating { color: #ffc107; font-weight: 600; font-size: 0.9rem; } .discover-rating i { margin-right: 0.25rem; } .discover-year { color: #fff; font-size: 0.85rem; opacity: 0.9; } /* Action Icons */ .discover-actions { position: absolute; top: 0.5rem; left: 0.5rem; right: 0.5rem; display: flex; justify-content: space-between; opacity: 1; pointer-events: none; } .discover-actions>* { pointer-events: auto; } .discover-action-btn { background: rgba(0, 0, 0, 0.7); border: none; color: #fff; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; backdrop-filter: blur(4px); } .discover-action-btn:hover { transform: scale(1.1); } .discover-action-add { background: rgba(26, 153, 144, 0.9); } .discover-action-add:hover { background: rgba(26, 153, 144, 1); } .discover-action-info { background: rgba(255, 255, 255, 0.2); } .discover-action-info:hover { background: rgba(255, 255, 255, 0.3); } /* Titel */ .discover-title { margin-top: 0.75rem; font-size: 1.0rem; font-weight: 500; color: var(--text); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } /* Page Header */ .page-header { text-align: center; margin-bottom: 2rem; } .page-title { font-size: 2rem; font-weight: 700; color: var(--text); margin-bottom: 0.5rem; } .page-title i { color: var(--accent); margin-right: 0.5rem; } .page-subtitle { font-size: 1.1rem; } /* Admin Stat Cards */ .stat-card { transition: all 0.3s ease; border: 1px solid; } body.dark .stat-card-bg { background: var(--card) !important; border-color: rgba(255, 255, 255, 0.1) !important; } body.light .stat-card-bg { background: #f8f9fa !important; border-color: rgba(0, 0, 0, 0.1) !important; } body.dark .stat-card-bg:hover { background: var(--card-light) !important; border-color: var(--accent) !important; } body.light .stat-card-bg:hover { background: #e9ecef !important; border-color: var(--accent) !important; } /* =============================== Date Input Calendar Icon - Weiß machen =============================== */ /* Eigenes weißes Kalender-Icon als Hintergrund für ALLE Geräte */ body.dark input[type="date"], body.dark input[type="datetime-local"], body.light input[type="date"], body.light input[type="datetime-local"], input[type="date"], input[type="datetime-local"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23ffffff' d='M128 0c17.7 0 32 14.3 32 32V64H288V32c0-17.7 14.3-32 32-32s32 14.3 32 32V64h48c26.5 0 48 21.5 48 48v48H0V112C0 85.5 21.5 64 48 64H96V32c0-17.7 14.3-32 32-32zM0 192H448V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V192zm64 80v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H80c-8.8 0-16 7.2-16 16zm128 0v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H208c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H336zM64 400v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H80c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H208zm112 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H336c-8.8 0-16 7.2-16 16z'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 10px center !important; background-size: 18px 18px !important; padding-right: 40px !important; } /* Natives Icon unsichtbar aber klickbar machen */ input[type="date"]::-webkit-calendar-picker-indicator, input[type="datetime-local"]::-webkit-calendar-picker-indicator { opacity: 0; position: absolute; right: 0; width: 40px; height: 100%; cursor: pointer; } /* =============================== Poll Styles =============================== */ .poll-box { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; padding: 1.25rem; margin: 0 1rem 1.5rem 1rem; } .poll-box h6 { margin: 0 0 1rem 0; font-weight: 600; font-size: 1rem; color: var(--text-color); } .poll-option { margin-bottom: 0.75rem; } .poll-option-label { display: flex; align-items: center; cursor: pointer; padding: 0.75rem 1rem; border-radius: 6px; background: var(--bg-color); } .poll-option-checkbox { margin-right: 1rem; width: 18px; height: 18px; cursor: pointer; } .poll-option-poster { width: 45px; height: 67px; object-fit: cover; border-radius: 4px; margin-right: 1rem; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); } .poll-option-text { flex: 1; font-size: 0.95rem; } .poll-option-count { padding: 0.3rem 0.7rem; border-radius: 12px; background: var(--accent); color: white; font-size: 0.85rem; font-weight: 600; min-width: 30px; text-align: center; } .poll-option-count.green { background: #28a745; } .poll-progress { height: 10px; background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 4px; margin-top: 0.5rem; overflow: hidden; } .poll-progress-bar { height: 100%; background: var(--accent); transition: width 0.3s; min-width: 2px; box-shadow: 0 0 8px rgba(26, 153, 144, 0.6); } .poll-progress-bar.green { background: #28a745; } .poll-special-option { display: flex; align-items: center; cursor: pointer; padding: 0.75rem; background: var(--bg-color); border-radius: 6px; margin-top: 1rem; } .poll-special-option input { margin-right: 0.75rem; } /* Checkbox Styling für Polls */ .poll-option-checkbox:checked { accent-color: var(--accent); } .poll-special-option input[type="checkbox"]:checked { accent-color: var(--accent); } .poll-submit-wrapper { padding: 0 1rem 1rem 1rem; margin-bottom: 2rem; } .poll-submit-wrapper .btn { width: 100%; } /* Poll Header */ .poll-header { padding: 1rem; background: var(--card-bg); margin: 1rem; border-radius: 8px; } .poll-header-top { display: flex; justify-content: space-between; align-items: start; margin-bottom: 1rem; } .poll-header-top h5 { margin: 0 0 0.5rem 0; } .poll-header-top p { color: var(--text-soft); margin: 0; } .poll-status-badge { padding: 0.25rem 0.75rem; border-radius: 4px; font-size: 0.85rem; border: 2px solid transparent; } .poll-status-badge.active { background: transparent; color: var(--accent); border-color: var(--accent); } .poll-status-badge.inactive { background: #666; color: white; } .poll-header-info { font-size: 0.9rem; color: var(--text-soft); margin-bottom: 1.5rem; } .poll-location-text { color: var(--text-soft); margin-left: 0.5rem; font-size: 0.9rem; } /* Poll Results */ .poll-results { padding: 1rem; margin: 0 1rem 1rem 1rem; background: var(--card-bg); border-radius: 8px; } .poll-results h6 { margin: 0 0 1rem 0; color: var(--text); } .poll-results h6 i { color: var(--accent); margin-right: 0.5rem; } .poll-results-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; } .poll-result-section h6 { margin: 0 0 0.75rem 0; font-size: 0.95rem; font-weight: 600; color: var(--text); padding-bottom: 0.5rem; border-bottom: 2px solid var(--accent); } .poll-result-item { margin-bottom: 1rem; padding: 0.75rem; background: var(--card); border-radius: 6px; border-left: 3px solid transparent; transition: all 0.2s ease; } .poll-result-item:hover { border-left-color: var(--accent); transform: translateX(2px); } .poll-result-item:last-child { margin-bottom: 0; } .poll-result-header { display: flex; justify-content: space-between; align-items: center; font-size: 0.9rem; margin-bottom: 0.5rem; font-weight: 500; } .poll-result-header span:first-child { color: var(--text); } .poll-result-header span:last-child { color: var(--accent); font-weight: 600; font-size: 0.85rem; } .poll-result-bar { height: 10px; background: rgba(26, 153, 144, 0.1); border-radius: 5px; overflow: hidden; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); } .poll-result-bar-fill { height: 100%; background: linear-gradient(90deg, var(--accent) 0%, var(--accent-dark) 100%); border-radius: 5px; transition: width 0.3s ease; } .poll-result-bar-fill.green { background: #28a745; } .poll-alert-info { padding: 1rem; background: #d1ecf1; color: #0c5460; border-radius: 4px; margin-bottom: 1.5rem; } .poll-alert-warning { padding: 1rem; background: #fff3cd; color: #856404; border-radius: 4px; margin-bottom: 1.5rem; } .poll-alert-success { padding: 1rem; background: #d4edda; color: #155724; border-radius: 4px; margin: 1rem; } /* Modul-Verwaltung (Admin + Gruppen) */ .module-setting-card, .module-toggle-card { transition: all 0.2s ease; } .module-setting-card:hover, .module-toggle-card:hover { border-color: var(--accent) !important; } body.dark .module-setting-card, body.dark .module-toggle-card { background: var(--card); border-color: rgba(52, 216, 225, 0.15); } body.dark .form-check-input:checked { background-color: var(--accent); border-color: var(--accent); } .poll-alert-success h6 { margin: 0 0 0.5rem 0; } .poll-alert-success p { margin: 0; } .poll-finalize-btn { width: 100%; padding: 0.75rem; background: #28a745; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 1rem; margin-bottom: 1.5rem; } /* =============================== PWA - AJAX Navigation Page Transitions & Loading States =============================== */ /* Smooth Page Transitions */ body { transition: opacity 200ms ease-in-out, transform 250ms cubic-bezier(0.4, 0, 0.2, 1); } /* Loading Progress Bar */ #page-loading-bar { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--accent), var(--accent-dark)); transform: translateX(-100%); transition: transform 300ms ease-out, opacity 200ms; z-index: 99999; box-shadow: 0 0 10px rgba(26, 153, 144, 0.5); } /* Skeleton Loader */ .skeleton { background: linear-gradient(90deg, var(--card) 0%, rgba(255, 255, 255, 0.05) 50%, var(--card) 100%); background-size: 200% 100%; animation: skeleton-loading 1.5s infinite; border-radius: var(--radius-img); } @keyframes skeleton-loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Link Tap Feedback */ a:active, button:active, .btn:active { transform: scale(0.98); opacity: 0.9; } /* =============================== WARTUNGSMODUS =============================== */ :root { --maintenance-bg-primary: #0d1117; --maintenance-bg-secondary: #161b22; --maintenance-text-primary: #c9d1d9; --maintenance-text-muted: #8b949e; --maintenance-accent: #58a6ff; --maintenance-border: #30363d; } body.maintenance-mode { background: linear-gradient(135deg, var(--maintenance-bg-primary) 0%, var(--maintenance-bg-secondary) 100%); color: var(--maintenance-text-primary); min-height: 100vh; display: flex; align-items: center; justify-content: center; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; overflow: hidden; } .maintenance-container { text-align: center; padding: 2rem; max-width: 600px; } .maintenance-logo { width: 120px; height: 120px; margin: 0 auto 2rem; background: var(--maintenance-bg-secondary); border-radius: 24px; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); border: 2px solid var(--maintenance-border); } .maintenance-logo i { font-size: 3.5rem; color: var(--maintenance-accent); animation: maintenance-pulse 2s ease-in-out infinite; } @keyframes maintenance-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.7; transform: scale(0.95); } } .maintenance-container h1 { font-size: 2.5rem; font-weight: 700; margin-bottom: 1rem; background: linear-gradient(135deg, var(--maintenance-accent) 0%, #79c0ff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .maintenance-container p { font-size: 1.25rem; color: var(--maintenance-text-muted); line-height: 1.6; margin-bottom: 2rem; } .maintenance-spinner-container { margin: 2rem 0; } .maintenance-spinner { width: 48px; height: 48px; border: 4px solid var(--maintenance-border); border-top-color: var(--maintenance-accent); border-radius: 50%; animation: maintenance-spin 1s linear infinite; margin: 0 auto; } @keyframes maintenance-spin { to { transform: rotate(360deg); } } .maintenance-status-text { color: var(--maintenance-text-muted); font-size: 0.9rem; margin-top: 1rem; } .maintenance-admin-link { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--maintenance-border); } .maintenance-admin-link a { color: var(--maintenance-accent); text-decoration: none; font-size: 0.875rem; } .maintenance-admin-link a:hover { text-decoration: underline; } /* =============================== THREAD DETAIL / CHAT =============================== */ /* Page-specific overrides for chat */ body.page-thread_detail { overflow: hidden; padding-bottom: 0; } body.page-thread_detail .bottom-nav { display: none; } /* Chat Container */ .chat-container { display: flex; flex-direction: column; height: 100vh; background: var(--bg); position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1000; } /* Chat Header */ .chat-header { background: var(--header); padding: 1rem; border-bottom: 1px solid rgba(52, 216, 225, 0.2); display: flex; align-items: center; gap: 1rem; position: sticky; top: 0; z-index: 100; } .chat-header .back-btn { background: transparent; border: none; color: var(--accent); font-size: 1.5rem; cursor: pointer; padding: 0.5rem; display: flex; align-items: center; justify-content: center; } .chat-header-info { flex: 1; } .chat-header .report-btn, .chat-header .edit-poll-btn { background: transparent; border: none; color: var(--text-soft); font-size: 1.2rem; cursor: pointer; padding: 0.5rem; display: flex; align-items: center; justify-content: center; transition: color 0.2s; } .chat-header .report-btn:hover { color: #ef4444; } .chat-header .edit-poll-btn:hover { color: var(--accent); } .chat-header-title { font-size: 1.1rem; font-weight: 600; margin: 0; color: var(--text); } .chat-header-subtitle { font-size: 0.85rem; color: var(--text-soft); margin: 0; } /* Item Detail Banner */ .item-detail-banner { background: rgba(52, 216, 225, 0.05); border-bottom: 1px solid rgba(52, 216, 225, 0.2); padding: 0.75rem; display: flex; gap: 0.75rem; align-items: center; } .item-detail-banner .item-poster { width: 50px; height: 75px; object-fit: cover; border-radius: 6px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); flex-shrink: 0; } .item-detail-banner .item-info { flex: 1; min-width: 0; } .item-detail-banner .item-title { font-size: 0.95rem; font-weight: 600; margin-bottom: 0.25rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .item-detail-banner .item-meta { margin-bottom: 0; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .item-detail-banner .item-meta .badge { font-size: 0.75rem; padding: 0.25rem 0.5rem; } .item-detail-banner .item-meta .text-muted { font-size: 0.75rem; } .item-detail-banner .banner-icons { display: flex; gap: 0.75rem; align-items: center; flex-shrink: 0; } .item-detail-banner .icon-add-to-list, .item-detail-banner .icon-view-details { color: var(--accent); font-size: 1.3rem; cursor: pointer; transition: all 0.2s; padding: 0.25rem; } .item-detail-banner .icon-add-to-list:hover, .item-detail-banner .icon-view-details:hover { color: var(--accent-dark); transform: scale(1.1); } .item-detail-banner .icon-add-to-list:active, .item-detail-banner .icon-view-details:active { transform: scale(0.95); } /* Poll Detail Container */ .poll-detail-container { flex: 1; overflow-y: auto; padding-bottom: 6rem; background: var(--bg); } /* Messages Container */ .messages-container { flex: 1; overflow-y: auto; padding: 1rem; padding-bottom: 100px; background: var(--bg); } .message { margin-bottom: 1rem; display: flex; flex-direction: column; } .message.own { align-items: flex-end; } .message-bubble { max-width: 75%; padding: 0.75rem 1rem; border-radius: 12px; word-wrap: break-word; } .message.own .message-bubble { background: var(--accent); color: var(--ink-on-accent); border-bottom-right-radius: 0px; } .message:not(.own) .message-bubble { background: var(--card); color: var(--text); border-bottom-left-radius: 0px; } .message-username { font-weight: 600; font-size: 0.85rem; margin-bottom: 0.3rem; color: var(--accent); } .message-content { margin-bottom: 0.3rem; line-height: 1.4; } .message-time { font-size: 0.75rem; opacity: 0.7; text-align: right; } /* Message Input */ .message-input-container { background: var(--card); border-top: 1px solid rgba(52, 216, 225, 0.2); padding: 1rem; display: flex; gap: 0.75rem; align-items: center; position: sticky; bottom: 0; z-index: 100; flex-shrink: 0; } .message-input-container input { flex: 1; background: var(--bg); border: 1px solid rgba(52, 216, 225, 0.3); border-radius: 24px; padding: 0.75rem 1rem; color: var(--text); font-size: 1rem; } .message-input-container input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(52, 216, 225, 0.1); } /* Emoji Picker */ .emoji-btn { background: transparent; border: none; color: var(--text); font-size: 1.5rem; cursor: pointer; padding: 0.5rem; transition: transform 0.2s; opacity: 0.7; } .emoji-btn:hover { transform: scale(1.1); opacity: 1; } .emoji-picker { position: absolute; bottom: 75px; right: 1rem; left: 1rem; max-width: 340px; margin-left: auto; background: var(--card); border: 2px solid rgba(52, 216, 225, 0.5); border-radius: 12px; padding: 1rem; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); display: none; grid-template-columns: repeat(8, 1fr); gap: 0.5rem; max-height: 280px; overflow-y: auto; overflow-x: hidden; z-index: 9999; } .emoji-picker.show { display: grid; } .emoji-item { font-size: 1.5rem; cursor: pointer; padding: 0.5rem; text-align: center; border-radius: 6px; transition: all 0.2s; user-select: none; } .emoji-item:hover { background: rgba(52, 216, 225, 0.3); transform: scale(1.2); } /* Send Button */ .send-btn { background: var(--accent); border: none; border-radius: 50%; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: var(--ink-on-accent); font-size: 1.2rem; cursor: pointer; transition: all 0.2s; } .send-btn:hover { background: var(--accent-dark); transform: scale(1.05); } .send-btn:active { transform: scale(0.95); } /* Empty State */ .empty-chat { text-align: center; padding: 3rem 1rem; color: var(--text-soft); } .empty-chat i { font-size: 3rem; margin-bottom: 1rem; opacity: 0.3; } /* Light Mode Overrides */ body.light .message:not(.own) .message-bubble { background: #f1f3f5; color: #1e293b; } body.light .message-input-container input { background: #ffffff; } /* Report Modal */ .report-modal { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.7); z-index: 9999; align-items: center; justify-content: center; } .report-modal.show { display: flex; } .report-modal-content { background: var(--bg); border-radius: 12px; padding: 1.5rem; max-width: 500px; width: 90%; max-height: 95vh; overflow-y: auto; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); } .report-modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; } .report-modal-header h3 { color: var(--text); margin: 0; font-size: 1.2rem; } .report-modal-close { background: transparent; border: none; color: var(--text-soft); font-size: 1.5rem; cursor: pointer; padding: 0; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; } .report-modal-body { margin-bottom: 1rem; } .report-modal-body label { display: block; color: var(--text); margin-bottom: 0.5rem; font-size: 0.95rem; } .report-modal-body textarea { width: 100%; padding: 0.75rem; border: 1px solid rgba(52, 216, 225, 0.3); border-radius: 8px; background: var(--bg-secondary); color: var(--text); font-size: 0.95rem; resize: vertical; min-height: 100px; } .report-modal-footer { display: flex; gap: 0.75rem; justify-content: flex-end; } .report-modal-footer button { padding: 0.6rem 1.2rem; border: none; border-radius: 8px; cursor: pointer; font-size: 0.95rem; transition: all 0.2s; } .report-modal-footer .btn-cancel { background: var(--bg-secondary); color: var(--text); } .report-modal-footer .btn-cancel:hover { background: var(--bg-hover); } .report-modal-footer .btn-submit { background: #ef4444; color: white; } .report-modal-footer .btn-submit:hover { background: #dc2626; } .report-modal-footer .btn-submit:disabled { opacity: 0.5; cursor: not-allowed; } .page-devices .card-title { font-size: 15px; } .page-devices .card.border-primary .badge.bg-primary { background-color: var(--accent-dark); }