data
d65ca027e0
Features:
- Import-Jobs: Persistierung in DB, Jobs beim Laden wiederherstellen
- Ordner loeschen: Button in Browser-Ansicht mit Modal-Dialog
- Serien konvertieren: Alle Episoden einer Serie in Queue senden
- Serien aufraumen: Alte Codec-Versionen nach Konvertierung loeschen
- Server-Log: Live-Ansicht in Admin mit Auto-Scroll
- Toast-Benachrichtigungen statt Browser-Alerts
- Bessere Fehlerbehandlung und Feedback
API:
- POST /api/library/delete-folder
- POST /api/library/series/{id}/convert
- GET /api/library/series/{id}/convert-status
- POST /api/library/series/{id}/cleanup
- GET /api/logs
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
1732 lines
35 KiB
CSS
1732 lines
35 KiB
CSS
/* === Basis === */
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
background-color: #0f0f0f;
|
|
color: #e0e0e0;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
a { color: #90caf9; text-decoration: none; }
|
|
a:hover { text-decoration: underline; }
|
|
|
|
/* === Header === */
|
|
header {
|
|
background-color: #1a1a1a;
|
|
padding: 0.8rem 1.5rem;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
border-bottom: 1px solid #2a2a2a;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 100;
|
|
}
|
|
|
|
header h1 {
|
|
font-size: 1.3rem;
|
|
font-weight: 600;
|
|
color: #fff;
|
|
}
|
|
|
|
nav { display: flex; gap: 0.5rem; }
|
|
|
|
.nav-link {
|
|
padding: 0.4rem 0.8rem;
|
|
border-radius: 6px;
|
|
color: #aaa;
|
|
font-size: 0.85rem;
|
|
transition: all 0.2s;
|
|
}
|
|
.nav-link:hover { color: #fff; background: #2a2a2a; text-decoration: none; }
|
|
.nav-link.active { color: #fff; background: #333; }
|
|
|
|
/* === Main === */
|
|
main { padding: 1.5rem; max-width: 1920px; margin: 0 auto; }
|
|
|
|
h2 {
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
margin-bottom: 1rem;
|
|
color: #fff;
|
|
}
|
|
|
|
/* === Sections === */
|
|
section { margin-bottom: 2rem; }
|
|
|
|
/* === Video Cards (Aktive Konvertierungen) === */
|
|
.video-card {
|
|
background: #1a1a1a;
|
|
border: 1px solid #2a2a2a;
|
|
border-radius: 10px;
|
|
padding: 1rem;
|
|
margin-bottom: 0.8rem;
|
|
transition: border-color 0.2s;
|
|
}
|
|
.video-card:hover { border-color: #444; }
|
|
|
|
.video-card h3 {
|
|
font-size: 0.9rem;
|
|
font-weight: 500;
|
|
margin-bottom: 0.6rem;
|
|
color: #fff;
|
|
text-align: center;
|
|
}
|
|
|
|
.video-card-values {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 0.5rem;
|
|
margin-top: 0.8rem;
|
|
}
|
|
|
|
.video-card-values-items {
|
|
text-align: center;
|
|
font-size: 0.75rem;
|
|
color: #aaa;
|
|
}
|
|
.video-card-values-items b { color: #ccc; }
|
|
|
|
/* === Progress Bar === */
|
|
.progress-container {
|
|
width: 100%;
|
|
background: #252525;
|
|
border-radius: 6px;
|
|
height: 8px;
|
|
overflow: hidden;
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
.progress-bar {
|
|
height: 100%;
|
|
width: 0%;
|
|
background: linear-gradient(90deg, #4caf50, #00c853);
|
|
border-radius: 6px;
|
|
transition: width 0.4s ease;
|
|
}
|
|
|
|
.progress-text {
|
|
font-size: 0.7rem;
|
|
color: #888;
|
|
text-align: right;
|
|
margin-top: 0.2rem;
|
|
}
|
|
|
|
/* === Queue === */
|
|
#queue {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
|
gap: 0.8rem;
|
|
}
|
|
|
|
.queue-card {
|
|
background: #1a1a1a;
|
|
border: 1px solid #2a2a2a;
|
|
border-radius: 10px;
|
|
padding: 0.8rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.queue-card h4 {
|
|
font-size: 0.8rem;
|
|
font-weight: 500;
|
|
color: #ddd;
|
|
margin-bottom: 0.5rem;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.queue-card-footer {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-top: auto;
|
|
padding-top: 0.5rem;
|
|
}
|
|
|
|
/* === Status Badges === */
|
|
.status-badge {
|
|
display: inline-block;
|
|
padding: 0.15rem 0.5rem;
|
|
border-radius: 4px;
|
|
font-size: 0.7rem;
|
|
font-weight: 600;
|
|
}
|
|
.status-badge.ok { background: #1b5e20; color: #81c784; }
|
|
.status-badge.warn { background: #e65100; color: #ffb74d; }
|
|
.status-badge.error { background: #b71c1c; color: #ef9a9a; }
|
|
.status-badge.active { background: #0d47a1; color: #90caf9; }
|
|
.status-badge.queued { background: #333; color: #aaa; }
|
|
|
|
/* === Buttons === */
|
|
.btn-primary {
|
|
background: #1976d2;
|
|
color: #fff;
|
|
border: none;
|
|
padding: 0.5rem 1.2rem;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
font-size: 0.85rem;
|
|
transition: background 0.2s;
|
|
}
|
|
.btn-primary:hover { background: #1565c0; }
|
|
|
|
.btn-secondary {
|
|
background: #333;
|
|
color: #ddd;
|
|
border: 1px solid #444;
|
|
padding: 0.5rem 1.2rem;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
font-size: 0.85rem;
|
|
}
|
|
.btn-secondary:hover { background: #444; }
|
|
|
|
.btn-danger {
|
|
background: transparent;
|
|
color: #ef5350;
|
|
border: none;
|
|
cursor: pointer;
|
|
font-size: 0.8rem;
|
|
padding: 0.2rem 0.5rem;
|
|
border-radius: 4px;
|
|
}
|
|
.btn-danger:hover { background: #2a1a1a; }
|
|
|
|
.btn-small {
|
|
font-size: 0.7rem;
|
|
padding: 0.2rem 0.4rem;
|
|
}
|
|
|
|
/* === Admin - Forms === */
|
|
.admin-section { margin-bottom: 2rem; }
|
|
|
|
fieldset {
|
|
border: 1px solid #2a2a2a;
|
|
border-radius: 10px;
|
|
padding: 1rem;
|
|
margin-bottom: 1rem;
|
|
background: #1a1a1a;
|
|
}
|
|
|
|
legend {
|
|
font-size: 0.9rem;
|
|
font-weight: 600;
|
|
color: #90caf9;
|
|
padding: 0 0.5rem;
|
|
}
|
|
|
|
.form-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
|
gap: 1rem;
|
|
}
|
|
|
|
.form-group { display: flex; flex-direction: column; gap: 0.3rem; }
|
|
|
|
.form-group label {
|
|
font-size: 0.8rem;
|
|
color: #aaa;
|
|
}
|
|
|
|
.form-group input[type="text"],
|
|
.form-group input[type="number"],
|
|
.form-group select {
|
|
background: #252525;
|
|
border: 1px solid #333;
|
|
color: #e0e0e0;
|
|
padding: 0.5rem;
|
|
border-radius: 6px;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.form-group input:focus,
|
|
.form-group select:focus {
|
|
outline: none;
|
|
border-color: #1976d2;
|
|
}
|
|
|
|
.checkbox-group label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
font-size: 0.85rem;
|
|
color: #ddd;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.checkbox-group input[type="checkbox"] {
|
|
accent-color: #1976d2;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
.form-actions {
|
|
margin-top: 1rem;
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
/* === Presets Grid === */
|
|
.presets-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
|
|
gap: 0.8rem;
|
|
}
|
|
|
|
.preset-card {
|
|
background: #1a1a1a;
|
|
border: 1px solid #2a2a2a;
|
|
border-radius: 10px;
|
|
padding: 0.8rem;
|
|
}
|
|
|
|
.preset-card h3 {
|
|
font-size: 0.85rem;
|
|
margin-bottom: 0.5rem;
|
|
color: #fff;
|
|
}
|
|
|
|
.preset-details { display: flex; flex-wrap: wrap; gap: 0.3rem; }
|
|
|
|
.tag {
|
|
display: inline-block;
|
|
padding: 0.1rem 0.4rem;
|
|
border-radius: 4px;
|
|
font-size: 0.65rem;
|
|
background: #252525;
|
|
color: #aaa;
|
|
border: 1px solid #333;
|
|
}
|
|
.tag.gpu { background: #1b5e20; color: #81c784; border-color: #2e7d32; }
|
|
.tag.cpu { background: #0d47a1; color: #90caf9; border-color: #1565c0; }
|
|
|
|
/* === Statistics === */
|
|
.stats-summary {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
|
gap: 0.8rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.stat-card {
|
|
background: #1a1a1a;
|
|
border: 1px solid #2a2a2a;
|
|
border-radius: 10px;
|
|
padding: 1rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.stat-value {
|
|
display: block;
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
color: #fff;
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 0.75rem;
|
|
color: #888;
|
|
margin-top: 0.3rem;
|
|
}
|
|
|
|
/* === Data Table === */
|
|
.data-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
.data-table th,
|
|
.data-table td {
|
|
padding: 0.6rem 0.8rem;
|
|
text-align: left;
|
|
font-size: 0.8rem;
|
|
border-bottom: 1px solid #222;
|
|
}
|
|
|
|
.data-table th {
|
|
background: #1a1a1a;
|
|
color: #aaa;
|
|
font-weight: 600;
|
|
font-size: 0.75rem;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.data-table tr:hover { background: #1a1a1a; }
|
|
|
|
.pagination {
|
|
margin-top: 1rem;
|
|
text-align: center;
|
|
}
|
|
|
|
/* === Toast === */
|
|
#toast-container {
|
|
position: fixed;
|
|
top: 4rem;
|
|
right: 1rem;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.toast {
|
|
padding: 0.7rem 1.2rem;
|
|
border-radius: 8px;
|
|
font-size: 0.85rem;
|
|
margin-bottom: 0.5rem;
|
|
opacity: 0;
|
|
transform: translateX(20px);
|
|
transition: opacity 0.3s ease, transform 0.3s ease;
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
|
|
}
|
|
.toast.show {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
.toast-success { background: #1b5e20; color: #a5d6a7; border-left: 3px solid #4caf50; }
|
|
.toast-error { background: #b71c1c; color: #ef9a9a; border-left: 3px solid #f44336; }
|
|
.toast-info { background: #1565c0; color: #90caf9; border-left: 3px solid #2196f3; }
|
|
|
|
@keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; } }
|
|
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
|
|
|
|
/* === Action Bar === */
|
|
.action-bar {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
/* === Modal === */
|
|
.modal-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(0, 0, 0, 0.7);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
z-index: 500;
|
|
backdrop-filter: blur(4px);
|
|
}
|
|
|
|
.modal {
|
|
background: #1a1a1a;
|
|
border: 1px solid #333;
|
|
border-radius: 12px;
|
|
width: 90%;
|
|
max-width: 800px;
|
|
max-height: 85vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.modal-small { max-width: 500px; }
|
|
|
|
.modal-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 1rem 1.2rem;
|
|
border-bottom: 1px solid #2a2a2a;
|
|
}
|
|
|
|
.modal-header h2 { margin-bottom: 0; }
|
|
|
|
.btn-close {
|
|
background: none;
|
|
border: none;
|
|
color: #888;
|
|
font-size: 1.5rem;
|
|
cursor: pointer;
|
|
padding: 0 0.3rem;
|
|
line-height: 1;
|
|
}
|
|
.btn-close:hover { color: #fff; }
|
|
|
|
.modal-breadcrumb {
|
|
padding: 0.5rem 1.2rem;
|
|
font-size: 0.8rem;
|
|
color: #888;
|
|
border-bottom: 1px solid #222;
|
|
background: #151515;
|
|
}
|
|
|
|
.bc-item {
|
|
color: #90caf9;
|
|
cursor: pointer;
|
|
}
|
|
.bc-item:hover { text-decoration: underline; }
|
|
.bc-sep { color: #555; }
|
|
|
|
.modal-body {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 0;
|
|
}
|
|
|
|
.modal-footer {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0.8rem 1.2rem;
|
|
border-top: 1px solid #2a2a2a;
|
|
font-size: 0.8rem;
|
|
color: #888;
|
|
}
|
|
|
|
.modal-footer div { display: flex; gap: 0.5rem; }
|
|
|
|
/* === Filebrowser === */
|
|
.fb-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.6rem;
|
|
padding: 0.5rem 1.2rem;
|
|
border-bottom: 1px solid #1f1f1f;
|
|
font-size: 0.85rem;
|
|
transition: background 0.15s;
|
|
}
|
|
.fb-item:hover { background: #222; }
|
|
|
|
.fb-dir { cursor: pointer; }
|
|
.fb-parent { color: #888; }
|
|
|
|
.fb-check { flex-shrink: 0; }
|
|
.fb-check input[type="checkbox"] {
|
|
accent-color: #1976d2;
|
|
width: 15px;
|
|
height: 15px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.fb-icon { font-size: 1.1rem; flex-shrink: 0; }
|
|
.fb-name { flex: 1; word-break: break-all; }
|
|
.fb-size { color: #888; font-size: 0.75rem; flex-shrink: 0; }
|
|
|
|
.fb-badge {
|
|
background: #0d47a1;
|
|
color: #90caf9;
|
|
padding: 0.1rem 0.4rem;
|
|
border-radius: 4px;
|
|
font-size: 0.65rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.fb-loading, .fb-error, .fb-empty {
|
|
padding: 2rem;
|
|
text-align: center;
|
|
color: #888;
|
|
}
|
|
.fb-error { color: #ef5350; }
|
|
|
|
/* === Upload === */
|
|
.upload-zone {
|
|
border: 2px dashed #333;
|
|
border-radius: 10px;
|
|
padding: 2rem;
|
|
text-align: center;
|
|
margin: 1rem 1.2rem;
|
|
transition: border-color 0.2s, background 0.2s;
|
|
}
|
|
.upload-zone:hover, .upload-zone.drag-over {
|
|
border-color: #1976d2;
|
|
background: #0d47a122;
|
|
}
|
|
|
|
.upload-zone p { color: #888; font-size: 0.9rem; }
|
|
.upload-hint { font-size: 0.75rem; margin: 0.5rem 0; }
|
|
|
|
.upload-btn {
|
|
display: inline-block;
|
|
cursor: pointer;
|
|
margin-top: 0.3rem;
|
|
}
|
|
|
|
.upload-list { padding: 0 1.2rem; }
|
|
|
|
.upload-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.4rem 0;
|
|
border-bottom: 1px solid #222;
|
|
font-size: 0.8rem;
|
|
}
|
|
.upload-item-name { flex: 1; word-break: break-all; color: #ddd; }
|
|
.upload-item-size { color: #888; font-size: 0.75rem; }
|
|
|
|
.upload-progress { padding: 0.8rem 1.2rem; }
|
|
.upload-progress .progress-container { margin-top: 0; }
|
|
|
|
.btn-primary:disabled, .btn-secondary:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* === Bibliothek === */
|
|
.library-section { margin-bottom: 2rem; }
|
|
|
|
.library-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 1rem;
|
|
}
|
|
.library-actions { display: flex; gap: 0.5rem; }
|
|
|
|
.library-stats {
|
|
display: flex;
|
|
gap: 1rem;
|
|
margin-bottom: 1rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
.lib-stat {
|
|
background: #1a1a1a;
|
|
border: 1px solid #2a2a2a;
|
|
border-radius: 8px;
|
|
padding: 0.5rem 1rem;
|
|
text-align: center;
|
|
min-width: 100px;
|
|
}
|
|
.lib-stat-value {
|
|
display: block;
|
|
font-size: 1.2rem;
|
|
font-weight: 700;
|
|
color: #fff;
|
|
}
|
|
.lib-stat-label {
|
|
font-size: 0.7rem;
|
|
color: #888;
|
|
}
|
|
|
|
.library-layout {
|
|
display: grid;
|
|
grid-template-columns: 220px 220px 1fr;
|
|
gap: 1rem;
|
|
}
|
|
|
|
/* Pfad-Navigation (ganz links) */
|
|
.library-nav {
|
|
display: block;
|
|
background: #1a1a1a;
|
|
border: 1px solid #2a2a2a;
|
|
border-radius: 10px;
|
|
padding: 0.8rem;
|
|
position: sticky;
|
|
top: 4rem;
|
|
max-height: calc(100vh - 5rem);
|
|
overflow-y: auto;
|
|
}
|
|
.library-nav h3 {
|
|
font-size: 0.85rem;
|
|
margin-bottom: 0.6rem;
|
|
color: #fff;
|
|
}
|
|
.nav-path-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.4rem;
|
|
padding: 0.45rem 0.6rem;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
font-size: 0.8rem;
|
|
color: #aaa;
|
|
transition: all 0.15s;
|
|
margin-bottom: 0.2rem;
|
|
border: 1px solid transparent;
|
|
}
|
|
.nav-path-item:hover {
|
|
background: #252525;
|
|
color: #ddd;
|
|
}
|
|
.nav-path-item.active {
|
|
background: #1976d2;
|
|
color: #fff;
|
|
border-color: #1976d2;
|
|
}
|
|
.nav-path-icon {
|
|
font-size: 0.9rem;
|
|
flex-shrink: 0;
|
|
}
|
|
.nav-path-name {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
.nav-path-count {
|
|
font-size: 0.65rem;
|
|
color: #666;
|
|
flex-shrink: 0;
|
|
}
|
|
.nav-path-item.active .nav-path-count {
|
|
color: rgba(255,255,255,0.7);
|
|
}
|
|
|
|
/* Filter-Sidebar */
|
|
.library-filters {
|
|
background: #1a1a1a;
|
|
border: 1px solid #2a2a2a;
|
|
border-radius: 10px;
|
|
padding: 1rem;
|
|
position: sticky;
|
|
top: 4rem;
|
|
max-height: calc(100vh - 5rem);
|
|
overflow-y: auto;
|
|
}
|
|
.library-filters h3 {
|
|
font-size: 0.9rem;
|
|
margin-bottom: 0.8rem;
|
|
color: #fff;
|
|
}
|
|
|
|
.filter-group {
|
|
margin-bottom: 0.8rem;
|
|
}
|
|
.filter-group > label {
|
|
font-size: 0.75rem;
|
|
color: #aaa;
|
|
display: block;
|
|
margin-bottom: 0.2rem;
|
|
}
|
|
.filter-group input[type="text"],
|
|
.filter-group select {
|
|
width: 100%;
|
|
background: #252525;
|
|
border: 1px solid #333;
|
|
color: #e0e0e0;
|
|
padding: 0.35rem 0.5rem;
|
|
border-radius: 5px;
|
|
font-size: 0.8rem;
|
|
}
|
|
.filter-group input:focus,
|
|
.filter-group select:focus {
|
|
outline: none;
|
|
border-color: #1976d2;
|
|
}
|
|
|
|
.filter-radios label,
|
|
.filter-checks label {
|
|
display: block;
|
|
font-size: 0.8rem;
|
|
color: #ccc;
|
|
cursor: pointer;
|
|
padding: 0.1rem 0;
|
|
}
|
|
.filter-radios input,
|
|
.filter-checks input {
|
|
accent-color: #1976d2;
|
|
margin-right: 0.3rem;
|
|
}
|
|
|
|
/* Tabs */
|
|
.library-tabs {
|
|
display: flex;
|
|
gap: 0.3rem;
|
|
margin-bottom: 1rem;
|
|
border-bottom: 1px solid #2a2a2a;
|
|
padding-bottom: 0.3rem;
|
|
}
|
|
.tab-btn {
|
|
background: none;
|
|
border: none;
|
|
color: #888;
|
|
font-size: 0.85rem;
|
|
padding: 0.4rem 0.8rem;
|
|
cursor: pointer;
|
|
border-radius: 6px 6px 0 0;
|
|
transition: all 0.2s;
|
|
}
|
|
.tab-btn:hover { color: #fff; }
|
|
.tab-btn.active {
|
|
color: #fff;
|
|
background: #1a1a1a;
|
|
border: 1px solid #2a2a2a;
|
|
border-bottom-color: #0f0f0f;
|
|
}
|
|
|
|
/* Video-Tabelle */
|
|
.table-wrapper { overflow-x: auto; }
|
|
.td-name {
|
|
max-width: 300px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.td-audio .tag, .td-sub .tag { margin-right: 0.2rem; }
|
|
.tag.codec { background: #0d47a1; color: #90caf9; border-color: #1565c0; }
|
|
.tag.hdr { background: #4a148c; color: #ce93d8; border-color: #6a1b9a; }
|
|
.tag.ok { background: #1b5e20; color: #81c784; border-color: #2e7d32; }
|
|
|
|
.loading-msg {
|
|
text-align: center;
|
|
color: #666;
|
|
padding: 2rem;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
/* Pagination */
|
|
.page-info {
|
|
font-size: 0.8rem;
|
|
color: #888;
|
|
margin-right: 0.5rem;
|
|
}
|
|
|
|
/* Serien-Grid */
|
|
.series-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
|
gap: 0.8rem;
|
|
}
|
|
|
|
.series-card {
|
|
background: #1a1a1a;
|
|
border: 1px solid #2a2a2a;
|
|
border-radius: 10px;
|
|
padding: 0.8rem;
|
|
display: flex;
|
|
gap: 0.8rem;
|
|
cursor: pointer;
|
|
transition: border-color 0.2s;
|
|
}
|
|
.series-card:hover { border-color: #444; }
|
|
|
|
.series-poster {
|
|
width: 60px;
|
|
height: 90px;
|
|
object-fit: cover;
|
|
border-radius: 4px;
|
|
flex-shrink: 0;
|
|
}
|
|
.series-poster-placeholder {
|
|
width: 60px;
|
|
height: 90px;
|
|
background: #252525;
|
|
border-radius: 4px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 0.6rem;
|
|
color: #666;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.series-info { flex: 1; min-width: 0; }
|
|
.series-info h4 {
|
|
font-size: 0.85rem;
|
|
color: #fff;
|
|
margin-bottom: 0.3rem;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.series-meta {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.3rem;
|
|
align-items: center;
|
|
font-size: 0.75rem;
|
|
color: #aaa;
|
|
}
|
|
|
|
/* === Film-Grid === */
|
|
.movie-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
|
gap: 0.8rem;
|
|
}
|
|
|
|
.movie-card {
|
|
background: #1a1a1a;
|
|
border: 1px solid #2a2a2a;
|
|
border-radius: 10px;
|
|
padding: 0.8rem;
|
|
display: flex;
|
|
gap: 0.8rem;
|
|
cursor: pointer;
|
|
transition: border-color 0.2s;
|
|
}
|
|
.movie-card:hover { border-color: #444; }
|
|
|
|
.movie-poster {
|
|
width: 80px;
|
|
height: 120px;
|
|
object-fit: cover;
|
|
border-radius: 4px;
|
|
flex-shrink: 0;
|
|
}
|
|
.movie-poster-placeholder {
|
|
width: 80px;
|
|
height: 120px;
|
|
background: #252525;
|
|
border-radius: 4px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 0.6rem;
|
|
color: #666;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.movie-info { flex: 1; min-width: 0; }
|
|
.movie-info h4 {
|
|
font-size: 0.85rem;
|
|
color: #fff;
|
|
margin-bottom: 0.2rem;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.movie-genres {
|
|
font-size: 0.7rem;
|
|
color: #888;
|
|
margin-bottom: 0.2rem;
|
|
}
|
|
.movie-overview {
|
|
font-size: 0.75rem;
|
|
color: #999;
|
|
line-height: 1.3;
|
|
margin-bottom: 0.3rem;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 3;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
.movie-meta {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.3rem;
|
|
align-items: center;
|
|
font-size: 0.75rem;
|
|
color: #aaa;
|
|
}
|
|
|
|
/* Film-Detail Modal */
|
|
.movie-detail-header {
|
|
display: flex;
|
|
gap: 1rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
.movie-detail-poster {
|
|
width: 140px;
|
|
height: 210px;
|
|
object-fit: cover;
|
|
border-radius: 6px;
|
|
flex-shrink: 0;
|
|
}
|
|
.movie-detail-info { flex: 1; }
|
|
|
|
/* Serien-Detail Modal */
|
|
.series-detail-header {
|
|
display: flex;
|
|
gap: 1rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
.series-detail-poster {
|
|
width: 120px;
|
|
height: 180px;
|
|
object-fit: cover;
|
|
border-radius: 6px;
|
|
flex-shrink: 0;
|
|
}
|
|
.series-detail-info { flex: 1; }
|
|
.series-overview {
|
|
font-size: 0.85rem;
|
|
color: #ccc;
|
|
margin-bottom: 0.5rem;
|
|
line-height: 1.4;
|
|
}
|
|
.series-detail-meta {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.3rem;
|
|
}
|
|
|
|
.season-details {
|
|
margin-bottom: 0.5rem;
|
|
border: 1px solid #2a2a2a;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
}
|
|
.season-details summary {
|
|
background: #1a1a1a;
|
|
padding: 0.6rem 0.8rem;
|
|
cursor: pointer;
|
|
font-size: 0.85rem;
|
|
font-weight: 600;
|
|
color: #fff;
|
|
}
|
|
.season-details summary:hover { background: #222; }
|
|
.season-table { margin: 0; }
|
|
.season-table th { background: #151515; }
|
|
|
|
.row-missing { opacity: 0.6; }
|
|
.row-missing td { color: #888; }
|
|
.text-warn { color: #ffb74d; }
|
|
.text-muted { color: #888; font-size: 0.8rem; }
|
|
|
|
/* TVDB Modal */
|
|
.tvdb-results { max-height: 400px; overflow-y: auto; }
|
|
.tvdb-result {
|
|
display: flex;
|
|
gap: 0.8rem;
|
|
padding: 0.6rem;
|
|
border-bottom: 1px solid #222;
|
|
cursor: pointer;
|
|
transition: background 0.15s;
|
|
}
|
|
.tvdb-result:hover { background: #222; }
|
|
.tvdb-thumb {
|
|
width: 45px;
|
|
height: 65px;
|
|
object-fit: cover;
|
|
border-radius: 3px;
|
|
flex-shrink: 0;
|
|
}
|
|
.tvdb-overview {
|
|
font-size: 0.75rem;
|
|
color: #888;
|
|
margin-top: 0.2rem;
|
|
}
|
|
|
|
/* Duplikate */
|
|
.duplicates-list { max-height: 70vh; overflow-y: auto; }
|
|
.duplicate-pair {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.6rem;
|
|
border-bottom: 1px solid #222;
|
|
}
|
|
.dupe-item { flex: 1; }
|
|
.dupe-name {
|
|
font-size: 0.8rem;
|
|
color: #ddd;
|
|
display: block;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.dupe-vs {
|
|
color: #666;
|
|
font-size: 0.7rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Scan-Progress */
|
|
.scan-progress {
|
|
background: #1a1a1a;
|
|
border: 1px solid #2a2a2a;
|
|
border-radius: 8px;
|
|
padding: 0.6rem 1rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
.scan-status {
|
|
font-size: 0.8rem;
|
|
color: #aaa;
|
|
display: block;
|
|
margin-top: 0.3rem;
|
|
}
|
|
|
|
/* Pagination-Zeile mit Limit-Dropdown */
|
|
.pagination-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-top: 0.5rem;
|
|
gap: 1rem;
|
|
}
|
|
.page-limit {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.4rem;
|
|
font-size: 0.8rem;
|
|
color: #888;
|
|
}
|
|
.page-limit select {
|
|
background: #252525;
|
|
color: #ddd;
|
|
border: 1px solid #333;
|
|
border-radius: 4px;
|
|
padding: 0.2rem 0.4rem;
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
/* Ordner-Ansicht */
|
|
.browser-breadcrumb {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 0.3rem;
|
|
padding: 0.6rem 0;
|
|
font-size: 0.85rem;
|
|
border-bottom: 1px solid #2a2a2a;
|
|
margin-bottom: 0.8rem;
|
|
}
|
|
.breadcrumb-link {
|
|
color: #64b5f6;
|
|
text-decoration: none;
|
|
}
|
|
.breadcrumb-link:hover {
|
|
text-decoration: underline;
|
|
}
|
|
.breadcrumb-sep {
|
|
color: #555;
|
|
}
|
|
.browser-folders {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
|
gap: 0.5rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
.browser-folder {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.6rem;
|
|
background: #1a1a1a;
|
|
border: 1px solid #2a2a2a;
|
|
border-radius: 6px;
|
|
padding: 0.6rem 0.8rem;
|
|
cursor: pointer;
|
|
transition: border-color 0.15s;
|
|
}
|
|
.browser-folder:hover {
|
|
border-color: #444;
|
|
background: #1e1e1e;
|
|
}
|
|
.folder-icon {
|
|
font-size: 1.6rem;
|
|
flex-shrink: 0;
|
|
}
|
|
.folder-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 0;
|
|
}
|
|
.folder-name {
|
|
font-size: 0.85rem;
|
|
font-weight: 600;
|
|
color: #ddd;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.folder-meta {
|
|
font-size: 0.75rem;
|
|
color: #888;
|
|
}
|
|
.folder-main {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.6rem;
|
|
flex: 1;
|
|
min-width: 0;
|
|
cursor: pointer;
|
|
}
|
|
.btn-folder-delete {
|
|
position: absolute;
|
|
top: 0.4rem;
|
|
right: 0.4rem;
|
|
background: rgba(0,0,0,0.5);
|
|
border: none;
|
|
color: #888;
|
|
padding: 0.35rem;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
opacity: 0;
|
|
transition: opacity 0.15s, color 0.15s, background 0.15s;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.browser-folder {
|
|
position: relative;
|
|
}
|
|
.browser-folder:hover .btn-folder-delete {
|
|
opacity: 1;
|
|
}
|
|
.btn-folder-delete:hover {
|
|
color: #e74c3c;
|
|
background: rgba(231, 76, 60, 0.2);
|
|
}
|
|
.browser-videos {
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
/* === Library-Sektionen (ein Bereich pro Scan-Pfad) === */
|
|
.lib-section {
|
|
background: #161616;
|
|
border: 1px solid #2a2a2a;
|
|
border-radius: 10px;
|
|
margin-bottom: 1.2rem;
|
|
overflow: hidden;
|
|
}
|
|
.lib-section-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.8rem;
|
|
padding: 0.8rem 1rem;
|
|
background: #1a1a1a;
|
|
border-bottom: 1px solid #2a2a2a;
|
|
flex-wrap: wrap;
|
|
}
|
|
.lib-section-header h3 {
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
color: #fff;
|
|
margin: 0;
|
|
}
|
|
.lib-section-actions {
|
|
margin-left: auto;
|
|
display: flex;
|
|
gap: 0.3rem;
|
|
}
|
|
.lib-section .library-tabs {
|
|
margin: 0;
|
|
padding: 0 0.8rem;
|
|
border-bottom: 1px solid #222;
|
|
background: #181818;
|
|
}
|
|
.lib-section .section-content {
|
|
padding: 0.8rem 1rem;
|
|
}
|
|
|
|
/* Detail-Tabs im Serien-Modal */
|
|
.detail-tabs {
|
|
display: flex;
|
|
gap: 0;
|
|
border-bottom: 1px solid #2a2a2a;
|
|
background: #151515;
|
|
}
|
|
.detail-tab {
|
|
background: none;
|
|
border: none;
|
|
color: #888;
|
|
font-size: 0.85rem;
|
|
padding: 0.6rem 1.2rem;
|
|
cursor: pointer;
|
|
border-bottom: 2px solid transparent;
|
|
transition: all 0.2s;
|
|
}
|
|
.detail-tab:hover { color: #fff; }
|
|
.detail-tab.active {
|
|
color: #90caf9;
|
|
border-bottom-color: #1976d2;
|
|
}
|
|
|
|
/* Modal-Header erweitert */
|
|
.modal-header-actions {
|
|
display: flex;
|
|
gap: 0.3rem;
|
|
align-items: center;
|
|
}
|
|
|
|
/* Genres in Serien */
|
|
.series-genres-line {
|
|
font-size: 0.75rem;
|
|
color: #888;
|
|
}
|
|
.series-genres {
|
|
font-size: 0.7rem;
|
|
color: #888;
|
|
margin-bottom: 0.2rem;
|
|
}
|
|
|
|
/* === Cast-Grid === */
|
|
.cast-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
|
gap: 0.8rem;
|
|
}
|
|
.cast-card {
|
|
display: flex;
|
|
gap: 0.6rem;
|
|
background: #1a1a1a;
|
|
border: 1px solid #2a2a2a;
|
|
border-radius: 8px;
|
|
padding: 0.6rem;
|
|
align-items: center;
|
|
}
|
|
.cast-photo {
|
|
width: 50px;
|
|
height: 70px;
|
|
object-fit: cover;
|
|
border-radius: 4px;
|
|
flex-shrink: 0;
|
|
}
|
|
.cast-photo-placeholder {
|
|
width: 50px;
|
|
height: 70px;
|
|
background: #252525;
|
|
border-radius: 4px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 1.2rem;
|
|
color: #555;
|
|
flex-shrink: 0;
|
|
}
|
|
.cast-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.1rem;
|
|
min-width: 0;
|
|
}
|
|
.cast-info strong {
|
|
font-size: 0.8rem;
|
|
color: #ddd;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.cast-info .text-muted {
|
|
font-size: 0.7rem;
|
|
}
|
|
|
|
/* === Artwork-Galerie === */
|
|
.artwork-type-header {
|
|
font-size: 0.9rem;
|
|
font-weight: 600;
|
|
color: #fff;
|
|
margin: 1rem 0 0.5rem;
|
|
padding-bottom: 0.3rem;
|
|
border-bottom: 1px solid #2a2a2a;
|
|
}
|
|
.artwork-type-header:first-child { margin-top: 0; }
|
|
|
|
.artwork-gallery {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
|
gap: 0.5rem;
|
|
}
|
|
.artwork-item {
|
|
position: relative;
|
|
border-radius: 6px;
|
|
overflow: hidden;
|
|
border: 1px solid #2a2a2a;
|
|
transition: border-color 0.2s;
|
|
}
|
|
.artwork-item:hover { border-color: #1976d2; text-decoration: none; }
|
|
.artwork-item img {
|
|
width: 100%;
|
|
height: auto;
|
|
display: block;
|
|
}
|
|
.artwork-size {
|
|
position: absolute;
|
|
bottom: 4px;
|
|
right: 4px;
|
|
background: rgba(0,0,0,0.7);
|
|
color: #aaa;
|
|
font-size: 0.6rem;
|
|
padding: 0.1rem 0.3rem;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
/* === Pfade-Verwaltung === */
|
|
.path-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0.6rem;
|
|
border-bottom: 1px solid #222;
|
|
gap: 0.5rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
.path-info {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.4rem;
|
|
flex-wrap: wrap;
|
|
min-width: 0;
|
|
}
|
|
.path-actions {
|
|
display: flex;
|
|
gap: 0.3rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* === Clean-Modal === */
|
|
.clean-list { max-height: 60vh; overflow-y: auto; }
|
|
.clean-list .data-table td { padding: 0.3rem 0.5rem; font-size: 0.75rem; }
|
|
|
|
/* === Import-Modal === */
|
|
.import-browser-bar {
|
|
display: flex;
|
|
gap: 0.4rem;
|
|
padding: 0.6rem 1rem;
|
|
background: #181818;
|
|
border-bottom: 1px solid #2a2a2a;
|
|
align-items: center;
|
|
}
|
|
.import-browser {
|
|
max-height: 45vh;
|
|
overflow-y: auto;
|
|
border-bottom: 1px solid #2a2a2a;
|
|
}
|
|
.import-browser .fb-breadcrumb {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 0.3rem;
|
|
padding: 0.4rem 1rem;
|
|
font-size: 0.8rem;
|
|
background: #151515;
|
|
border-bottom: 1px solid #222;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 1;
|
|
}
|
|
.import-browser .fb-breadcrumb a {
|
|
color: #64b5f6;
|
|
}
|
|
.import-browser-folder {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.6rem;
|
|
padding: 0.45rem 1rem;
|
|
font-size: 0.85rem;
|
|
cursor: pointer;
|
|
border-bottom: 1px solid #1a1a1a;
|
|
transition: background 0.12s;
|
|
}
|
|
.import-browser-folder:hover { background: #1e1e1e; }
|
|
.import-browser-folder.selected {
|
|
background: #0d47a1;
|
|
color: #fff;
|
|
}
|
|
.import-browser-folder .fb-icon { font-size: 1.1rem; flex-shrink: 0; }
|
|
.import-browser-folder .fb-name { flex: 1; }
|
|
.import-browser-folder .fb-meta {
|
|
font-size: 0.7rem;
|
|
color: #888;
|
|
flex-shrink: 0;
|
|
}
|
|
.import-browser-folder.selected .fb-meta { color: rgba(255,255,255,0.7); }
|
|
.import-setup-footer {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0.6rem 1rem;
|
|
background: #181818;
|
|
gap: 1rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
.import-setup-opts {
|
|
display: flex;
|
|
gap: 0.4rem;
|
|
align-items: center;
|
|
font-size: 0.8rem;
|
|
color: #aaa;
|
|
}
|
|
.import-setup-opts select {
|
|
background: #252525;
|
|
color: #ddd;
|
|
border: 1px solid #333;
|
|
border-radius: 5px;
|
|
padding: 0.3rem 0.4rem;
|
|
font-size: 0.8rem;
|
|
}
|
|
.import-setup-footer > div {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
align-items: center;
|
|
}
|
|
.import-items-list { max-height: 55vh; overflow-y: auto; }
|
|
.import-items-list .data-table td { padding: 0.3rem 0.5rem; font-size: 0.75rem; }
|
|
.import-actions-cell {
|
|
white-space: nowrap;
|
|
display: flex;
|
|
gap: 0.2rem;
|
|
}
|
|
.row-conflict { background: #2a1a10 !important; }
|
|
.row-conflict:hover { background: #332010 !important; }
|
|
|
|
/* === TVDB Review-Modal === */
|
|
.tvdb-review-list {
|
|
max-height: 70vh;
|
|
overflow-y: auto;
|
|
padding: 0.5rem;
|
|
}
|
|
.review-item {
|
|
background: #1a1a1a;
|
|
border: 1px solid #2a2a2a;
|
|
border-radius: 8px;
|
|
margin-bottom: 0.5rem;
|
|
overflow: hidden;
|
|
transition: opacity 0.3s;
|
|
}
|
|
.review-item-done {
|
|
opacity: 0.5;
|
|
border-color: #2e7d32;
|
|
}
|
|
.review-item-skipped {
|
|
opacity: 0.35;
|
|
border-color: #555;
|
|
}
|
|
.review-item-loading {
|
|
opacity: 0.6;
|
|
pointer-events: none;
|
|
}
|
|
.review-item-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.6rem 0.8rem;
|
|
background: #151515;
|
|
flex-wrap: wrap;
|
|
}
|
|
.review-local-name {
|
|
font-size: 0.95rem;
|
|
color: #fff;
|
|
}
|
|
.review-skip-btn, .review-search-btn {
|
|
margin-left: auto;
|
|
font-size: 0.7rem !important;
|
|
}
|
|
.review-search-btn {
|
|
margin-left: 0;
|
|
}
|
|
.tag-series { background: #1565c0; color: #fff; }
|
|
.tag-movie { background: #6a1b9a; color: #fff; }
|
|
.review-suggestions {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
padding: 0.5rem 0.8rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
.review-suggestion {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
background: #222;
|
|
border: 1px solid #333;
|
|
border-radius: 6px;
|
|
padding: 0.5rem;
|
|
cursor: pointer;
|
|
flex: 1;
|
|
min-width: 200px;
|
|
max-width: 350px;
|
|
transition: border-color 0.15s, background 0.15s;
|
|
}
|
|
.review-suggestion:hover {
|
|
border-color: #64b5f6;
|
|
background: #1a2a3a;
|
|
}
|
|
.review-poster {
|
|
width: 50px;
|
|
height: 75px;
|
|
object-fit: cover;
|
|
border-radius: 4px;
|
|
flex-shrink: 0;
|
|
}
|
|
.review-poster-placeholder {
|
|
width: 50px;
|
|
height: 75px;
|
|
background: #333;
|
|
border-radius: 4px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #666;
|
|
font-size: 1.2rem;
|
|
flex-shrink: 0;
|
|
}
|
|
.review-suggestion-info {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
.review-suggestion-info strong {
|
|
font-size: 0.85rem;
|
|
color: #e0e0e0;
|
|
display: block;
|
|
}
|
|
.review-overview {
|
|
font-size: 0.7rem;
|
|
color: #888;
|
|
margin: 0.2rem 0 0;
|
|
line-height: 1.3;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 3;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
.review-manual-search {
|
|
display: flex;
|
|
gap: 0.4rem;
|
|
flex-wrap: wrap;
|
|
align-items: flex-start;
|
|
padding: 0.5rem 0;
|
|
width: 100%;
|
|
}
|
|
.review-search-input {
|
|
flex: 1;
|
|
min-width: 200px;
|
|
background: #252525;
|
|
color: #ddd;
|
|
border: 1px solid #444;
|
|
border-radius: 5px;
|
|
padding: 0.4rem 0.6rem;
|
|
font-size: 0.8rem;
|
|
}
|
|
.review-search-results {
|
|
display: flex;
|
|
gap: 0.4rem;
|
|
flex-wrap: wrap;
|
|
width: 100%;
|
|
margin-top: 0.3rem;
|
|
}
|
|
|
|
/* === Codec-Stats (Konvertierung) === */
|
|
.codec-stats {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.3rem;
|
|
margin: 0.5rem 0;
|
|
}
|
|
.codec-stats .tag {
|
|
font-size: 0.75rem;
|
|
padding: 0.2rem 0.5rem;
|
|
}
|
|
|
|
/* === Benachrichtigungs-Glocke === */
|
|
.notification-bell {
|
|
position: fixed;
|
|
bottom: 20px;
|
|
left: 20px;
|
|
width: 48px;
|
|
height: 48px;
|
|
background: #2a2a2a;
|
|
border: 1px solid #444;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
color: #888;
|
|
transition: all 0.2s ease;
|
|
z-index: 1000;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
|
|
}
|
|
.notification-bell:hover {
|
|
background: #333;
|
|
color: #fff;
|
|
transform: scale(1.05);
|
|
}
|
|
.notification-bell.has-error {
|
|
color: #ff6b6b;
|
|
animation: bell-shake 0.5s ease;
|
|
}
|
|
@keyframes bell-shake {
|
|
0%, 100% { transform: rotate(0); }
|
|
25% { transform: rotate(-10deg); }
|
|
75% { transform: rotate(10deg); }
|
|
}
|
|
.notification-badge {
|
|
position: absolute;
|
|
top: -4px;
|
|
right: -4px;
|
|
background: #e74c3c;
|
|
color: #fff;
|
|
font-size: 0.65rem;
|
|
font-weight: bold;
|
|
min-width: 18px;
|
|
height: 18px;
|
|
border-radius: 9px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0 4px;
|
|
}
|
|
|
|
/* === Log-Panel === */
|
|
.notification-panel {
|
|
position: fixed;
|
|
bottom: 80px;
|
|
left: 20px;
|
|
width: 400px;
|
|
max-height: 50vh;
|
|
background: #1e1e1e;
|
|
border: 1px solid #444;
|
|
border-radius: 8px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
z-index: 1001;
|
|
box-shadow: 0 4px 20px rgba(0,0,0,0.4);
|
|
}
|
|
.notification-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0.6rem 0.8rem;
|
|
border-bottom: 1px solid #333;
|
|
font-weight: 500;
|
|
color: #ddd;
|
|
}
|
|
.notification-header > div {
|
|
display: flex;
|
|
gap: 0.3rem;
|
|
align-items: center;
|
|
}
|
|
.notification-list {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
max-height: 45vh;
|
|
}
|
|
.notification-item {
|
|
padding: 0.5rem 0.8rem;
|
|
border-bottom: 1px solid #2a2a2a;
|
|
font-size: 0.8rem;
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
align-items: flex-start;
|
|
}
|
|
.notification-item:hover {
|
|
background: #252525;
|
|
}
|
|
.notification-item.error {
|
|
background: rgba(231, 76, 60, 0.1);
|
|
border-left: 3px solid #e74c3c;
|
|
}
|
|
.notification-item.warning {
|
|
background: rgba(241, 196, 15, 0.1);
|
|
border-left: 3px solid #f1c40f;
|
|
}
|
|
.notification-time {
|
|
color: #666;
|
|
font-size: 0.7rem;
|
|
white-space: nowrap;
|
|
min-width: 55px;
|
|
}
|
|
.notification-msg {
|
|
color: #ccc;
|
|
word-break: break-word;
|
|
flex: 1;
|
|
}
|
|
.notification-item.error .notification-msg {
|
|
color: #ff8a8a;
|
|
}
|
|
.notification-empty {
|
|
padding: 2rem;
|
|
text-align: center;
|
|
color: #666;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
/* === Responsive === */
|
|
@media (max-width: 768px) {
|
|
header { flex-direction: column; gap: 0.5rem; }
|
|
nav { width: 100%; justify-content: center; }
|
|
main { padding: 1rem; }
|
|
.video-card-values { grid-template-columns: repeat(2, 1fr); }
|
|
.form-grid { grid-template-columns: 1fr; }
|
|
.stats-summary { grid-template-columns: repeat(2, 1fr); }
|
|
.library-layout { grid-template-columns: 1fr; }
|
|
.library-nav { position: static; max-height: none; }
|
|
.library-filters { position: static; max-height: none; }
|
|
.td-name { max-width: 150px; }
|
|
.series-grid { grid-template-columns: 1fr; }
|
|
.movie-grid { grid-template-columns: 1fr; }
|
|
.cast-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
|
|
.artwork-gallery { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
|
|
.lib-section-header { flex-direction: column; align-items: flex-start; }
|
|
}
|