1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#0f0f0f;color:#e0e0e0;min-height:100vh}
.container{max-width:1200px;margin:0 auto;padding:1.5rem}
h1{margin-bottom:1rem;font-size:1.5rem}
.gallery-list{list-style:none;display:flex;flex-direction:column;gap:.5rem}
.gallery-list a{color:#7cacf8;text-decoration:none;font-size:1.1rem}
.gallery-list a:hover{text-decoration:underline}
.error{color:#f87171;margin-bottom:.5rem}
form{display:flex;gap:.5rem;flex-wrap:wrap}
form input[type=password]{padding:.5rem .75rem;border-radius:6px;border:1px solid #333;background:#1a1a1a;color:#e0e0e0;font-size:1rem;flex:1;min-width:200px}
form button{padding:.5rem 1.25rem;border-radius:6px;border:none;background:#3b82f6;color:#fff;font-size:1rem;cursor:pointer}
form button:hover{background:#2563eb}
.actions{display:flex;gap:.75rem;margin-bottom:1rem;flex-wrap:wrap}
.btn{display:inline-block;padding:.5rem 1rem;border-radius:6px;background:#1e293b;color:#e0e0e0;text-decoration:none;font-size:.9rem;border:1px solid #334155}
.btn:hover{background:#334155}
.upload-area{border:2px dashed #334155;border-radius:8px;padding:2rem;text-align:center;margin-bottom:1.5rem;transition:border-color .2s}
.upload-area.dragover{border-color:#3b82f6;background:rgba(59,130,246,.05)}
.upload-area .link{color:#7cacf8;cursor:pointer;text-decoration:underline}
#upload-progress{margin-top:.5rem;color:#93c5fd;font-size:.9rem}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.5rem}
@media(max-width:600px){.grid{grid-template-columns:repeat(2,1fr);gap:.25rem}}
.grid-item{cursor:pointer;border-radius:6px;overflow:hidden;aspect-ratio:1;background:#1a1a1a}
.grid-item img{width:100%;height:100%;object-fit:cover;transition:transform .2s}
.grid-item:hover img{transform:scale(1.03)}
.empty{color:#888;text-align:center;padding:3rem 0}
.lightbox{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.95);justify-content:center;align-items:center;z-index:100;cursor:pointer}
.lightbox.active{display:flex}
.lightbox img{max-width:95vw;max-height:95vh;object-fit:contain;border-radius:4px;transition:opacity .15s}
.lightbox img.loading{opacity:.5;filter:blur(4px)}
.lightbox-download{position:fixed;bottom:1.5rem;right:1.5rem;background:#3b82f6;color:#fff;width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;text-decoration:none;font-size:1.3rem;box-shadow:0 2px 8px rgba(0,0,0,.5)}
.lightbox-download:hover{background:#2563eb}
|
