Update assets/style.css

assets/style.css

@@ -1,28 +1,5 @@
 /* Public Domain - Radioplayer Stylesheet */
 
-:root {
-    /* Farben */
-    --primary-color: #ff9999;
-    --primary-color-hover: #ff7777;
-    --success-color: #d2f8d2;
-    --success-color-hover: #b8e9b8;
-    --background-color: #fafafa;
-    --header-background: #FFFFE3;
-    --modal-background: #fff;
-    --modal-background-export: #f9f9f9;
-    --item-background: #f1f1f1;
-    --item-hover: #e6e6e6;
-    --button-background: #f0f0f0;
-    --button-hover: #e0e0e0;
-    --button-color: #fff;
-    --border-color: #ddd;
-    --text-color: #333;
-    --text-color-light: #666;
-    --text-color-lighter: #ccc;
-    --shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    --modal-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
-
-    /* 1. Schrift definieren */
 @font-face {
     font-family: 'Inter Tight';
     src: url('fonts/InterTight-Regular.woff2') format('woff2');
@@ -39,20 +16,81 @@
     font-display: swap;
 }
     
-    /* 2. Schrift anwenden */
+:root {
-    body {
+    /* Farben */
-        font-family: 'Inter Tight', sans-serif;
+    --primary-color: #ff9999;
-        -webkit-font-smoothing: antialiased;
+    --primary-color-hover: #ff7777;
-    }
+    --success-text: #1a5c1a;
+    --success-color: #d2f8d2;
+    --success-color-hover: #b8e9b8;
+    --background-color: #fafafa;
+    --header-background: #FFFFE3;
+    --header-color: #000;
+    --modal-background: #fff;
+    --modal-background-export: #f9f9f9;
+    --item-background: #f1f1f1;
+    --item-hover: #e6e6e6;
+    --button-background: #f0f0f0;
+    --button-hover: #e0e0e0;
+    --button-color: #fff;
+    --border-color: #ddd;
+    --text-color: #333;
+    --text-color-light: #666;
+    --text-color-lighter: #ccc;
+    --table-header-bg: #f8f8f8;
+    --search-button-bg: #ffffff;
+    --input-bg: #ffffff;
+    --shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    --modal-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
 
     /* Layout Fix */
     --header-height: 80px;
     --padding-top: calc(var(--header-height) + 20px);
+    --font-family: 'Inter Tight', sans-serif;
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        /* --- DIESE BLEIBEN GLEICH --- */
+        --header-background: #FFFFE3;  /* Helles Gelb */
+        --primary-color: #ff9999;      /* Rot */
+        --primary-color-hover: #ff7777;
+        --success-color: #d2f8d2;      /* Grün */
+        --success-color-hover: #b8e9b8;
+
+        /* --- DER REST WIRD DUNKEL --- */
+        --success-text: #000000;
+        --background-color: #121212;   /* Tiefdunkler Hintergrund für die Seite */
+        --header-color: #000;
+        --modal-background: #1e1e1e;   /* Dunkle Modals */
+        --modal-background-export: #252525;
+        --item-background: #242424;    /* Dunkle Preset-Karten */
+        --item-hover: #2c2c2c;
+        
+        --button-background: #333333;
+        --button-hover: #444444;
+        --button-color: #eeeeee;
+        
+        --text-color: #e0e0e0;         /* Heller Text auf dunklem Grund */
+        --text-color-light: #aaaaaa;
+        --text-color-lighter: #444444;
+        --border-color: #333333;
+        
+        --table-header-bg: var(--item-background); 
+        --search-button-bg: var(--modal-background);
+        --input-bg: #2a2a2a;
+        
+        --shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
+        --modal-shadow: 0 8px 25px rgba(0, 0, 0, 0.7);
+    }
+
+
 }
 
 /* --- BASICS --- */
 body {
     font-family: var(--font-family);
+    -webkit-font-smoothing: antialiased;
     text-align: center;
     margin: 0;
     padding: 20px;
@@ -68,6 +106,7 @@ body {
 /* --- HEADER & NAVIGATION --- */
 .header {
     background-color: var(--header-background);
+    color: var(--header-color);
     height: auto; 
     padding: 10px 15px 10px 15px; 
     position: fixed;
@@ -173,7 +212,7 @@ body {
 }
 
 #current-station-name i {
-    color: var(--text-color-light); 
+    color: var(--header-color); 
     margin-right: 3px;
     margin-left: 0px;
     font-size: 0.9em; 
@@ -247,7 +286,9 @@ body {
 }
 
 .search-link {
-    background-color: #ffffff !important;
+    background-color: var(--search-button-bg) !important; /* Nutzt jetzt die Variable */
+    color: var(--text-color);
+    border: 1px solid var(--border-color);
 }
 
 .button-container button:hover, 
@@ -257,14 +298,24 @@ body {
     background-color: var(--button-hover) !important;
 }
 
+#sleep-timer-modal .button-container {
+    margin-bottom: 15px; 
+}
+
+#sleep-timer-modal .button-container:last-of-type {
+    margin-bottom: 0;
+}
+
 /* Spezial-Buttons */
 .btn-ok {
     background-color: var(--success-color) !important;
+    color: var(--success-text) !important;
     font-weight: bold !important;
 }
 
-.btn-ok:hover {
+.btn-ok.btn-ok:hover { 
     background-color: var(--success-color-hover) !important;
+    color: var(--success-text) !important;
 }
 
 .delete-btn {
@@ -300,7 +351,18 @@ body {
 #preset-table {
     width: 100%;           
     border-collapse: collapse;
-    margin: 10px 0;
+    margin: 15px 0;
+    table-layout: auto;    
+}
+
+#preset-table th:nth-child(2), 
+#preset-table td:nth-child(2) {
+    width: 40%;
+}
+
+#preset-table th:nth-child(3), 
+#preset-table td:nth-child(3) {
+    width: 50%;
 }
 
 #preset-table th, #preset-table td {
@@ -309,10 +371,12 @@ body {
 }
 
 #preset-table input[type="text"] {
+    background-color: var(--input-bg);
+    color: var(--text-color);
+    border: 1px solid var(--border-color);
     width: 100%;
     box-sizing: border-box;
     padding: 8px;
-    border: 1px solid #ccc;
     border-radius: 4px;
     font-size: 14px;
 }
@@ -322,7 +386,8 @@ body {
 }
 
 #preset-table th {
-    background-color: #f8f8f8;
+    background-color: var(--table-header-bg);
+    color: var(--text-color);
 }
 
 .drag-handle {