mirror of
https://github.com/MarSeventh/CloudFlare-ImgBed.git
synced 2026-04-30 08:56:48 +00:00
1 line
5.8 KiB
CSS
1 line
5.8 KiB
CSS
.public-browse[data-v-2afe0ceb]{min-height:100vh;background:#0a0a0a;color:#fff}.header[data-v-2afe0ceb]{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:16px 32px;background:hsla(0,0%,6%,.95);backdrop-filter:blur(10px);border-bottom:1px solid #1a1a1a}.logo[data-v-2afe0ceb]{font-size:20px;font-weight:600;color:#fff}.breadcrumb[data-v-2afe0ceb]{display:flex;align-items:center;gap:4px;font-size:14px}.breadcrumb-item[data-v-2afe0ceb]{padding:6px 12px;border-radius:6px;cursor:pointer;transition:background .2s;color:#ccc}.breadcrumb-item[data-v-2afe0ceb]:hover{background:#252525;color:#fff}.breadcrumb-sep[data-v-2afe0ceb]{color:#444}.file-count[data-v-2afe0ceb]{color:#666;font-size:14px}.error-container[data-v-2afe0ceb],.loading-container[data-v-2afe0ceb]{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;color:#666}.loading-spinner[data-v-2afe0ceb]{width:48px;height:48px;border:3px solid #222;border-top-color:#3b82f6;border-radius:50%;animation:spin-2afe0ceb 1s linear infinite}.loading-spinner-small[data-v-2afe0ceb]{width:24px;height:24px;border:2px solid #222;border-top-color:#3b82f6;border-radius:50%;animation:spin-2afe0ceb 1s linear infinite}@keyframes spin-2afe0ceb{to{transform:rotate(1turn)}}.retry-btn[data-v-2afe0ceb]{margin-top:20px;padding:10px 32px;background:#3b82f6;border:none;border-radius:8px;color:#fff;font-size:14px;cursor:pointer;transition:background .2s}.retry-btn[data-v-2afe0ceb]:hover{background:#2563eb}.gallery-container[data-v-2afe0ceb]{max-width:1400px;margin:0 auto;padding:32px}.gallery-grid[data-v-2afe0ceb]{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.gallery-item[data-v-2afe0ceb]{cursor:pointer}.folder-card[data-v-2afe0ceb]{display:flex;flex-direction:column;align-items:center;justify-content:center;aspect-ratio:16/10;background:#141414;border-radius:12px;border:1px solid #1a1a1a;transition:all .2s}.folder-card[data-v-2afe0ceb]:hover{background:#1a1a1a;border-color:#333;transform:translateY(-2px)}.folder-icon[data-v-2afe0ceb]{width:56px;height:56px;margin-bottom:12px;color:#555}.folder-icon svg[data-v-2afe0ceb]{width:100%;height:100%}.folder-name[data-v-2afe0ceb]{font-size:14px;color:#999}.image-wrapper[data-v-2afe0ceb]{position:relative;aspect-ratio:16/10;border-radius:12px;overflow:hidden;background:#141414;border:1px solid #1a1a1a;display:flex;align-items:center;justify-content:center}.image-wrapper img[data-v-2afe0ceb],.image-wrapper video[data-v-2afe0ceb]{width:100%;height:100%;-o-object-fit:contain;object-fit:contain;background:#0a0a0a}.image-wrapper[data-v-2afe0ceb]:hover{border-color:#333}.file-placeholder[data-v-2afe0ceb]{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#141414;color:#333}.file-placeholder svg[data-v-2afe0ceb]{width:56px;height:56px}.overlay[data-v-2afe0ceb]{position:absolute;inset:0;background:linear-gradient(transparent 50%,rgba(0,0,0,.85));opacity:0;transition:opacity .2s;display:flex;align-items:flex-end;justify-content:flex-end;padding:16px}.image-wrapper:hover .overlay[data-v-2afe0ceb]{opacity:1}.overlay-actions[data-v-2afe0ceb]{display:flex;gap:10px}.action-btn[data-v-2afe0ceb]{width:40px;height:40px;border:none;border-radius:50%;background:hsla(0,0%,100%,.15);backdrop-filter:blur(8px);cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;color:#fff}.action-btn svg[data-v-2afe0ceb]{width:20px;height:20px}.action-btn[data-v-2afe0ceb]:hover{background:hsla(0,0%,100%,.25);transform:scale(1.1)}.load-trigger[data-v-2afe0ceb]{display:flex;justify-content:center;align-items:center;padding:48px;min-height:100px}.loading-more[data-v-2afe0ceb]{display:flex;align-items:center;gap:12px;color:#666;font-size:14px}.no-more[data-v-2afe0ceb]{color:#444;font-size:14px}.preview-modal[data-v-2afe0ceb]{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.97);display:flex;align-items:center;justify-content:center}.preview-content[data-v-2afe0ceb]{position:relative;max-width:95vw;max-height:95vh;display:flex;align-items:center;justify-content:center}.preview-image[data-v-2afe0ceb],.preview-video[data-v-2afe0ceb]{max-width:95vw;max-height:95vh;-o-object-fit:contain;object-fit:contain}.preview-close[data-v-2afe0ceb]{position:fixed;top:20px;right:20px;background:hsla(0,0%,100%,.1);border:none;color:#fff;cursor:pointer;width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .2s}.preview-close[data-v-2afe0ceb]:hover{background:hsla(0,0%,100%,.2)}.preview-close svg[data-v-2afe0ceb]{width:28px;height:28px}.preview-next[data-v-2afe0ceb],.preview-prev[data-v-2afe0ceb]{position:fixed;top:50%;transform:translateY(-50%);background:hsla(0,0%,100%,.1);border:none;color:#fff;padding:16px;cursor:pointer;border-radius:50%;width:56px;height:56px;display:flex;align-items:center;justify-content:center;transition:background .2s}.preview-next[data-v-2afe0ceb]:hover,.preview-prev[data-v-2afe0ceb]:hover{background:hsla(0,0%,100%,.2)}.preview-next svg[data-v-2afe0ceb],.preview-prev svg[data-v-2afe0ceb]{width:32px;height:32px}.preview-prev[data-v-2afe0ceb]{left:20px}.preview-next[data-v-2afe0ceb]{right:20px}@media (max-width:1200px){.gallery-grid[data-v-2afe0ceb]{grid-template-columns:repeat(3,1fr)}}@media (max-width:900px){.gallery-grid[data-v-2afe0ceb]{grid-template-columns:repeat(2,1fr)}.gallery-container[data-v-2afe0ceb]{padding:20px}}@media (max-width:600px){.header[data-v-2afe0ceb]{flex-direction:column;gap:12px;padding:12px 16px}.gallery-grid[data-v-2afe0ceb]{grid-template-columns:repeat(2,1fr);gap:12px}.gallery-container[data-v-2afe0ceb]{padding:12px}.preview-next[data-v-2afe0ceb],.preview-prev[data-v-2afe0ceb]{width:44px;height:44px}.preview-next svg[data-v-2afe0ceb],.preview-prev svg[data-v-2afe0ceb]{width:24px;height:24px}} |