public/css/styles.css aktualisiert

public/css/styles.css

@@ -86,7 +86,7 @@ main {
 }
 
 body.dark-mode main {
-    background-color: #1e1e1e; /* Dunkler Hintergrund für den Hauptbereich im Darkmode */
+    background-color: #1f2937; /* Dunkler Hintergrund für den Hauptbereich im Darkmode */
     color: #ffff;
 }
 
@@ -104,6 +104,13 @@ body.dark-mode main {
     margin-bottom: 20px; /* Abstand nach unten */
 }
 
+/* Dark Mode Styles */
+body.dark-mode .movies-box {
+    background-color: #1f2937; /* Dunkler Hintergrund für Darkmode */
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); /* Stärkere Schatten für Darkmode */
+    color: #fff; /* Weiße Schriftfarbe */
+}
+
 #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 */
@@ -156,7 +163,7 @@ body.dark-mode .sidebar {
 }
 
 body.dark-mode .newsletter-box {
-    background-color: #3a3a3a; /* Dunkler Hintergrund für die Newsletter-Box im Darkmode */
+    background-color: #1f2937; /* Dunkler Hintergrund für die Newsletter-Box im Darkmode */
 }
 
 h2 {
@@ -251,7 +258,7 @@ body.dark-mode .telegram-connect-box a {
 }
 
 body.dark-mode .gitea-box {
-    background-color: #3a3a3a; /* Dunkler Hintergrund für die Gitea-Box im Darkmode */
+    background-color: #1f2937; /* Dunkler Hintergrund für die Gitea-Box im Darkmode */
 }
 
 body.dark-mode .gitea-box p,
@@ -346,12 +353,24 @@ body.dark-mode {
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Schatten für Tiefe */
 }
 
+/* Darkmode-Styles für Wunsch-Box */
+body.dark-mode .wunsch-box {
+    background-color: #333;    /* Dunkler Hintergrund im Darkmode */
+    border: 1px solid #555;    /* Dunklerer Rahmen im Darkmode */
+    color: #fff;                /* Weiße Schrift im Darkmode */
+}
+
 .wunsch-box h2 {
     text-align: center;        /* Überschrift zentrieren */
     color: #333;               /* Dunkle Schriftfarbe */
     margin-bottom: 20px;       /* Abstand unter der Überschrift */
 }
 
+/* Darkmode-Styles für Überschrift */
+body.dark-mode .wunsch-box h2 {
+    color: #fff;               /* Weiße Schrift im Darkmode */
+}
+
 .wunsch-box label {
     display: block;            /* Jeder Textblock auf eigener Zeile */
     font-weight: bold;         /* Fettdruck für Label */
@@ -359,6 +378,12 @@ body.dark-mode {
     color: #555;               /* Mittlere Schriftfarbe */
 }
 
+/* Darkmode-Styles für Labels */
+body.dark-mode .wunsch-box label {
+    color: #ddd;               /* Hellere Schrift im Darkmode */
+}
+
+
 .wunsch-box input[type="text"],
 .wunsch-box select {
     width: 100%;               /* Eingabefeld und Auswahlfeld in voller Breite */
@@ -398,27 +423,34 @@ body.dark-mode {
     left: 0;
     top: 0;
     width: 100%;
-    height: 100%;
+    height: 80%;
     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;
+    position: fixed; /* Fest im Fenster platziert */
+    top: 50%; /* Vertikale Mitte */
+    left: 50%; /* Horizontale Mitte */
+    transform: translate(-160%, -86%); /* Zentrieren des Popups */
     border-radius: 15px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Leichter Schatten */
+    z-index: 1000; /* Über andere Elemente legen */
 }
 
-.popup-content.dark-mode {
+/* Darkmode-Styles für das Popup */
-    background-color: #333; /* Dunkler Hintergrund im Darkmode */
+body.dark-mode .popup-content {
-    color: #fff; /* Helle Schriftfarbe im Darkmode */
+    background-color: #1f2937; /* Dunkler Hintergrund im Darkmode */
+    color: #080808; /* Weiße Schrift im Darkmode */
+    border: 1px solid #555; /* Dunklerer Rand im Darkmode */
 }
 
+
 .close {
     color: #aaa;
     float: right;
@@ -494,13 +526,21 @@ body.dark-mode {
 .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: 1px solid #ccc; /* Rahmen um jeden Eintrag */
-    border-radius: 5px; /* Optional: Abgerundete Ecken */
+    border-radius: 5px; /* Abgerundete Ecken */
-    background-color: #f9f9f9; /* Optional: Hintergrundfarbe */
+    background-color: #f9f9f9; /* Hintergrundfarbe */
     width: 100%; /* Damit die Einträge die volle Breite des Popups nutzen */
     max-width: 500px; /* Maximale Breite der Boxen */
 }
 
+/* Darkmode-Styles für Changelog-Einträge */
+body.dark-mode .changelog-entry {
+    background-color: #444; /* Dunkler Hintergrund im Darkmode */
+    border: 1px solid #666; /* Dunklerer Rand im Darkmode */
+    color: #fff; /* Weiße Schrift im Darkmode */
+}
+
+
 /* Content */
 #content {
     margin-left: 260px;
@@ -676,7 +716,7 @@ body.dark-mode {
 }
 
 body.dark-mode .faq-container {
-    background-color: #2c2c2c;
+    background-color: #1f2937;
     color: #fff;
 }