710c7e3220
Stopp Button in die Titelzeile verlegt, als Symbol dargestellt und wird nur angezeigt, wenn auch ein Sender abgespielt wird. Header Bereich nur immer fix oben sichtbar.
149 lines
3.4 KiB
CSS
149 lines
3.4 KiB
CSS
body {
|
|
font-family: Arial, sans-serif;
|
|
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; /* Vertikale Zentrierung */
|
|
align-self: center; /* Titel an die Mitte der Flexbox anpassen */
|
|
justify-content: center; /* Hier wird die horizontale Zentrierung eingestellt */
|
|
gap: 10px;
|
|
}
|
|
|
|
.titel img {
|
|
height: 30px; /* Einheitliche Höhe für das Logo */
|
|
width: auto; /* Automatische Breite beibehalten */
|
|
}
|
|
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.stop-button {
|
|
background-color: #ff9999;
|
|
color: #fff; /* Weißer Text auf rotem Hintergrund */
|
|
font-weight: bold;
|
|
border: none;
|
|
border-radius: 5px;
|
|
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: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 {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
grid-gap: 20px;
|
|
margin-top: 30px;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.preset-item {
|
|
background-color: #f1f1f1;
|
|
padding: 15px;
|
|
border-radius: 5px;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
cursor: pointer;
|
|
transition: background-color 0.3s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.preset-item h3 {
|
|
margin: 0;
|
|
flex: 1; /* Flexibel innerhalb des Items */
|
|
}
|
|
|
|
.preset-item button {
|
|
margin-left: 5px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.preset-item:hover {
|
|
background-color: #e6e6e6;
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.new-preset-container {
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.button-container {
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.preset-set {
|
|
margin: 0;
|
|
text-align: center; /* Zentriert den gesamten Inhalt */
|
|
font-size: 12px;
|
|
color: #666;
|
|
}
|
|
|
|
.preset-set a {
|
|
color: #666; /* Farbe der Links */
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.preset-set a:hover {
|
|
text-decoration: underline;
|
|
color: #333;
|
|
}
|
|
|
|
.footer {
|
|
display: flex;
|
|
align-items: center; /* Zentriert Elemente vertikal */
|
|
justify-content: center; /* Hier wird die horizontale Zentrierung eingestellt */
|
|
margin: 20px 0;
|
|
font-size: 12px;
|
|
color: #666;
|
|
}
|
|
|
|
.footer a {
|
|
color: #666; /* Farbe der Links */
|
|
text-decoration: none; /* Entfernt den Unterstreichung */
|
|
}
|
|
|
|
.footer a:hover {
|
|
text-decoration: none;
|
|
color: #333;
|
|
}
|