diff --git a/index.php b/index.php index a2f00e7..3d903ee 100644 --- a/index.php +++ b/index.php @@ -143,13 +143,12 @@ function outputWatermarked(string $path, string $mime): never .stack{display:grid;gap:12px;grid-template-columns:1fr} .cmt{border-top:1px solid #eee;padding:8px 0} .muted{color:#6b7280;font-size:13px} - .img-box{position:relative;display:block;background:#f3f4f6} - .img-box::before{content:'';position:absolute;left:50%;top:50%;width:28px;height:28px;margin:-14px 0 0 -14px;border:3px solid #cbd5e1;border-top-color:#1f6feb;border-radius:50%;opacity:0;pointer-events:none} - .img-box.is-loading::before{opacity:1;animation:spin .75s linear infinite} - .img-box.is-loading img{opacity:.38} - .img-box img{transition:opacity .2s ease} + .img-box{position:relative;display:block;overflow:hidden;background:linear-gradient(110deg,#eef2f7 8%,#f8fafc 18%,#eef2f7 33%);background-size:200% 100%;animation:skeleton 1.2s linear infinite} + .img-box img{display:block;position:relative;z-index:1} .thumb-img-box{height:130px} - @keyframes spin{to{transform:rotate(360deg)}} + .detail .img-box{min-height:200px;border-radius:10px;border:1px solid #e5e7eb} + .detail .img-box img{max-width:100%;height:auto;border:0;border-radius:0} + @keyframes skeleton{to{background-position:-200% 0}} .sidebar-head{display:flex;align-items:center;justify-content:space-between;gap:10px} .sidebar-head h3{margin:0} .sidebar-toggle{display:none} @@ -207,8 +206,8 @@ function outputWatermarked(string $path, string $mime): never
= h((string)($photo['description'] ?? '')) ?>