kantarciandClaude Opus 5
e8a9dcdf5c
PDFs go through the same upload field as images, are checked by their content and kept unchanged in their own table. Every link field can pick one, and a page that links a PDF opens it in a dialog with the browser's own viewer; touch devices and browsers without a viewer get a new tab instead. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
41 lines
3.3 KiB
CSS
41 lines
3.3 KiB
CSS
/* The media library dialog. Loaded by the editor and by every screen that picks an image from
|
|
the library (the site icon in the settings), so it does not rely on editor.css. */
|
|
.media-dialog{padding:28px;background:var(--paper);border:1px solid var(--line);border-radius:12px;color:var(--ink);box-shadow:0 20px 80px #1b2a2433}
|
|
.media-dialog::backdrop{background:#172e2966}
|
|
.media-dialog p{font-size:14px;line-height:1.7;color:var(--muted)}
|
|
.media-dialog .panel-hint{font-size:11px;color:var(--muted);line-height:1.6;margin:0 0 12px}
|
|
.media-launch{margin-top:14px;white-space:normal}
|
|
.media-dialog{width:calc(100% - 32px);max-width:1100px;max-height:calc(100dvh - 32px);overflow:auto}
|
|
.media-heading{display:flex;justify-content:space-between;gap:20px;align-items:center}
|
|
.media-heading h2{margin:0}
|
|
.media-heading .eyebrow{margin-bottom:8px}
|
|
.media-tools{display:grid;grid-template-columns:1fr 1fr;gap:24px}
|
|
.media-tools label{margin-top:10px}
|
|
.media-layout{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:24px}
|
|
.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:12px;align-content:start;max-height:430px;overflow:auto;padding:4px}
|
|
.media-card{border:2px solid var(--line);border-radius:9px;padding:7px;background:white;color:var(--ink);display:flex;flex-direction:column;gap:7px;text-align:left;min-width:0}
|
|
.media-card[aria-pressed=true]{border-color:var(--accent);background:#edf4dc}
|
|
.media-card img{width:100%;height:115px;object-fit:cover;border-radius:5px}
|
|
.media-card strong{font-size:12px;overflow-wrap:anywhere}
|
|
.media-card span{font-size:11px;color:var(--muted)}
|
|
.media-details{padding-left:22px;border-left:1px solid var(--line)}
|
|
.media-details button,.media-details a{margin-top:12px;display:block}
|
|
.media-details input{font-size:13px}
|
|
.media-footer{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:20px;border-top:1px solid var(--line);padding-top:15px}
|
|
.media-footer label{margin:0;font-size:12px}
|
|
#media-error{color:#8b2f22;background:#fff0eb;padding:12px;border-radius:6px}
|
|
#media-status{font-size:12px;margin-block:15px}
|
|
.media-dialog> .panel-hint{margin-top:20px}
|
|
.media-details>p{font-size:12px}
|
|
@media(max-width:767px){.media-dialog{padding:18px}.media-tools,.media-layout{grid-template-columns:1fr}.media-details{padding:20px 0 0;border-left:0;border-top:1px solid var(--line)}.media-grid{max-height:280px;grid-template-columns:repeat(2,minmax(0,1fr))}.media-footer{align-items:stretch;flex-direction:column}.media-heading{gap:8px}}
|
|
/* PDFs: eine Liste statt eines Rasters - es gibt nichts zu sehen außer dem Titel. */
|
|
.document-dialog{max-width:720px}
|
|
.document-list{display:grid;gap:8px;max-height:360px;overflow:auto;padding:4px}
|
|
.document-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;border:2px solid var(--line);border-radius:9px;padding:10px 12px;background:white;color:var(--ink);text-align:left}
|
|
.document-card[aria-pressed=true]{border-color:var(--accent);background:#edf4dc}
|
|
.document-card strong{font-size:13px;overflow-wrap:anywhere}
|
|
.document-card span{font-size:11px;color:var(--muted)}
|
|
.document-card .document-badge{font-weight:700;color:#8b2f22;background:#fff0eb;border-radius:5px;padding:4px 6px;letter-spacing:.04em}
|
|
.media-error{color:#8b2f22;background:#fff0eb;padding:12px;border-radius:6px}
|
|
.href-document{margin:6px 0 4px}
|