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

Update index.css

Browse source 
Neue Import- und Export-Funktion, Bereinigung Code
This commit is contained in:
simonpipe 2025-12-18 10:33:13 +01:00
parent c050bde8b6
commit 37a3ae0bf6
1 changed files with 236 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

263
index.css
View file

@ -1,22 +1,46 @@
/* Public Domain */ /* Public Domain */
:root { :root {
/* Farben */
--primary-color: #ff9999; --primary-color: #ff9999;
--primary-color-hover: #ff7777;
--success-color: #d2f8d2;
--success-color-hover: #b8e9b8;
--background-color: #fafafa;
--header-background: #FFFFE3;
--modal-background: #fff;
--modal-background-export: #f9f9f9;
--item-background: #f1f1f1;
--item-hover: #e6e6e6;
--button-background: #f0f0f0;
--button-hover: #e0e0e0;
--button-color: #fff;
--border-color: #ddd;
--text-color: #333;
--text-color-light: #666;
--text-color-lighter: #ccc;
--shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
--modal-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
/* Schriftfamilie */
--font-family: Arial, sans-serif;
/* Layout Fix */
--header-height: 120px; --header-height: 120px;
--padding-top: calc(10px + var(--header-height)); --padding-top: calc(var(--header-height) + 20px);
--box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
} }
body { body {
font-family: Arial, sans-serif; font-family: var(--font-family);
text-align: center; text-align: center;
margin: 0; margin: 0;
padding: 20px; padding: 20px;
padding-top: var(--padding-top); padding-top: var(--padding-top);
background-color: var(--background-color);
} }
.header { .header {
background-color: #FFFFE3; background-color: var(--header-background);
height: var(--header-height); height: var(--header-height);
padding-bottom: 10px; padding-bottom: 10px;
position: fixed; position: fixed;
@ -24,7 +48,7 @@ body {
left: 0; left: 0;
width: 100%; width: 100%;
z-index: 1000; z-index: 1000;
box-shadow: var(--box-shadow); box-shadow: var(--shadow);
} }
.titel { .titel {
@ -40,12 +64,12 @@ body {
} }
.hidden { .hidden {
display: none; display: none !important;
} }
.stop-button { .stop-button {
background-color: var(--primary-color); background-color: var(--primary-color);
color: #fff; color: var(--button-color);
font-weight: bold; font-weight: bold;
border: none; border: none;
border-radius: 5px; border-radius: 5px;
@ -57,6 +81,11 @@ body {
transition: background-color 0.3s ease; transition: background-color 0.3s ease;
position: relative; position: relative;
top: -2px; top: -2px;
font-family: var(--font-family);
}
.stop-button:hover {
background-color: var(--primary-color-hover);
} }
.stop-button:focus { .stop-button:focus {
@ -68,39 +97,47 @@ body {
font-weight: bold; font-weight: bold;
font-size: 16px; font-size: 16px;
margin-bottom: 15px; margin-bottom: 15px;
font-family: var(--font-family);
} }
#aktueller-sender { #aktueller-sender {
background-color: #d2f8d2; background-color: var(--success-color);
border-radius: 5px; border-radius: 5px;
padding: 10px 20px; padding: 10px 20px;
display: inline-block;
} }
.preset-container { .preset-container {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-gap: 20px; grid-gap: 20px;
margin: 30px 0; margin: 30px auto;
max-width: 1200px;
padding: 0 10px;
} }
.preset-item { .preset-item {
background-color: #f1f1f1; background-color: var(--item-background);
padding: 15px; padding: 0 15px;
border-radius: 5px; border-radius: 5px;
box-shadow: var(--box-shadow); box-shadow: var(--shadow);
cursor: pointer; cursor: pointer;
transition: background-color 0.3s ease; transition: all 0.3s ease;
display: flex; display: flex;
align-items: center; align-items: center;
min-height: 50px;
} }
.preset-item h3 { .preset-item h3 {
margin: 0; margin: 0;
flex: 1; flex: 1;
text-align: left;
word-break: break-word;
font-family: var(--font-family);
} }
.preset-item:hover { .preset-item:hover {
background-color: #e6e6e6; background-color: var(--item-hover);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
} }
@ -108,6 +145,47 @@ body {
display: flex; display: flex;
justify-content: center; justify-content: center;
gap: 10px; gap: 10px;
flex-wrap: wrap;
margin: 20px auto 0 auto;
border-top: 1px solid var(--border-color);
padding-top: 15px;
}
.button-container button {
padding: 10px 20px;
min-width: 120px;
border: none;
border-radius: 5px;
background-color: var(--button-background);
cursor: pointer;
transition: background-color 0.3s ease;
font-family: var(--font-family);
font-size: 14px;
}
.button-container button:hover {
background-color: var(--button-hover);
}
/* Spezifische Klassen für farbige Buttons */
.btn-ok {
background-color: var(--success-color) !important;
color: var(--text-color) !important;
border: 1px solid var(--border-color) !important;
}
.btn-ok:hover {
background-color: var(--success-color-hover) !important;
}
.btn-cancel {
background-color: var(--button-background) !important;
color: var(--text-color) !important;
border: 1px solid var(--border-color) !important;
}
.btn-cancel:hover {
background-color: var(--button-hover) !important;
} }
.footer { .footer {
@ -116,22 +194,18 @@ body {
justify-content: center; justify-content: center;
margin: 20px 0; margin: 20px 0;
font-size: 12px; font-size: 12px;
color: #666; color: var(--text-color-light);
} }
.footer a { .footer a {
color: #666; color: var(--text-color-light);
text-decoration: none; text-decoration: none;
margin: 0 5px;
font-family: var(--font-family);
} }
.footer a:hover { .footer a:hover {
color: #333; color: var(--text-color);
}
@media (max-width: 600px) {
.preset-container {
grid-template-columns: 1fr;
}
} }
/* ===== Modal Styles ===== */ /* ===== Modal Styles ===== */
@ -140,10 +214,10 @@ body {
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
background-color: white; background-color: var(--modal-background);
padding: 20px; padding: 20px;
border-radius: 10px; border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); box-shadow: var(--modal-shadow);
z-index: 1000; z-index: 1000;
max-width: 800px; max-width: 800px;
width: 90%; width: 90%;
@ -156,6 +230,11 @@ body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 20px; gap: 20px;
font-family: var(--font-family);
}
.modal-content h2 {
color: var(--text-color);
} }
.modal-content table { .modal-content table {
@ -165,12 +244,13 @@ body {
.modal-content th, .modal-content th,
.modal-content td { .modal-content td {
border: 1px solid #ddd; border: 1px solid var(--border-color);
padding: 8px; padding: 8px;
font-family: var(--font-family);
} }
.modal-content th { .modal-content th {
background-color: #f2f2f2; background-color: var(--button-background);
} }
.modal-content .drag-handle { .modal-content .drag-handle {
@ -181,4 +261,133 @@ body {
.modal-content input[type="text"] { .modal-content input[type="text"] {
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
font-family: var(--font-family);
} }
.modal-content th:nth-child(1),
.modal-content td:nth-child(1) { min-width: 10px; max-width: 10px; }
.modal-content th:nth-child(4),
.modal-content td:nth-child(4) { min-width: 10px; max-width: 10px; text-align: center; }
.delete-btn {
background: none;
border: none;
cursor: pointer;
font-size: 14px;
color: var(--text-color-light);
padding: 0;
line-height: 1;
font-family: var(--font-family);
}
.delete-btn:hover { color: var(--primary-color); }
.find-sender-link {
display: inline-block;
padding: 10px 15px;
border-radius: 5px;
color: var(--text-color);
text-decoration: none;
cursor: pointer;
transition: background-color 0.3s ease;
border: 1px solid var(--border-color);
font-size: 14px;
font-family: var(--font-family);
}
.find-sender-link:hover { background-color: var(--button-background); }
/* ===== Import/Export Section ===== */
.share-details {
margin: 20px 0;
border: 1px solid var(--border-color);
border-radius: 5px;
padding: 15px;
background-color: var(--modal-background-export);
}
.share-details h3 {
font-weight: bold;
color: var(--text-color);
margin-top: 0;
margin-bottom: 15px;
font-family: var(--font-family);
}
.share-content { display: flex; flex-direction: column; gap: 15px; }
.share-section { margin-bottom: 10px; }
.share-section h4 { margin: 0 0 8px 0; font-size: 14px; color: var(--text-color); font-family: var(--font-family); }
.input-group {
display: flex;
gap: 8px;
align-items: center;
color: var(--text-color-lighter);
}
.input-group input {
flex: 1;
padding: 8px;
border: 1px solid var(--border-color);
border-radius: 4px;
font-family: monospace;
font-size: 12px;
}
.input-group button {
padding: 8px 12px;
background-color: var(--button-background);
border: 1px solid var(--border-color);
border-radius: 4px;
cursor: pointer;
white-space: nowrap;
transition: background-color 0.2s ease;
font-family: var(--font-family);
}
.input-group button:hover { background-color: var(--button-hover); }
#export-string-field, #import-string-field {
font-family: monospace;
font-size: 12px;
min-height: 36px;
}
/* Benutzerdefiniertes Modal für Meldungen */
.custom-modal {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 3000;
}
.custom-modal-content {
background-color: var(--modal-background);
padding: 20px;
border-radius: 10px;
box-shadow: var(--modal-shadow);
text-align: center;
max-width: 400px;
width: 90%;
font-family: var(--font-family);
}
.custom-modal-buttons {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 20px;
}
.custom-modal-buttons button {
padding: 8px 15px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
font-family: var(--font-family);
}