From cbbbe6a9aeb5f851914980720a0c360446f3bb89 Mon Sep 17 00:00:00 2001 From: M_Viper Date: Fri, 18 Oct 2024 13:00:49 +0000 Subject: [PATCH] public/css/styles.css aktualisiert --- public/css/styles.css | 1381 +++++++++++++++++++++-------------------- 1 file changed, 691 insertions(+), 690 deletions(-) diff --git a/public/css/styles.css b/public/css/styles.css index 0b29a2e..4937893 100644 --- a/public/css/styles.css +++ b/public/css/styles.css @@ -1,690 +1,691 @@ -body { - font-family: 'Arial', sans-serif; - background-color: #f0f4f8; /* Helles Hintergrundfarbe */ - color: #333; /* Dunkle Schriftfarbe */ - margin: 0; - padding: 0; - display: flex; - flex-direction: column; - align-items: center; - height: 100vh; - overflow-x: hidden; - transition: background-color 0.3s, color 0.3s; -} - -body.dark-mode { - background-color: #121212; /* Dunkler Hintergrund für den Darkmode */ - color: #f0f4f8; /* Helle Schriftfarbe im Darkmode */ -} - -.switch { - position: fixed; /* Fixiert die Position des Schalters */ - bottom: 20px; /* Abstand vom unteren Rand */ - right: 20px; /* Abstand vom rechten Rand */ - z-index: 1000; /* Sicherstellen, dass es über anderen Inhalten liegt */ - width: 50px; /* Breite des Umschalters */ - height: 24px; /* Höhe des Umschalters */ -} - -.switch input { - opacity: 0; /* Unsichtbar, um nur den Slider anzuzeigen */ - width: 0; - height: 0; -} - -.slider { - position: absolute; - cursor: pointer; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-color: #ccc; /* Hintergrundfarbe des Umschalters */ - transition: .4s; /* Übergang für den Umschalters */ - border-radius: 34px; /* Abgerundete Ecken für den Umschalters */ -} - -.slider:before { - position: absolute; - content: ""; - height: 20px; /* Höhe des Schiebereglers */ - width: 20px; /* Breite des Schiebereglers */ - left: 2px; /* Abstand vom linken Rand */ - bottom: 2px; /* Abstand vom unteren Rand */ - background-color: white; /* Hintergrundfarbe des Schiebereglers */ - border-radius: 50%; /* Abgerundete Ecken für den Schieberegler */ - transition: .4s; /* Übergang für den Schieberegler */ -} - -/* Zustand für den aktiven Schieberegler */ -input:checked + .slider { - background-color: #3b82f6; /* Hintergrundfarbe des Umschalters bei Aktivierung */ -} - -input:checked + .slider:before { - transform: translateX(26px); /* Bewege den Schieberegler nach rechts */ -} - -.container { - display: flex; - justify-content: space-between; - width: 90%; /* Stelle sicher, dass es nicht mehr als 100% des Viewports einnimmt */ - max-width: 1200px; /* Maximale Breite für größere Bildschirme */ - margin: 0 auto; /* Zentrieren der Container */ - margin-top: 200px; /* Negativer Margin, um den Container nach unten zu verschieben */ - overflow: hidden; /* Verhindert Überlauf */ -} - -main { - flex: 1; - padding: 20px; - background-color: #1f2937; /* Hintergrund für den Hauptbereich */ - transition: background-color 0.3s; /* Übergang für den Hintergrund */ - border-radius: 15px; /* Optional: Abgerundete Ecken */ - border: 4px solid #3b82f6; - color: #ffff; -} - -body.dark-mode main { - background-color: #1e1e1e; /* Dunkler Hintergrund für den Hauptbereich im Darkmode */ - color: #ffff; -} - -.movies-box { - background-color: #fff; /* Hintergrund für die Filme */ - margin-top: 40px; /* Abstand nach oben */ - padding: 20px; /* Innenabstand */ - border-radius: 12px; /* Abgerundete Ecken */ - box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Schatten */ - display: flex; - flex-direction: column; /* Kolonne */ - align-items: center; /* Zentriert horizontal */ - justify-content: center; /* Zentriert vertikal */ - max-width: 100%; /* Maximale Breite */ - margin-bottom: 20px; /* Abstand nach unten */ -} - -#movies-list { - display: flex; /* Damit die Bilder nebeneinander angezeigt werden */ - flex-wrap: wrap; /* Damit die Bilder in die nächste Zeile umbrechen, wenn sie nicht mehr passen */ - justify-content: center; /* Zentriert die Filme im Container */ - list-style-type: none; /* Entfernt Aufzählungszeichen */ - padding: 0; /* Entfernt Padding */ - margin: 0; /* Entfernt Margin */ -} - -.movie-item { - margin: 10px; /* Abstand zwischen den Bildern */ - opacity: 0; /* Startwert für die Opazität */ - transition: opacity 0.5s ease-in; /* Übergang für die Opazität */ - display: flex; /* Flex-Container für die Inhalte */ - flex-direction: column; /* Vertikale Anordnung */ - align-items: center; /* Zentriert den Inhalt (Cover und Titel) */ -} - -.movie-item img { - border-radius: 5px; /* Abgerundete Ecken für die Bilder */ - width: 120px; /* Breite anpassen */ - height: 180px; /* Höhe anpassen */ - box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Schatten für die Bilder */ -} - -.movie-item.loaded { - opacity: 1; /* Sichtbar wenn geladen */ -} - -.sidebar { - width: 300px; /* Feste Breite für die Sidebar */ - padding: 5px; - background-color: #ffffff00; /* Weißer Hintergrund für die Sidebar */ - border-radius: 8px; /* Abgerundete Ecken für die Sidebar */ - margin-left: 20px; - max-width: 100%; /* Verhindert, dass die Sidebar breiter als der Container wird */ - -} - -body.dark-mode .sidebar { - background-color: #2c2c2c00; /* Dunkler Hintergrund für die Sidebar im Darkmode */ -} - -.newsletter-box { - background-color: #f9f9f9; /* Heller Hintergrund für die Newsletter-Box */ - padding: 20px; /* Innenabstand für die Newsletter-Box */ - border-radius: 8px; /* Abgerundete Ecken */ - box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Schatten für die Newsletter-Box */ - border: 4px solid #3b82f6; -} - -body.dark-mode .newsletter-box { - background-color: #3a3a3a; /* Dunkler Hintergrund für die Newsletter-Box im Darkmode */ -} - -h2 { - color: #1f2937; /* Titel für die Filme */ - margin-bottom: 10px; /* Abstand unter dem Untertitel */ -} - -h3 { - color: #ffff; /* Titel für die Filme */ - margin-bottom: 10px; /* Abstand unter dem Untertitel */ -} - -body.dark-mode h2 { - color: #3b82f6; /* Helle Schriftfarbe für die Titel im Darkmode */ -} - -input { - margin: 10px 0; - padding: 10px; - width: calc(100% - 22px); /* Vollständige Breite abzüglich Padding */ - border: 1px solid #ccc; /* Rahmen für Eingabefelder */ - border-radius: 5px; /* Abgerundete Ecken für Eingabefelder */ - transition: border-color 0.3s; /* Übergang für die Rahmenfarbe */ -} - -button { - padding: 10px; - background-color: #3b82f6; /* Hintergrund für den Button */ - color: white; - border: none; - border-radius: 5px; /* Abgerundete Ecken für den Button */ - cursor: pointer; - transition: background-color 0.3s; /* Übergangseffekt für Hintergrundfarbe */ - font-size: 1em; /* Schriftgröße anpassen */ -} - -button:hover { - background-color: #2274f8; /* Dunkleres bei Hover */ -} - -body.dark-mode button:hover { - background-color: #2274f8; /* Dunkleres im Darkmode bei Hover */ -} - -.telegram-connect-box { - background-color: #3b82f6; /* Grüner Hintergrund für die Telegram-Box */ - padding: 10px; /* Innenabstand für die Telegram-Box */ - border-radius: 8px; /* Abgerundete Ecken */ - box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Schatten für die Telegram-Box */ - margin: 20px auto; /* Abstand nach oben und unten, zentriert horizontal */ - text-align: center; /* Zentrierter Text */ - width: auto; /* Automatische Breite */ - max-width: 90%; /* Maximale Breite auf 90% des Containers */ -} - -.telegram-connect-box p { - color: white; /* Weiße Schriftfarbe */ - margin: 0 0 10px 0; -} - -body.dark-mode .telegram-connect-box p { - color: #f0f4f8; /* Helle Schriftfarbe für den Telegram-Box im Darkmode */ -} - -.telegram-connect-box a { - display: inline-block; /* Inline-Block für den Link */ - padding: 10px 15px; /* Innenabstand für den Link */ - background-color: #fff; /* Weißer Hintergrund für den Link */ - color: #3b82f6; /* Grüner Text für den Link */ - border-radius: 5px; /* Abgerundete Ecken für den Link */ - text-decoration: none; /* Keine Unterstreichung für den Link */ - transition: background-color 0.3s; /* Übergang für den Hintergrund */ -} - -.telegram-connect-box a:hover { - background-color: #e0e0e0; /* Hellerer Hintergrund bei Hover */ -} - -body.dark-mode .telegram-connect-box a { - background-color: #3a3a3a; /* Dunkler Hintergrund für den Link im Darkmode */ - color: #3b82f6; /* Helle Schriftfarbe für den Link im Darkmode */ -} - -.gitea-box { - background-color: #f9f9f9; /* Heller Hintergrund für die Gitea-Box */ - padding: 10px; /* Innenabstand für die Gitea-Box */ - border-radius: 8px; /* Abgerundete Ecken */ - box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Schatten für die Gitea-Box */ - margin-top: 20px; /* Abstand zur vorherigen Box */ - text-align: center; /* Zentrierter Text */ - border: 4px solid #3b82f6; -} - -body.dark-mode .gitea-box { - background-color: #3a3a3a; /* Dunkler Hintergrund für die Gitea-Box im Darkmode */ -} - -body.dark-mode .gitea-box p, -body.dark-mode .gitea-box a { - color: #f0f4f8; /* Helle Schriftfarbe im Darkmode für Text und Links */ -} - -.links-list { - display: flex; - flex-wrap: wrap; - justify-content: space-between; - padding: 0; - list-style: none; - max-width: 600px; - margin: 0 auto; -} - -.links-list li { - width: 48%; /* Zwei Links nebeneinander */ - margin-bottom: 10px; -} - -.links-list a { - text-decoration: none; - color: #333; - display: block; - padding: 10px; - background-color: #f0f4f8; - border: 1px solid #ddd; - border-radius: 5px; - text-align: center; -} - -.links-list a:hover { - background-color: #3b82f6; - color: #fff; -} - -.movie-item { - opacity: 0; - transition: opacity 0.5s ease-in-out; -} - -.movie-item.visible { - opacity: 1; -} - -.movie-popup { - position: fixed; - background-color: rgba(0, 0, 0, 0.8); - color: white; - border-radius: 8px; - padding: 20px; - z-index: 1000; - max-width: 300px; - text-align: center; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); - display: none; /* Standardmäßig ausgeblendet */ -} - -.movie-popup img { - max-width: 100%; - border-radius: 4px; -} - -body { - font-family: 'Arial', sans-serif; - background-color: #f0f4f8; - color: #333; - margin: 0; - padding: 0; - display: flex; - flex-direction: column; - align-items: center; - height: 100vh; - overflow-x: hidden; - transition: background-color 0.3s, color 0.3s; -} - -body.dark-mode { - background-color: #121212; - color: #f0f4f8; -} - -.wunsch-box { - background-color: #f9f9f9; /* Heller Hintergrund */ - border: 1px solid #ddd; /* Rahmen um die Box */ - border-radius: 8px; /* Abgerundete Ecken */ - padding: 20px; /* Innenabstand */ - max-width: 800px; /* Maximale Breite der Box */ - margin: 20px auto; /* Zentriert auf der Seite */ - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Schatten für Tiefe */ -} - -.wunsch-box h2 { - text-align: center; /* Überschrift zentrieren */ - color: #333; /* Dunkle Schriftfarbe */ - margin-bottom: 20px; /* Abstand unter der Überschrift */ -} - -.wunsch-box label { - display: block; /* Jeder Textblock auf eigener Zeile */ - font-weight: bold; /* Fettdruck für Label */ - margin-bottom: 5px; /* Abstand unter den Labels */ - color: #555; /* Mittlere Schriftfarbe */ -} - -.wunsch-box input[type="text"], -.wunsch-box select { - width: 100%; /* Eingabefeld und Auswahlfeld in voller Breite */ - padding: 10px; /* Innenabstand */ - margin-bottom: 15px; /* Abstand unter den Feldern */ - border: 1px solid #ccc; /* Rahmenfarbe */ - border-radius: 4px; /* Abgerundete Ecken */ - box-sizing: border-box; /* Box-Inhalt inklusive Padding */ -} - -.wunsch-box button { - width: 100%; /* Button in voller Breite */ - padding: 10px; /* Innenabstand */ - background-color: #3b82f6; /* Farbe für Button */ - color: white; /* Weiße Schrift */ - border: none; /* Kein Rahmen */ - border-radius: 4px; /* Abgerundete Ecken */ - font-size: 16px; /* Größere Schrift für den Button */ - cursor: pointer; /* Mauszeiger ändert sich bei Hover */ -} - -.wunsch-box button:hover { - background-color: #2274f8; /* Dunklere Farbe beim Hover */ -} - -#response-message { - text-align: center; /* Nachricht zentrieren */ - color: #d9534f; /* Rote Farbe für Fehlernachrichten */ - margin-top: 15px; /* Abstand über der Nachricht */ - font-size: 14px; /* Kleinere Schriftgröße */ -} - -.popup { - display: none; /* Standardmäßig ausgeblendet */ - position: fixed; - z-index: 1000; - left: 0; - top: 0; - width: 100%; - height: 100%; - overflow: auto; - background-color: rgba(0, 0, 0, 0.7); /* Halbtransparentes Hintergrund */ -} - -.popup-content { - background-color: #fefefe; /* Heller Hintergrund im Normalmodus */ - margin: 15% auto; - padding: 20px; - border: 1px solid #888; - width: 80%; /* Breite des Popups */ - max-width: 600px; /* Maximale Breite */ - position: relative; - border-radius: 15px; -} - -.popup-content.dark-mode { - background-color: #333; /* Dunkler Hintergrund im Darkmode */ - color: #fff; /* Helle Schriftfarbe im Darkmode */ -} - -.close { - color: #aaa; - float: right; - font-size: 28px; - font-weight: bold; -} - -.close:hover, -.close:focus { - color: white; /* Helle Schriftfarbe beim Hover im Darkmode */ - text-decoration: none; - cursor: pointer; -} - -.footer { - position: relative; /* Fügt eine relative Position für das Footer-Element hinzu */ -} - -.popup { - display: none; /* Standardmäßig ausgeblendet */ - position: fixed; - z-index: 1000; - left: 0; - top: 0; - width: 100%; - height: 100%; - overflow: auto; - background-color: rgba(0, 0, 0, 0.7); /* Halbtransparentes Hintergrund */ -} - -.popup-content { - background-color: #fefefe; /* Heller Hintergrund im Normalmodus */ - margin: 15% auto; - padding: 20px; - border: 1px solid #888; - width: 80%; /* Breite des Popups */ - max-width: 600px; /* Maximale Breite */ - position: relative; - color: #000; /* Schwarze Schriftfarbe im Normalmodus */ -} - -.popup-content.dark-mode { - background-color: #333; /* Dunkler Hintergrund im Darkmode */ - color: #fff; /* Helle Schriftfarbe im Darkmode */ -} - -.close { - color: #aaa; - float: right; - font-size: 28px; - font-weight: bold; -} - -.close:hover, -.close:focus { - color: white; /* Helle Schriftfarbe beim Hover im Darkmode */ - text-decoration: none; - cursor: pointer; -} - -.footer { - position: relative; /* Fügt eine relative Position für das Footer-Element hinzu */ -} - -#changelog-icon { - position: absolute; /* Macht das Symbol absolut positioniert */ - left: 20px; /* Abstand vom rechten Rand */ - top: 50%; /* Vertikale Zentrierung */ - transform: translateY(-50%); /* Vertikal zentrieren */ - font-size: 24px; /* Größe des Symbols */ -} - -.changelog-entry { - margin-bottom: 15px; /* Abstand zwischen den Einträgen */ - padding: 10px; /* Padding für besseren Abstand innen */ - border: 1px solid #ccc; /* Optional: Rahmen um jeden Eintrag */ - border-radius: 5px; /* Optional: Abgerundete Ecken */ - background-color: #f9f9f9; /* Optional: Hintergrundfarbe */ - width: 100%; /* Damit die Einträge die volle Breite des Popups nutzen */ - max-width: 500px; /* Maximale Breite der Boxen */ -} - -/* Content */ -#content { - margin-left: 260px; - padding: 30px; - background-color: #f8fafc; - min-height: 90vh; -} - -/* Header (Willkommensbox) */ -.welcome-box { - background-color: #1f2937; - color: white; - padding: 15px 20px; /* Padding verkleinert */ - border-radius: 0 0 15px 15px; - box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); - text-align: center; - font-size: 1.2em; /* Schriftgröße verkleinert */ - font-weight: 300; - position: fixed; - top: 0; - left: 0; - width: 100%; - z-index: 999; - border-bottom: 4px solid #3b82f6; -} - - -/* Footer */ -.footer { - background-color: #1f2937; - color: white; - text-align: center; - padding: 20px; - font-size: 0.9em; - position: fixed; - bottom: 0; - width: 100%; - left: 0; - border-top: 4px solid #3b82f6; -} - -/* Navbar Links */ -.navbar { - display: flex; - justify-content: center; - margin-bottom: 20px; -} - -.navbar-link { - margin: 0 15px; - text-decoration: none; - color: white; - font-size: 1em; - transition: color 0.3s; -} - -.navbar-link:hover { - color: #3b82f6; -} - -/* Logo-Container separat und links oben positionieren */ -.logo-container { - position: absolute; - top: 40px; - left: 40px; - z-index: 1000; /* Über anderen Elementen */ -} - -.logo { - height: 100px; /* Vergrößere das Logo nach Bedarf */ - position: fixed; /* Fixiere das Logo */ - top: 40px; /* Abstand vom oberen Rand */ - left: 40px; /* Abstand vom linken Rand */ - z-index: 1000; /* Stelle sicher, dass das Logo über anderen Inhalten liegt */ -} - -/* Beispiel CSS für das Bericht-Formular */ -#report-form { - margin: 20px 0; - display: flex; - flex-direction: column; -} - -#report-form label { - margin-bottom: 5px; -} - -#report-form input, #report-form select, #report-form textarea { - margin-bottom: 15px; - padding: 10px; - font-size: 16px; - border: 1px solid #ccc; - border-radius: 4px; -} - -#report-form button { - padding: 10px; - background-color: #3b82f6; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; -} - -#report-form button:hover { - background-color: #2576f8; -} - -body { - font-family: Arial, sans-serif; - background-color: #f4f4f4; - color: #333; -} - -.faq-container { - max-width: 800px; - margin: 20px auto; - padding: 20px; - background-color: #f9f9f9; - border-radius: 8px; - box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); -} - -.faq-item { - border: 1px solid #ddd; - border-radius: 5px; - margin-bottom: 10px; - padding: 15px; - cursor: pointer; - transition: background-color 0.3s; - background: rgb(241, 240, 240); -} - -.faq-item:hover { - background-color: #dfdbdb; -} - -.faq-question { - font-weight: bold; - margin: 0; - color: #000; -} - -.faq-answer { - display: none; /* Antwort standardmäßig ausblenden */ - margin-top: 10px; - padding: 10px; - background-color: #f9f9f9; - border: 1px solid #eee; - border-radius: 5px; -} - -.faq-toggle { - display: flex; - justify-content: space-between; - align-items: center; - color: black; -} - -.arrow { - transition: transform 0.3s; -} - -.faq-answer.show { - display: block; /* Antwort anzeigen */ - color: #000; -} - -/* Dark Mode */ -body.dark-mode { - background-color: #181818; - color: #fff; -} - -body.dark-mode .faq-container { - background-color: #2c2c2c; - color: #fff; -} - -body.dark-mode .faq-item { - border: 1px solid #444; -} - -body.dark-mode .faq-answer { - background-color: #ffff; - border: 1px solid #444; -} +body { + font-family: 'Arial', sans-serif; + background-color: #f0f4f8; /* Helles Hintergrundfarbe */ + color: #333; /* Dunkle Schriftfarbe */ + margin: 0; + padding: 0; + display: flex; + flex-direction: column; + align-items: center; + height: 100vh; + overflow-x: hidden; + transition: background-color 0.3s, color 0.3s; +} + +body.dark-mode { + background-color: #121212; /* Dunkler Hintergrund für den Darkmode */ + color: #f0f4f8; /* Helle Schriftfarbe im Darkmode */ +} + +.switch { + position: fixed; /* Fixiert die Position des Schalters */ + bottom: 20px; /* Abstand vom unteren Rand */ + right: 20px; /* Abstand vom rechten Rand */ + z-index: 1000; /* Sicherstellen, dass es über anderen Inhalten liegt */ + width: 50px; /* Breite des Umschalters */ + height: 24px; /* Höhe des Umschalters */ +} + +.switch input { + opacity: 0; /* Unsichtbar, um nur den Slider anzuzeigen */ + width: 0; + height: 0; +} + +.slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: #ccc; /* Hintergrundfarbe des Umschalters */ + transition: .4s; /* Übergang für den Umschalters */ + border-radius: 34px; /* Abgerundete Ecken für den Umschalters */ +} + +.slider:before { + position: absolute; + content: ""; + height: 20px; /* Höhe des Schiebereglers */ + width: 20px; /* Breite des Schiebereglers */ + left: 2px; /* Abstand vom linken Rand */ + bottom: 2px; /* Abstand vom unteren Rand */ + background-color: white; /* Hintergrundfarbe des Schiebereglers */ + border-radius: 50%; /* Abgerundete Ecken für den Schieberegler */ + transition: .4s; /* Übergang für den Schieberegler */ +} + +/* Zustand für den aktiven Schieberegler */ +input:checked + .slider { + background-color: #3b82f6; /* Hintergrundfarbe des Umschalters bei Aktivierung */ +} + +input:checked + .slider:before { + transform: translateX(26px); /* Bewege den Schieberegler nach rechts */ +} + +.container { + display: flex; + justify-content: space-between; + width: 90%; /* Stelle sicher, dass es nicht mehr als 100% des Viewports einnimmt */ + max-width: 1200px; /* Maximale Breite für größere Bildschirme */ + margin: 0 auto; /* Zentrieren der Container */ + margin-top: 200px; /* Negativer Margin, um den Container nach unten zu verschieben */ + overflow: hidden; /* Verhindert Überlauf */ +} + +main { + flex: 1; + padding: 20px; + background-color: #1f2937; /* Hintergrund für den Hauptbereich */ + transition: background-color 0.3s; /* Übergang für den Hintergrund */ + border-radius: 15px; /* Optional: Abgerundete Ecken */ + border: 4px solid #3b82f6; + color: #ffff; +} + +body.dark-mode main { + background-color: #1e1e1e; /* Dunkler Hintergrund für den Hauptbereich im Darkmode */ + color: #ffff; +} + +.movies-box { + background-color: #fff; /* Hintergrund für die Filme */ + margin-top: 40px; /* Abstand nach oben */ + padding: 20px; /* Innenabstand */ + border-radius: 12px; /* Abgerundete Ecken */ + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Schatten */ + display: flex; + flex-direction: column; /* Kolonne */ + align-items: center; /* Zentriert horizontal */ + justify-content: center; /* Zentriert vertikal */ + max-width: 100%; /* Maximale Breite */ + margin-bottom: 20px; /* Abstand nach unten */ +} + +#movies-list { + display: flex; /* Damit die Bilder nebeneinander angezeigt werden */ + flex-wrap: wrap; /* Damit die Bilder in die nächste Zeile umbrechen, wenn sie nicht mehr passen */ + justify-content: center; /* Zentriert die Filme im Container */ + list-style-type: none; /* Entfernt Aufzählungszeichen */ + padding: 0; /* Entfernt Padding */ + margin: 0; /* Entfernt Margin */ +} + +.movie-item { + margin: 10px; /* Abstand zwischen den Bildern */ + opacity: 0; /* Startwert für die Opazität */ + transition: opacity 0.5s ease-in; /* Übergang für die Opazität */ + display: flex; /* Flex-Container für die Inhalte */ + flex-direction: column; /* Vertikale Anordnung */ + align-items: center; /* Zentriert den Inhalt (Cover und Titel) */ +} + +.movie-item img { + border-radius: 5px; /* Abgerundete Ecken für die Bilder */ + width: 120px; /* Breite anpassen */ + height: 180px; /* Höhe anpassen */ + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Schatten für die Bilder */ +} + +.movie-item.loaded { + opacity: 1; /* Sichtbar wenn geladen */ +} + +.sidebar { + width: 300px; /* Feste Breite für die Sidebar */ + padding: 5px; + background-color: #ffffff00; /* Weißer Hintergrund für die Sidebar */ + border-radius: 8px; /* Abgerundete Ecken für die Sidebar */ + margin-left: 20px; + max-width: 100%; /* Verhindert, dass die Sidebar breiter als der Container wird */ + +} + +body.dark-mode .sidebar { + background-color: #2c2c2c00; /* Dunkler Hintergrund für die Sidebar im Darkmode */ +} + +.newsletter-box { + background-color: #f9f9f9; /* Heller Hintergrund für die Newsletter-Box */ + padding: 20px; /* Innenabstand für die Newsletter-Box */ + border-radius: 8px; /* Abgerundete Ecken */ + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Schatten für die Newsletter-Box */ + border: 4px solid #3b82f6; +} + +body.dark-mode .newsletter-box { + background-color: #3a3a3a; /* Dunkler Hintergrund für die Newsletter-Box im Darkmode */ +} + +h2 { + color: #1f2937; /* Titel für die Filme */ + margin-bottom: 10px; /* Abstand unter dem Untertitel */ +} + +h3 { + color: #ffff; /* Titel für die Filme */ + margin-bottom: 10px; /* Abstand unter dem Untertitel */ +} + +body.dark-mode h2 { + color: #3b82f6; /* Helle Schriftfarbe für die Titel im Darkmode */ +} + +input { + margin: 10px 0; + padding: 10px; + width: calc(100% - 22px); /* Vollständige Breite abzüglich Padding */ + border: 1px solid #ccc; /* Rahmen für Eingabefelder */ + border-radius: 5px; /* Abgerundete Ecken für Eingabefelder */ + transition: border-color 0.3s; /* Übergang für die Rahmenfarbe */ +} + +button { + padding: 10px; + background-color: #3b82f6; /* Hintergrund für den Button */ + color: white; + border: none; + border-radius: 5px; /* Abgerundete Ecken für den Button */ + cursor: pointer; + transition: background-color 0.3s; /* Übergangseffekt für Hintergrundfarbe */ + font-size: 1em; /* Schriftgröße anpassen */ +} + +button:hover { + background-color: #2274f8; /* Dunkleres bei Hover */ +} + +body.dark-mode button:hover { + background-color: #2274f8; /* Dunkleres im Darkmode bei Hover */ +} + +.telegram-connect-box { + background-color: #3b82f6; /* Grüner Hintergrund für die Telegram-Box */ + padding: 10px; /* Innenabstand für die Telegram-Box */ + border-radius: 8px; /* Abgerundete Ecken */ + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Schatten für die Telegram-Box */ + margin: 20px auto; /* Abstand nach oben und unten, zentriert horizontal */ + text-align: center; /* Zentrierter Text */ + width: auto; /* Automatische Breite */ + max-width: 90%; /* Maximale Breite auf 90% des Containers */ +} + +.telegram-connect-box p { + color: white; /* Weiße Schriftfarbe */ + margin: 0 0 10px 0; +} + +body.dark-mode .telegram-connect-box p { + color: #f0f4f8; /* Helle Schriftfarbe für den Telegram-Box im Darkmode */ +} + +.telegram-connect-box a { + display: inline-block; /* Inline-Block für den Link */ + padding: 10px 15px; /* Innenabstand für den Link */ + background-color: #fff; /* Weißer Hintergrund für den Link */ + color: #3b82f6; /* Grüner Text für den Link */ + border-radius: 5px; /* Abgerundete Ecken für den Link */ + text-decoration: none; /* Keine Unterstreichung für den Link */ + transition: background-color 0.3s; /* Übergang für den Hintergrund */ +} + +.telegram-connect-box a:hover { + background-color: #e0e0e0; /* Hellerer Hintergrund bei Hover */ +} + +body.dark-mode .telegram-connect-box a { + background-color: #3a3a3a; /* Dunkler Hintergrund für den Link im Darkmode */ + color: #3b82f6; /* Helle Schriftfarbe für den Link im Darkmode */ +} + +.gitea-box { + background-color: #f9f9f9; /* Heller Hintergrund für die Gitea-Box */ + padding: 10px; /* Innenabstand für die Gitea-Box */ + border-radius: 8px; /* Abgerundete Ecken */ + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Schatten für die Gitea-Box */ + margin-top: 20px; /* Abstand zur vorherigen Box */ + text-align: center; /* Zentrierter Text */ + border: 4px solid #3b82f6; +} + +body.dark-mode .gitea-box { + background-color: #3a3a3a; /* Dunkler Hintergrund für die Gitea-Box im Darkmode */ +} + +body.dark-mode .gitea-box p, +body.dark-mode .gitea-box a { + color: #f0f4f8; /* Helle Schriftfarbe im Darkmode für Text und Links */ +} + +.links-list { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + padding: 0; + list-style: none; + max-width: 600px; + margin: 0 auto; +} + +.links-list li { + width: 48%; /* Zwei Links nebeneinander */ + margin-bottom: 10px; +} + +.links-list a { + text-decoration: none; + color: #333; + display: block; + padding: 10px; + background-color: #f0f4f8; + border: 1px solid #ddd; + border-radius: 5px; + text-align: center; +} + +.links-list a:hover { + background-color: #3b82f6; + color: #fff; +} + +.movie-item { + opacity: 0; + transition: opacity 0.5s ease-in-out; +} + +.movie-item.visible { + opacity: 1; +} + +.movie-popup { + position: fixed; + background-color: rgba(0, 0, 0, 0.8); + color: white; + border-radius: 8px; + padding: 20px; + z-index: 1000; + max-width: 300px; + text-align: center; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); + display: none; /* Standardmäßig ausgeblendet */ +} + +.movie-popup img { + max-width: 100%; + border-radius: 4px; +} + +body { + font-family: 'Arial', sans-serif; + background-color: #f0f4f8; + color: #333; + margin: 0; + padding: 0; + display: flex; + flex-direction: column; + align-items: center; + height: 100vh; + overflow-x: hidden; + transition: background-color 0.3s, color 0.3s; +} + +body.dark-mode { + background-color: #121212; + color: #f0f4f8; +} + +.wunsch-box { + background-color: #f9f9f9; /* Heller Hintergrund */ + border: 1px solid #ddd; /* Rahmen um die Box */ + border-radius: 8px; /* Abgerundete Ecken */ + padding: 20px; /* Innenabstand */ + max-width: 800px; /* Maximale Breite der Box */ + margin: 20px auto; /* Zentriert auf der Seite */ + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Schatten für Tiefe */ +} + +.wunsch-box h2 { + text-align: center; /* Überschrift zentrieren */ + color: #333; /* Dunkle Schriftfarbe */ + margin-bottom: 20px; /* Abstand unter der Überschrift */ +} + +.wunsch-box label { + display: block; /* Jeder Textblock auf eigener Zeile */ + font-weight: bold; /* Fettdruck für Label */ + margin-bottom: 5px; /* Abstand unter den Labels */ + color: #555; /* Mittlere Schriftfarbe */ +} + +.wunsch-box input[type="text"], +.wunsch-box select { + width: 100%; /* Eingabefeld und Auswahlfeld in voller Breite */ + padding: 10px; /* Innenabstand */ + margin-bottom: 15px; /* Abstand unter den Feldern */ + border: 1px solid #ccc; /* Rahmenfarbe */ + border-radius: 4px; /* Abgerundete Ecken */ + box-sizing: border-box; /* Box-Inhalt inklusive Padding */ +} + +.wunsch-box button { + width: 100%; /* Button in voller Breite */ + padding: 10px; /* Innenabstand */ + background-color: #3b82f6; /* Farbe für Button */ + color: white; /* Weiße Schrift */ + border: none; /* Kein Rahmen */ + border-radius: 4px; /* Abgerundete Ecken */ + font-size: 16px; /* Größere Schrift für den Button */ + cursor: pointer; /* Mauszeiger ändert sich bei Hover */ +} + +.wunsch-box button:hover { + background-color: #2274f8; /* Dunklere Farbe beim Hover */ +} + +#response-message { + text-align: center; /* Nachricht zentrieren */ + color: #d9534f; /* Rote Farbe für Fehlernachrichten */ + margin-top: 15px; /* Abstand über der Nachricht */ + font-size: 14px; /* Kleinere Schriftgröße */ +} + +.popup { + display: none; /* Standardmäßig ausgeblendet */ + position: fixed; + z-index: 1000; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: auto; + background-color: rgba(0, 0, 0, 0.7); /* Halbtransparentes Hintergrund */ +} + +.popup-content { + background-color: #fefefe; /* Heller Hintergrund im Normalmodus */ + margin: 15% auto; + padding: 20px; + border: 1px solid #888; + width: 80%; /* Breite des Popups */ + max-width: 600px; /* Maximale Breite */ + position: relative; + border-radius: 15px; +} + +.popup-content.dark-mode { + background-color: #333; /* Dunkler Hintergrund im Darkmode */ + color: #fff; /* Helle Schriftfarbe im Darkmode */ +} + +.close { + color: #aaa; + float: right; + font-size: 28px; + font-weight: bold; +} + +.close:hover, +.close:focus { + color: white; /* Helle Schriftfarbe beim Hover im Darkmode */ + text-decoration: none; + cursor: pointer; +} + +.footer { + position: relative; /* Fügt eine relative Position für das Footer-Element hinzu */ +} + +.popup { + display: none; /* Standardmäßig ausgeblendet */ + position: fixed; + z-index: 1000; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: auto; + background-color: rgba(0, 0, 0, 0.7); /* Halbtransparentes Hintergrund */ +} + +.popup-content { + background-color: #fefefe; /* Heller Hintergrund im Normalmodus */ + margin: 15% auto; + padding: 20px; + border: 1px solid #888; + width: 80%; /* Breite des Popups */ + max-width: 600px; /* Maximale Breite */ + position: relative; + color: #000; /* Schwarze Schriftfarbe im Normalmodus */ +} + +.popup-content.dark-mode { + background-color: #333; /* Dunkler Hintergrund im Darkmode */ + color: #fff; /* Helle Schriftfarbe im Darkmode */ +} + +.close { + color: #aaa; + float: right; + font-size: 28px; + font-weight: bold; +} + +.close:hover, +.close:focus { + color: white; /* Helle Schriftfarbe beim Hover im Darkmode */ + text-decoration: none; + cursor: pointer; +} + +.footer { + position: relative; /* Fügt eine relative Position für das Footer-Element hinzu */ +} + +#changelog-icon { + position: absolute; /* Macht das Symbol absolut positioniert */ + left: 20px; /* Abstand vom rechten Rand */ + top: 50%; /* Vertikale Zentrierung */ + transform: translateY(-50%); /* Vertikal zentrieren */ + font-size: 24px; /* Größe des Symbols */ +} + +.changelog-entry { + margin-bottom: 15px; /* Abstand zwischen den Einträgen */ + padding: 10px; /* Padding für besseren Abstand innen */ + border: 1px solid #ccc; /* Optional: Rahmen um jeden Eintrag */ + border-radius: 5px; /* Optional: Abgerundete Ecken */ + background-color: #f9f9f9; /* Optional: Hintergrundfarbe */ + width: 100%; /* Damit die Einträge die volle Breite des Popups nutzen */ + max-width: 500px; /* Maximale Breite der Boxen */ +} + +/* Content */ +#content { + margin-left: 260px; + padding: 30px; + background-color: #f8fafc; + min-height: 90vh; +} + +/* Header (Willkommensbox) */ +.welcome-box { + background-color: #1f2937; + color: white; + padding: 15px 20px; /* Padding verkleinert */ + border-radius: 0 0 15px 15px; + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); + text-align: center; + font-size: 1.2em; /* Schriftgröße verkleinert */ + font-weight: 300; + position: fixed; + top: 0; + left: 0; + width: 100%; + z-index: 999; + border-bottom: 4px solid #3b82f6; +} + + +/* Footer */ +.footer { + background-color: #1f2937; + color: white; + text-align: center; + padding: 20px; + font-size: 0.9em; + position: fixed; + bottom: 0; + width: 100%; + left: 0; + border-top: 4px solid #3b82f6; +} + +/* Navbar Links */ +.navbar { + display: flex; + justify-content: center; + margin-bottom: 20px; +} + +.navbar-link { + margin: 0 15px; + text-decoration: none; + color: white; + font-size: 1em; + transition: color 0.3s; +} + +.navbar-link:hover { + color: #3b82f6; +} + +/* Logo-Container separat und links oben positionieren */ +.logo-container { + position: absolute; + top: 40px; + left: 40px; + z-index: 1000; /* Über anderen Elementen */ +} + +.logo { + height: 100px; /* Vergrößere das Logo nach Bedarf */ + position: fixed; /* Fixiere das Logo */ + top: 40px; /* Abstand vom oberen Rand */ + left: 40px; /* Abstand vom linken Rand */ + z-index: 1000; /* Stelle sicher, dass das Logo über anderen Inhalten liegt */ +} + +/* Beispiel CSS für das Bericht-Formular */ +#report-form { + margin: 20px 0; + display: flex; + flex-direction: column; +} + +#report-form label { + margin-bottom: 5px; +} + +#report-form input, #report-form select, #report-form textarea { + margin-bottom: 15px; + padding: 10px; + font-size: 16px; + border: 1px solid #ccc; + border-radius: 4px; +} + +#report-form button { + padding: 10px; + background-color: #3b82f6; + color: white; + border: none; + border-radius: 4px; + cursor: pointer; +} + +#report-form button:hover { + background-color: #2576f8; +} + +body { + font-family: Arial, sans-serif; + background-color: #f4f4f4; + color: #333; +} + +.faq-container { + max-width: 800px; + margin: 20px auto; + padding: 20px; + background-color: #f9f9f9; + border-radius: 8px; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); +} + +.faq-item { + border: 1px solid #ddd; + border-radius: 5px; + margin-bottom: 10px; + padding: 15px; + cursor: pointer; + transition: background-color 0.3s; + background: rgb(241, 240, 240); +} + +.faq-item:hover { + background-color: #dfdbdb; +} + +.faq-question { + font-weight: bold; + margin: 0; + color: #000; +} + +.faq-answer { + display: none; /* Antwort standardmäßig ausblenden */ + margin-top: 10px; + padding: 10px; + background-color: #f9f9f9; + border: 1px solid #eee; + border-radius: 5px; +} + +.faq-toggle { + display: flex; + justify-content: space-between; + align-items: center; + color: black; +} + +.arrow { + transition: transform 0.3s; +} + +.faq-answer.show { + display: block; /* Antwort anzeigen */ + color: #000; +} + +/* Dark Mode */ +body.dark-mode { + background-color: #181818; + color: #fff; +} + +body.dark-mode .faq-container { + background-color: #2c2c2c; + color: #fff; +} + +body.dark-mode .faq-item { + border: 1px solid #444; +} + +body.dark-mode .faq-answer { + background-color: #ffff; + border: 1px solid #444; +} +