simon/Radioplayer-with-Presets
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style.css aktualisiert

Browse source 
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.
This commit is contained in:
simonpipe 2025-01-06 08:50:51 +00:00
parent 2c2e98310f
commit 710c7e3220
1 changed files with 38 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

55
style.css
View file

@ -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 {