Improve edit page media previews
This commit is contained in:
parent
aab2e93b4b
commit
564fa64728
1 changed files with 19 additions and 1 deletions
20
style.css
20
style.css
|
|
@ -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%}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue