medien-dl/static/style.css

/* Custom Styles (Ergänzung zu Bootstrap) */

html {
    height: 100%; /* Wichtig für min-height im body */
}

body {
    background-color: #e9ecef; /* Hellerer Hintergrund */
    display: flex; /* Flexbox aktivieren */
    flex-direction: column; /* Hauptachse vertikal */
    min-height: 100vh; /* Mindesthöhe des Viewports */
}

/* Hauptinhalts-Container soll wachsen */
.main-content {
    flex: 1 0 auto; /* flex-grow: 1, flex-shrink: 0, flex-basis: auto */
    /* Kein margin-bottom hier, der Footer kümmert sich um den Abstand */
}

/* Footer soll nicht schrumpfen und hat eigenen Abstand/Styling */
.page-footer {
    flex-shrink: 0; /* Verhindert, dass der Footer schrumpft */
    background-color: #f8f9fa; /* Optional: Leichter Hintergrund für Footer */
    /* mt-auto im HTML sorgt für den Push nach unten */
    /* padding-top und padding-bottom im HTML oder hier definieren */
}

.page-footer hr {
    margin-top: 0; /* Abstand der Linie anpassen */
    margin-bottom: 1rem;
}

.page-footer p {
    margin-bottom: 0.5rem;
}

.page-footer i {
    margin-right: 5px;
}

.page-footer strong {
    color: #343a40; /* Etwas dunklerer Text für Werte */
}


/* --- Restliche Styles --- */

/* Verbessere Lesbarkeit im Log */
#log-output {
    max-height: 250px;
    overflow-y: auto;  /* Vertikales Scrollen bei Bedarf */
    overflow-x: auto;  /* NEU: Horizontales Scrollen bei Bedarf (Fallback) */
    background-color: #f8f8f8;
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 3px;
    font-size: 0.85rem;
}

#log-content {
    white-space: pre-wrap;    /* Wichtig: Behält Zeilenumbrüche bei UND erlaubt Umbruch langer Zeilen */
    overflow-wrap: break-word;/* Wichtig: Bricht lange Wörter/URLs um, um Überlauf zu verhindern */
    word-wrap: break-word;    /* Älterer Alias für overflow-wrap */
    margin: 0;
    font-family: monospace;
    /* Entferne explizite Breiten- oder Overflow-Regeln hier, der Container steuert das */
}

/* Tabelle responsiver machen */
.table-responsive {
    max-height: 500px; /* Höhe begrenzen */
}

#history-table th,
#history-table td {
    vertical-align: middle; /* Vertikal zentrieren */
    font-size: 0.85rem;
    word-break: break-all;
}

#history-table th:nth-child(2), /* Plattform Icon Spalte */
#history-table td:nth-child(2) {
    text-align: center;
    width: 40px; /* Feste Breite für Icon */
}

#history-table td a {
    /* Bootstrap übernimmt Link-Styling, Cursor wird per JS gesetzt */
    cursor: pointer;
}

/* Kontextmenü (Bootstrap-ähnlich) */
.context-menu {
    z-index: 1050; /* Über anderen Elementen */
    min-width: 150px;
}
.context-menu .list-group-item {
    cursor: pointer;
    font-size: 0.9rem;
}
.context-menu .list-group-item i {
    width: 1.2em; /* Platz für Icons */
}

/* Versteckte Elemente */
.d-none {
    display: none !important; /* Wichtig, um Bootstrap zu überschreiben, falls nötig */
}

/* Fortschrittsbalken Text zentrieren */
.progress {
    position: relative;
}
.progress-bar {
    /* Textfarbe anpassen, falls nötig */
    /* color: #212529; */
    font-weight: bold;
    display: flex; /* Ermöglicht Zentrierung */
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Verhindert, dass Text überläuft */
}

/* Optional: Fehlerhafter Fortschrittsbalken */
.progress-bar.bg-danger {
    color: white;
}

/* Kleinere Anpassungen für Radio-Buttons */
.form-check-label i {
    margin-right: 4px;
    width: 1em; /* Platz für Icon */
}

/* Anpassung für Comboboxen */
#youtube-quality .form-select-sm {
    max-width: 180px; /* Breite begrenzen */
    display: inline-block; /* Nebeneinander mit Label */
    width: auto; /* Automatische Breite */
}
#youtube-quality label {
     margin-right: 5px;
}
#mp3-quality-section, #mp4-quality-section {
    margin-right: 15px; /* Abstand zwischen Qualitätsoptionen */
}

/* Plattform Icons im Formular */
.form-check-label i.fa-soundcloud { color: #ff5500; }
.form-check-label i.fa-youtube { color: #ff0000; }
.form-check-label i.fa-tiktok { color: #000000; } /* Oder #fe2c55, #00f2ea */
.form-check-label i.fa-instagram { color: #E1306C; } /* Instagram Pink */
.form-check-label i.fa-x-twitter { color: #000000; } /* Twitter/X Schwarz */
.form-check-label i.fa-twitter { color: #1DA1F2; } /* Altes Twitter Blau (Fallback) */


/* Plattform Icons in der History Tabelle */
#history-table td i.fa-soundcloud { color: #ff5500; }
#history-table td i.fa-youtube { color: #ff0000; }
#history-table td i.fa-tiktok { color: #000000; } /* Oder #fe2c55, #00f2ea */
#history-table td i.fa-instagram { color: #E1306C; } /* Instagram Pink */
#history-table td i.fa-x-twitter { color: #000000; } /* Twitter/X Schwarz */
#history-table td i.fa-twitter { color: #1DA1F2; } /* Altes Twitter Blau (Fallback) */

/* Hilfetext für URL-Eingabe */
#urlHelp {
    font-size: 0.8rem;
}

/* --- Fullscreen Processing Overlay --- */
#processing-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(10, 25, 47, 0.85); /* Dunkelblauer, transparenter Hintergrund */
    backdrop-filter: blur(5px); /* Hintergrund unscharf machen */
    -webkit-backdrop-filter: blur(5px); /* Für Safari-Kompatibilität */
    z-index: 2000; /* Über allem anderen */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #64ffda; /* Cyan/Türkis für den Text */
    font-family: 'Courier New', Courier, monospace;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

#processing-overlay.visible {
    opacity: 1;
    visibility: visible;
}

#processing-overlay img {
    max-width: 90%;
    width: 350px;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 0 25px rgba(100, 255, 218, 0.5); /* Passender Leuchteffekt */
    margin-bottom: 20px;
}

#processing-overlay #overlay-message {
    font-size: 1.5rem;
    text-shadow: 0 0 10px #64ffda; /* Leuchteffekt für Text */
    padding: 0 20px;
    margin-bottom: 25px; /* Mehr Abstand nach unten */
}

/* NEU: Stile für den Status-Container im Overlay */
.overlay-status-container {
    width: 80%;
    max-width: 600px;
}

#overlay-status-text {
    font-size: 1rem;
    color: #ccd6f6; /* Heller, aber nicht so grell wie die Hauptfarbe */
    margin-bottom: 10px;
    min-height: 1.2em; /* Verhindert Springen bei Textänderung */
    word-wrap: break-word;
}

/* NEU: Stile für den Fortschrittsbalken im Overlay */
#processing-overlay .progress {
    height: 20px;
    background-color: rgba(100, 255, 218, 0.1); /* Hintergrund des Balkens */
    border: 1px solid rgba(100, 255, 218, 0.3);
    border-radius: 5px;
    padding: 2px;
}

#processing-overlay .progress-bar {
    background-color: #64ffda !important; /* Wichtig, um Bootstrap zu überschreiben */
    color: #0a192f; /* Dunkler Text für Kontrast */
    font-weight: bold;
    transition: width 0.3s ease-in-out; /* Weicherer Übergang */
}