mirror of
https://github.com/MrUnknownDE/medien-dl.git
synced 2026-05-04 20:26:06 +02:00
feat: one-pager design
This commit is contained in:
+143
-205
@@ -1,242 +1,180 @@
|
||||
/* Custom Styles (Ergänzung zu Bootstrap) */
|
||||
|
||||
html {
|
||||
height: 100%; /* Wichtig für min-height im body */
|
||||
/* Modern Reset & Base */
|
||||
:root {
|
||||
--primary-color: #6366f1; /* Indigo */
|
||||
--secondary-color: #a855f7; /* Purple */
|
||||
--bg-dark: #0f172a;
|
||||
--text-main: #1e293b;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #e9ecef; /* Hellerer Hintergrund */
|
||||
display: flex; /* Flexbox aktivieren */
|
||||
flex-direction: column; /* Hauptachse vertikal */
|
||||
min-height: 100vh; /* Mindesthöhe des Viewports */
|
||||
font-family: 'Inter', sans-serif;
|
||||
background-color: #f1f5f9;
|
||||
color: var(--text-main);
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* 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 */
|
||||
/* Animated Background Shapes */
|
||||
.bg-shape {
|
||||
position: fixed;
|
||||
border-radius: 50%;
|
||||
filter: blur(80px);
|
||||
z-index: -1;
|
||||
opacity: 0.6;
|
||||
animation: float 10s infinite ease-in-out;
|
||||
}
|
||||
|
||||
/* 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 */
|
||||
.shape-1 {
|
||||
top: -10%;
|
||||
left: -10%;
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
|
||||
}
|
||||
|
||||
.page-footer hr {
|
||||
margin-top: 0; /* Abstand der Linie anpassen */
|
||||
margin-bottom: 1rem;
|
||||
.shape-2 {
|
||||
bottom: -10%;
|
||||
right: -10%;
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
background: linear-gradient(to left, #3b82f6, #06b6d4);
|
||||
animation-delay: -5s;
|
||||
}
|
||||
|
||||
.page-footer p {
|
||||
margin-bottom: 0.5rem;
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translate(0, 0); }
|
||||
50% { transform: translate(30px, 20px); }
|
||||
}
|
||||
|
||||
.page-footer i {
|
||||
margin-right: 5px;
|
||||
/* Hero Card */
|
||||
.hero-card {
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.5);
|
||||
border-radius: 24px;
|
||||
padding: 3rem;
|
||||
width: 100%;
|
||||
max-width: 650px;
|
||||
box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.page-footer strong {
|
||||
color: #343a40; /* Etwas dunklerer Text für Werte */
|
||||
.text-gradient {
|
||||
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
|
||||
/* --- 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;
|
||||
/* Input Styling */
|
||||
.main-input-group {
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
#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 */
|
||||
.main-input-group:focus-within {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 25px -5px rgba(99, 102, 241, 0.3) !important;
|
||||
}
|
||||
|
||||
/* Tabelle responsiver machen */
|
||||
.table-responsive {
|
||||
max-height: 500px; /* Höhe begrenzen */
|
||||
.main-input-group input {
|
||||
font-size: 1.1rem;
|
||||
background: white;
|
||||
}
|
||||
.main-input-group input:focus {
|
||||
box-shadow: none;
|
||||
background: white;
|
||||
}
|
||||
|
||||
#history-table th,
|
||||
#history-table td {
|
||||
vertical-align: middle; /* Vertikal zentrieren */
|
||||
font-size: 0.85rem;
|
||||
word-break: break-all;
|
||||
#submit-button {
|
||||
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
|
||||
border: none;
|
||||
transition: filter 0.2s;
|
||||
}
|
||||
#submit-button:hover {
|
||||
filter: brightness(110%);
|
||||
}
|
||||
|
||||
#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 */
|
||||
/* Options Animation */
|
||||
.options-wrapper {
|
||||
overflow: hidden;
|
||||
max-height: 0;
|
||||
opacity: 0;
|
||||
transition: max-height 0.5s ease-in-out, opacity 0.4s ease-in-out;
|
||||
}
|
||||
|
||||
#history-table td a {
|
||||
/* Bootstrap übernimmt Link-Styling, Cursor wird per JS gesetzt */
|
||||
cursor: pointer;
|
||||
.options-wrapper.show {
|
||||
max-height: 500px; /* Groß genug */
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Kontextmenü (Bootstrap-ähnlich) */
|
||||
.animate-options {
|
||||
animation: fadeIn 0.5s ease;
|
||||
}
|
||||
|
||||
/* Glass Button */
|
||||
.btn-white-glass {
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
backdrop-filter: blur(5px);
|
||||
color: var(--text-main);
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.btn-white-glass:hover {
|
||||
background: white;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
/* Progress Bar */
|
||||
.bg-gradient-primary {
|
||||
background: linear-gradient(90deg, var(--primary-color), #06b6d4);
|
||||
background-size: 200% 100%;
|
||||
animation: gradientMove 2s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes gradientMove {
|
||||
0% { background-position: 100% 0; }
|
||||
100% { background-position: -100% 0; }
|
||||
}
|
||||
|
||||
.animate-pulse {
|
||||
animation: pulse 1.5s infinite;
|
||||
}
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.5; }
|
||||
}
|
||||
|
||||
/* Helpers */
|
||||
.hover-lift:hover {
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
.fade-in-up {
|
||||
animation: fadeInUp 0.8s ease-out;
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from { opacity: 0; transform: translateY(20px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.extra-small {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
/* Context Menu */
|
||||
.context-menu {
|
||||
z-index: 1050; /* Über anderen Elementen */
|
||||
z-index: 9999;
|
||||
min-width: 150px;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
border: none;
|
||||
}
|
||||
.context-menu .list-group-item {
|
||||
cursor: pointer;
|
||||
font-size: 0.9rem;
|
||||
border: none;
|
||||
}
|
||||
.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 */
|
||||
.context-menu .list-group-item:hover {
|
||||
background-color: #f3f4f6;
|
||||
}
|
||||
Reference in New Issue
Block a user