diff --git a/style.css b/style.css index a84e0e8..8fc10a4 100644 --- a/style.css +++ b/style.css @@ -3,31 +3,36 @@ body { text-align: center; margin: 0; padding: 20px; + padding-top: calc(10px + 110px); /* Dynamische Berechnung basierend auf der Header-Höhe */ } .header { background-color: #FFFFE3; + height: 120px; /* Feste Höhe für den Header */ padding-bottom: 10px; + position: fixed; /* Fixiert den Header oben */ + top: 0; /* Abstand von oben */ + left: 0; /* Abstand von links */ + width: 100%; /* Deckt die gesamte Breite ab */ + z-index: 1000; /* Stellt sicher, dass der Header über anderen Inhalten liegt */ + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Optional: Schatten für mehr Tiefe */ } .titel { display: flex; - align-items: center; /* Zentriert Elemente vertikal */ + align-items: center; /* Vertikale Zentrierung */ + align-self: center; /* Titel an die Mitte der Flexbox anpassen */ justify-content: center; /* Hier wird die horizontale Zentrierung eingestellt */ gap: 10px; } -.current-station { - font-weight: bold; - font-size: 16px; - padding-left: 20px; /* Padding statt margin */ - margin-bottom: 15px; +.titel img { + height: 30px; /* Einheitliche Höhe für das Logo */ + width: auto; /* Automatische Breite beibehalten */ } -#aktueller-sender { - background-color: #d2f8d2; - border-radius: 5px; - padding: 10px 20px; +.hidden { + display: none; } .stop-button { @@ -36,17 +41,33 @@ body { font-weight: bold; border: none; border-radius: 5px; - padding: 10px 20px; - text-align: center; - display: inline-block; - font-size: 16px; - margin: 4px 2px; + height: 30px; /* Höhe passend zum Logo */ + padding: 4px 10px; + font-size: 18px; + margin: 0; /* Verhindert zusätzliche Abstände in der Zeile */ + margin-left: auto; /* Schiebt den Button ganz nach rechts */ cursor: pointer; transition: background-color 0.3s ease; + /* Neue Anpassung für die Position */ + position: relative; + top: -2px; /* Bewegt den Button 2 Pixel nach oben */ } -.stop-button:hover { - background-color: #ff4d4d; +.stop-button:focus { + outline: none; + box-shadow: 0 0 5px rgba(255, 77, 77, 0.75); +} + +.current-station { + font-weight: bold; + font-size: 16px; + margin-bottom: 15px; +} + +#aktueller-sender { + background-color: #d2f8d2; + border-radius: 5px; + padding: 10px 20px; } .preset-container {