Improve edit page media previews

This commit is contained in:
hbrain 2026-05-27 22:38:03 +02:00
parent aab2e93b4b
commit 564fa64728

View file

@ -2,7 +2,7 @@
.site-footer.admin-footer{position:fixed;left:0;right:0;bottom:0;z-index:1000;max-width:100vw;background:rgba(27,30,34,.92);backdrop-filter:blur(6px);color:#F3F4F6;padding:.55rem max(1rem,calc((100vw - 1100px)/2 + 1rem));box-sizing:border-box;box-shadow:0 -2px 16px #0008;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem}.site-footer.admin-footer .admin-left{grid-column:1;justify-self:start;display:flex;align-items:center;gap:.7rem}.site-footer.admin-footer .job-status{grid-column:2;justify-self:center;margin-right:0;padding-bottom:0}.site-footer.admin-footer .admin-right{grid-column:3;justify-self:end;width:auto;display:flex;align-items:center;justify-content:flex-end;gap:.6rem}.site-footer.admin-footer .logout-link{margin-left:0}.site-footer.admin-footer .tabs{margin:0}.site-footer.admin-footer .tabs a{margin:0}@media (max-width: 600px){
.site-footer.admin-footer{position:fixed;left:0;right:0;bottom:0;z-index:1000;max-width:100vw;background:rgba(27,30,34,.92);backdrop-filter:blur(6px);color:#F3F4F6;padding:.55rem max(1rem,calc((100vw - 1100px)/2 + 1rem));box-sizing:border-box;box-shadow:0 -2px 16px #0008;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:1rem}.site-footer.admin-footer .admin-left{grid-column:1;justify-self:start;display:flex;align-items:center;gap:.7rem}.site-footer.admin-footer .job-status{grid-column:2;justify-self:center;margin:0;padding:0;text-align:center;max-width:none;white-space:nowrap;overflow:hidden}.site-footer.admin-footer .admin-right{grid-column:3;justify-self:end;width:auto;display:flex;align-items:center;justify-content:flex-end;gap:.6rem}.site-footer.admin-footer .logout-link{margin-left:0}.site-footer.admin-footer .tabs{margin:0}.site-footer.admin-footer .tabs a{margin:0}@media (max-width: 600px){
.site-footer.admin-footer{grid-template-columns:1fr;justify-items:center;height:auto}
.site-footer.admin-footer .admin-left,
.site-footer.admin-footer .job-status,
@ -12,3 +12,21 @@
.site-footer.admin-footer .logout-link{width:100%;text-align:center}
}
@media (max-width: 600px){.site-footer.admin-footer{grid-template-columns:1fr;justify-items:center;height:auto}.site-footer.admin-footer .admin-left,.site-footer.admin-footer .job-status,.site-footer.admin-footer .admin-right{grid-column:1;justify-self:center;width:100%}.site-footer.admin-footer .admin-left{justify-content:center}.site-footer.admin-footer .admin-right{justify-content:center}.site-footer.admin-footer .logout-link{width:100%;text-align:center}}
/* Edit page file thumbnails */
.file-list{display:flex;flex-direction:column;gap:1rem}
.caption-row{display:grid;grid-template-columns:180px minmax(0,1fr) auto;gap:1rem;align-items:start;background:rgba(27,30,34,.92);padding:1rem;border-radius:.8rem;box-shadow:0 2px 16px #0006}
.caption-row .preview{width:180px;height:120px;overflow:hidden;border-radius:.55rem;background:#111315;display:grid;place-items:center;flex:none}
.caption-row .preview img,
.caption-row .preview video{width:100%;height:100%;object-fit:cover;display:block}
.caption-row .preview span{font-size:.85rem;color:#A0A4AB;padding:.5rem;text-align:center}
.caption-fields{min-width:0;display:flex;flex-direction:column;gap:.6rem}
.caption-fields strong{word-break:break-word}
.caption-fields textarea{min-height:5.5rem}
.caption-row button[type="button"]{align-self:start;white-space:nowrap}
@media (max-width: 800px){
.caption-row{grid-template-columns:1fr;}
.caption-row .preview{width:100%;height:180px}
.caption-row button[type="button"]{width:100%}
}