mirror of
https://github.com/MarSeventh/CloudFlare-ImgBed.git
synced 2026-04-24 22:25:07 +00:00
1 line
5.9 KiB
CSS
1 line
5.9 KiB
CSS
.public-browse[data-v-4cd975c1]{min-height:100vh;background:#0a0a0a;color:#fff}.header[data-v-4cd975c1]{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-4cd975c1]{font-size:20px;font-weight:600;color:#fff}.breadcrumb[data-v-4cd975c1]{display:flex;align-items:center;gap:4px;font-size:14px}.breadcrumb-item[data-v-4cd975c1]{padding:6px 12px;border-radius:6px;cursor:pointer;transition:background .2s;color:#ccc}.breadcrumb-item[data-v-4cd975c1]:hover{background:#252525;color:#fff}.breadcrumb-sep[data-v-4cd975c1]{color:#444}.file-count[data-v-4cd975c1]{color:#666;font-size:14px}.error-container[data-v-4cd975c1],.loading-container[data-v-4cd975c1]{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;color:#666}.loading-spinner[data-v-4cd975c1]{width:48px;height:48px;border:3px solid #222;border-top-color:#3b82f6;border-radius:50%;animation:spin-4cd975c1 1s linear infinite}.loading-spinner-small[data-v-4cd975c1]{width:24px;height:24px;border:2px solid #222;border-top-color:#3b82f6;border-radius:50%;animation:spin-4cd975c1 1s linear infinite}@keyframes spin-4cd975c1{to{transform:rotate(1turn)}}.retry-btn[data-v-4cd975c1]{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-4cd975c1]:hover{background:#2563eb}.gallery-container[data-v-4cd975c1]{max-width:1400px;margin:0 auto;padding:24px}.folders-section[data-v-4cd975c1]{margin-bottom:24px}.folders-grid[data-v-4cd975c1]{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px}.folder-card[data-v-4cd975c1]{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 16px;background:#141414;border-radius:12px;border:1px solid #1a1a1a;cursor:pointer;transition:all .2s}.folder-card[data-v-4cd975c1]:hover{background:#1a1a1a;border-color:#333;transform:translateY(-2px)}.folder-icon[data-v-4cd975c1]{width:48px;height:48px;margin-bottom:12px;color:#555}.folder-icon svg[data-v-4cd975c1]{width:100%;height:100%}.folder-name[data-v-4cd975c1]{font-size:14px;color:#999;text-align:center;word-break:break-all}.waterfall[data-v-4cd975c1]{display:flex;gap:16px}.waterfall-column[data-v-4cd975c1]{flex:1;display:flex;flex-direction:column;gap:16px}.waterfall-item[data-v-4cd975c1]{cursor:pointer}.image-wrapper[data-v-4cd975c1]{position:relative;border-radius:12px;overflow:hidden;background:#141414;border:1px solid #1a1a1a}.image-wrapper img[data-v-4cd975c1],.image-wrapper video[data-v-4cd975c1]{width:100%;display:block}.image-wrapper[data-v-4cd975c1]:hover{border-color:#333}.file-placeholder[data-v-4cd975c1]{width:100%;height:200px;display:flex;align-items:center;justify-content:center;background:#141414;color:#333}.file-placeholder svg[data-v-4cd975c1]{width:56px;height:56px}.overlay[data-v-4cd975c1]{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:12px}.image-wrapper:hover .overlay[data-v-4cd975c1]{opacity:1}.overlay-actions[data-v-4cd975c1]{display:flex;gap:8px}.action-btn[data-v-4cd975c1]{width:36px;height:36px;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-4cd975c1]{width:18px;height:18px}.action-btn[data-v-4cd975c1]:hover{background:hsla(0,0%,100%,.25);transform:scale(1.1)}.load-trigger[data-v-4cd975c1]{display:flex;justify-content:center;align-items:center;padding:48px;min-height:100px}.loading-more[data-v-4cd975c1]{display:flex;align-items:center;gap:12px;color:#666;font-size:14px}.no-more[data-v-4cd975c1]{color:#444;font-size:14px}.preview-modal[data-v-4cd975c1]{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-4cd975c1]{position:relative;max-width:95vw;max-height:95vh;display:flex;align-items:center;justify-content:center}.preview-image[data-v-4cd975c1],.preview-video[data-v-4cd975c1]{max-width:95vw;max-height:95vh;-o-object-fit:contain;object-fit:contain}.preview-close[data-v-4cd975c1]{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-4cd975c1]:hover{background:hsla(0,0%,100%,.2)}.preview-close svg[data-v-4cd975c1]{width:28px;height:28px}.preview-next[data-v-4cd975c1],.preview-prev[data-v-4cd975c1]{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-4cd975c1]:hover,.preview-prev[data-v-4cd975c1]:hover{background:hsla(0,0%,100%,.2)}.preview-next svg[data-v-4cd975c1],.preview-prev svg[data-v-4cd975c1]{width:32px;height:32px}.preview-prev[data-v-4cd975c1]{left:20px}.preview-next[data-v-4cd975c1]{right:20px}@media (max-width:900px){.waterfall-column[data-v-4cd975c1],.waterfall[data-v-4cd975c1]{gap:12px}.gallery-container[data-v-4cd975c1]{padding:16px}}@media (max-width:600px){.header[data-v-4cd975c1]{flex-direction:column;gap:12px;padding:12px 16px}.waterfall-column[data-v-4cd975c1],.waterfall[data-v-4cd975c1]{gap:8px}.gallery-container[data-v-4cd975c1]{padding:12px}.folders-grid[data-v-4cd975c1]{grid-template-columns:repeat(2,1fr);gap:12px}.preview-next[data-v-4cd975c1],.preview-prev[data-v-4cd975c1]{width:44px;height:44px}.preview-next svg[data-v-4cd975c1],.preview-prev svg[data-v-4cd975c1]{width:24px;height:24px}} |