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

style.css aktualisiert

Browse source
This commit is contained in:
simonpipe 2024-12-20 11:13:19 +00:00
parent 58558aeb43
commit f8c9c0f122
1 changed files with 58 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

108
style.css
View file

@ -5,60 +5,35 @@ body {
padding: 20px; padding: 20px;
} }
.preset-container { .header {
display: grid; background-color: #FFFFE3;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); padding-bottom: 10px;
grid-gap: 20px;
margin-top: 30px;
margin-bottom: 30px;
} }
.preset-item { .titel {
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; display: flex;
align-items: center; align-items: center; /* Zentriert Elemente vertikal */
justify-content: space-between; justify-content: center; /* Hier wird die horizontale Zentrierung eingestellt */
} gap: 10px;
.preset-item:hover {
background-color: #e0e0e0;
}
.preset-item h3 {
margin: 0;
flex-grow: 1;
}
.preset-item button {
margin-left: 5px;
cursor: pointer;
}
.new-preset-container {
margin-bottom: 15px;
} }
.current-station { .current-station {
font-weight: bold; font-weight: bold;
font-size: 16px; font-size: 16px;
margin-left: 20px; padding-left: 20px; /* Padding statt margin */
margin-bottom: 15px;
} }
#aktueller-sender { #aktueller-sender {
background-color: #FFFF00; background-color: #d2f8d2;
border-radius: 5px; border-radius: 5px;
padding: 10px 20px; padding: 10px 20px;
} }
.stop-button { .stop-button {
background-color: #ff9999; background-color: #ff9999;
color: #fff; /* Weißer Text auf rotem Hintergrund */ color: #fff; /* Weißer Text auf rotem Hintergrund */
font-weight: bold; font-weight: bold;
border: none; border: none;
border-radius: 5px; border-radius: 5px;
padding: 10px 20px; padding: 10px 20px;
@ -71,5 +46,54 @@ body {
} }
.stop-button:hover { .stop-button:hover {
background-color: #ff4d4d; /* Dunklerer Farbton beim Hovern */ 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;
}
.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;
}
.new-preset-container {
margin-bottom: 15px;
}
.button-container {
margin-bottom: 15px;
}
.footer {
margin: 20px 0;
text-align: center; /* Zentriert den gesamten Inhalt */
font-size: 12px;
color: #999
}
.footer a {
color: #999; /* Farbe der Links */
text-decoration: underline; /* Entfernt den Unterstreichung */
} }