diff --git a/style.css b/style.css index 0f3d424..40d3128 100644 --- a/style.css +++ b/style.css @@ -5,12 +5,56 @@ body { padding: 20px; } +.header { + background-color: #FFFFE3; + padding-bottom: 10px; +} + +.titel { + display: flex; + align-items: center; /* Zentriert Elemente vertikal */ + 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; +} + +#aktueller-sender { + background-color: #d2f8d2; + border-radius: 5px; + padding: 10px 20px; +} + +.stop-button { + background-color: #ff9999; + color: #fff; /* Weißer Text auf rotem Hintergrund */ + font-weight: bold; + border: none; + border-radius: 5px; + padding: 10px 20px; + text-align: center; + display: inline-block; + font-size: 16px; + margin: 4px 2px; + cursor: pointer; + transition: background-color 0.3s ease; +} + +.stop-button:hover { + background-color: #ff4d4d; +} + .preset-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); grid-gap: 20px; - margin-top: 30px; - margin-bottom: 30px; + margin-top: 30px; + margin-bottom: 30px; } .preset-item { @@ -22,16 +66,11 @@ body { transition: background-color 0.3s ease; display: flex; align-items: center; - justify-content: space-between; -} - -.preset-item:hover { - background-color: #e0e0e0; } .preset-item h3 { margin: 0; - flex-grow: 1; + flex: 1; /* Flexibel innerhalb des Items */ } .preset-item button { @@ -40,36 +79,21 @@ body { } .new-preset-container { - margin-bottom: 15px; + margin-bottom: 15px; } -.current-station { - font-weight: bold; - font-size: 16px; - margin-left: 20px; +.button-container { + margin-bottom: 15px; } -#aktueller-sender { - background-color: #FFFF00; - border-radius: 5px; - padding: 10px 20px; +.footer { + margin: 20px 0; + text-align: center; /* Zentriert den gesamten Inhalt */ + font-size: 12px; + color: #999 } -.stop-button { - background-color: #ff9999; - color: #fff; /* Weißer Text auf rotem Hintergrund */ - font-weight: bold; - border: none; - border-radius: 5px; - padding: 10px 20px; - text-align: center; - display: inline-block; - font-size: 16px; - margin: 4px 2px; - cursor: pointer; - transition: background-color 0.3s ease; +.footer a { + color: #999; /* Farbe der Links */ + text-decoration: underline; /* Entfernt den Unterstreichung */ } - -.stop-button:hover { - background-color: #ff4d4d; /* Dunklerer Farbton beim Hovern */ -} \ No newline at end of file