diff --git a/editor.py b/editor.py index 5dc60ec..08a4c6d 100644 --- a/editor.py +++ b/editor.py @@ -1355,85 +1355,45 @@ th { color:var(--color-text-muted); font-weight:normal; } .spinner { width:54px; height:54px; border:5px solid var(--color-control-hover); border-top-color:var(--color-white); border-radius:50%; animation:spin .8s linear infinite; } @keyframes spin { to { transform:rotate(360deg); } } @media(max-width:900px) { .filter-bar { grid-template-columns:1fr 1fr; } .filter-bar .search { grid-column:auto; } } -@media(max-width:800px) { +@media (max-width:800px) { body { padding:12px; } + .finished-table, .finished-table tbody, .finished-table tr, .finished-table td { display:block; } + .finished-table { background:transparent; border:0; overflow:visible; } + .finished-table thead { display:none; } + .finished-table tbody { display:grid; gap:18px; } + .finished-table tr { display:grid; grid-template-columns:1fr auto; grid-template-areas:"event date" "title title" "speaker speaker" "duration duration" "audio audio" "actions actions"; gap:0 12px; margin:0; padding:20px; background:var(--color-surface); border:1px solid var(--color-border); border-radius:20px; box-shadow:0 8px 24px var(--color-shadow); } + .finished-table td { border:0; padding:0; min-width:0; } + .finished-table td:nth-child(4) { grid-area:event; justify-self:start; align-self:start; padding:6px 10px; color:var(--color-primary-hover); background:var(--color-selection); border-radius:999px; font-size:12px; font-weight:700; line-height:1.2; } + .finished-table td:nth-child(1) { grid-area:date; justify-self:end; align-self:center; color:var(--color-text-muted); font-size:12px; white-space:nowrap; } + .finished-table td:nth-child(3) { grid-area:title; margin-top:16px; color:var(--color-text); font-size:20px; font-weight:750; line-height:1.25; } + .finished-table td:nth-child(2) { grid-area:speaker; margin-top:6px; color:var(--color-text-muted); font-size:14px; font-weight:600; } + .finished-table td:nth-child(5) { grid-area:duration; margin-top:16px; color:var(--color-text-muted); font-size:13px; } + .finished-table td:nth-child(5)::before { content:"⏱ "; font-size:14px; } + .finished-table td:nth-child(6) { grid-area:audio; margin-top:4px; } + .finished-table td:nth-child(7) { grid-area:actions; margin-top:14px; padding-top:14px; border-top:1px solid var(--color-border-subtle); } + .finished-table audio { width:100%; height:42px; margin:0; } + .finished-table a.button { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 16px; margin:0; border-radius:12px; } - .recordings-table, .recordings-table tbody, .recordings-table tr, .recordings-table td, - .finished-table, .finished-table tbody, .finished-table tr, .finished-table td { - display:block; - } - - .recordings-table, .finished-table { - background:transparent; - } - - .recordings-table thead, .finished-table thead { display:none; } - - .recordings-table tbody, .finished-table tbody { - display:grid; - gap:12px; - } - - .recordings-table tr, .finished-table tr { - padding:12px 14px; - border:1px solid var(--color-border); - border-radius:12px; - background:var(--color-surface); - box-shadow:0 2px 8px var(--color-shadow); - } - - .recordings-table td, .finished-table td { - display:grid; - grid-template-columns:92px minmax(0,1fr); - gap:10px; - align-items:baseline; - border:0; - padding:7px 0; - min-width:0; - } - - .recordings-table td::before, .finished-table td::before { - color:var(--color-text-muted); - font-size:11px; - font-weight:600; - text-transform:uppercase; - letter-spacing:.04em; - } - + .recordings-table, .recordings-table tbody, .recordings-table tr, .recordings-table td { display:block; } + .recordings-table { background:transparent; border:0; overflow:visible; } + .recordings-table thead { display:none; } + .recordings-table tbody { display:grid; gap:14px; } + .recordings-table tr { padding:16px; background:var(--color-surface); border:1px solid var(--color-border); border-radius:16px; box-shadow:0 6px 18px var(--color-shadow); } + .recordings-table td { display:grid; grid-template-columns:72px minmax(0,1fr); gap:10px; align-items:baseline; border:0; padding:6px 0; min-width:0; } + .recordings-table td::before { color:var(--color-text-muted); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; } .recordings-table td:nth-child(1)::before { content:"Dateiname"; } .recordings-table td:nth-child(2)::before { content:"Größe"; } .recordings-table td:nth-child(3)::before { content:"Dauer"; } - .recordings-table td:nth-child(4) { - display:block; - padding-top:9px; - border-top:1px solid var(--color-border-subtle); - margin-top:4px; - } + .recordings-table td:nth-child(4) { display:block; margin-top:8px; padding-top:12px; border-top:1px solid var(--color-border-subtle); } .recordings-table td:nth-child(4)::before { content:none; } + .recordings-table audio { width:100%; } + .recordings-table .actions { display:flex; gap:8px; flex-wrap:wrap; } - .finished-table td:nth-child(1)::before { content:"Zeitpunkt"; } - .finished-table td:nth-child(2)::before { content:"Redner"; } - .finished-table td:nth-child(3)::before { content:"Beschreibung"; } - .finished-table td:nth-child(4)::before { content:"Veranstaltung"; } - .finished-table td:nth-child(5)::before { content:"Dauer"; } - .finished-table td:nth-child(6) { - display:block; - padding-top:9px; - border-top:1px solid var(--color-border-subtle); - margin-top:4px; - } - .finished-table td:nth-child(6)::before { content:none; } - - .recordings-table .actions, .finished-table .actions { - display:flex; - gap:7px; - flex-wrap:wrap; - } - - .recordings-table .button, .finished-table .button { - margin:0; - } + .live-panel { display:block; } + .live-item + .live-item { border-left:0; border-top:1px solid var(--color-recording-border); padding-left:0; padding-top:16px; margin-top:16px; } + a.button { margin-left:0; margin-right:8px; } } +