mirror of
https://github.com/MarSeventh/CloudFlare-ImgBed.git
synced 2026-01-31 09:03:19 +08:00
1 line
8.8 KiB
CSS
1 line
8.8 KiB
CSS
.tm-viewport[data-v-5c291694]{width:100%;height:100%;display:flex;align-items:center;justify-content:center;touch-action:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.tm-media[data-v-5c291694]{max-width:100%;max-height:100%;-o-object-fit:contain;object-fit:contain;-webkit-user-drag:none}.public-browse[data-v-7aa9aaa3]{min-height:100vh;background:#0a0a0a;color:#fff}.header[data-v-7aa9aaa3]{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-7aa9aaa3]{font-size:20px;font-weight:600;color:#fff}.breadcrumb[data-v-7aa9aaa3]{display:flex;align-items:center;gap:4px;font-size:14px}.breadcrumb-item[data-v-7aa9aaa3]{padding:6px 12px;border-radius:6px;cursor:pointer;transition:background .2s;color:#ccc}.breadcrumb-item[data-v-7aa9aaa3]:hover{background:#252525;color:#fff}.breadcrumb-sep[data-v-7aa9aaa3]{color:#444}.file-count[data-v-7aa9aaa3]{color:#666;font-size:14px}.error-container[data-v-7aa9aaa3],.loading-container[data-v-7aa9aaa3]{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;color:#666}.loading-spinner[data-v-7aa9aaa3]{width:48px;height:48px;border:3px solid #222;border-top-color:#3b82f6;border-radius:50%;animation:spin-7aa9aaa3 1s linear infinite}.loading-spinner-small[data-v-7aa9aaa3]{width:24px;height:24px;border:2px solid #222;border-top-color:#3b82f6;border-radius:50%;animation:spin-7aa9aaa3 1s linear infinite}@keyframes spin-7aa9aaa3{to{transform:rotate(1turn)}}.retry-btn[data-v-7aa9aaa3]{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-7aa9aaa3]:hover{background:#2563eb}.gallery-container[data-v-7aa9aaa3]{padding:8px}@media (min-width:1200px){.gallery-container[data-v-7aa9aaa3]{max-width:1400px;margin:0 auto;padding:24px}}.folders-section[data-v-7aa9aaa3]{margin-bottom:24px}.folders-grid[data-v-7aa9aaa3]{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px}.folder-card[data-v-7aa9aaa3]{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-7aa9aaa3]:hover{background:#1a1a1a;border-color:#333;transform:translateY(-2px)}.folder-icon[data-v-7aa9aaa3]{width:48px;height:48px;margin-bottom:12px;color:#555}.folder-icon svg[data-v-7aa9aaa3]{width:100%;height:100%}.folder-name[data-v-7aa9aaa3]{font-size:14px;color:#999;text-align:center;word-break:break-all}.waterfall[data-v-7aa9aaa3]{display:flex;gap:16px}.waterfall-column[data-v-7aa9aaa3]{flex:1;display:flex;flex-direction:column;gap:16px}.waterfall-item[data-v-7aa9aaa3]{cursor:pointer}.image-wrapper[data-v-7aa9aaa3]{position:relative;border-radius:12px;overflow:hidden;background:#141414;border:1px solid #1a1a1a;min-height:180px}.image-wrapper[data-v-7aa9aaa3]:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#141414 25%,#1a1a1a 50%,#141414 75%);background-size:200% 100%;animation:shimmer-7aa9aaa3 1.5s infinite;z-index:1;pointer-events:none}.image-wrapper.loaded[data-v-7aa9aaa3]:before{display:none}.image-wrapper.loaded[data-v-7aa9aaa3]{min-height:auto}.image-wrapper img[data-v-7aa9aaa3],.image-wrapper video[data-v-7aa9aaa3]{width:100%;display:block;position:relative;z-index:2}@keyframes shimmer-7aa9aaa3{0%{background-position:200% 0}to{background-position:-200% 0}}.image-wrapper[data-v-7aa9aaa3]:hover{border-color:#333}.overlay[data-v-7aa9aaa3]{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;z-index:10}.image-wrapper:hover .overlay[data-v-7aa9aaa3]{opacity:1}.file-placeholder[data-v-7aa9aaa3]{width:100%;height:200px;display:flex;align-items:center;justify-content:center;background:#141414;color:#333}.file-placeholder svg[data-v-7aa9aaa3]{width:56px;height:56px}.overlay-actions[data-v-7aa9aaa3]{display:flex;gap:8px}.action-btn[data-v-7aa9aaa3]{width:32px;height:32px;border:none;border-radius:50%;background:hsla(0,0%,100%,.08);backdrop-filter:blur(8px);cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;color:hsla(0,0%,100%,.6)}.action-btn svg[data-v-7aa9aaa3]{width:16px;height:16px}.action-btn[data-v-7aa9aaa3]:hover{background:hsla(0,0%,100%,.2);color:#fff;transform:scale(1.1)}.load-trigger[data-v-7aa9aaa3]{display:flex;justify-content:center;align-items:center;padding:48px;min-height:100px}.loading-more[data-v-7aa9aaa3]{display:flex;align-items:center;gap:12px;color:#666;font-size:14px}.no-more[data-v-7aa9aaa3]{color:#444;font-size:14px}.preview-modal[data-v-7aa9aaa3]{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.97)}.preview-content[data-v-7aa9aaa3],.preview-modal[data-v-7aa9aaa3]{display:flex;align-items:center;justify-content:center;overflow:hidden}.preview-content[data-v-7aa9aaa3]{width:100%;height:100%;padding:60px 80px;box-sizing:border-box}.swipe-viewport[data-v-7aa9aaa3]{width:100%;height:100%;overflow:hidden;position:relative}.swipe-track[data-v-7aa9aaa3]{width:300%;height:100%;display:flex;will-change:transform}.swipe-slide[data-v-7aa9aaa3]{width:33.333%;flex-shrink:0;height:100%;display:flex;align-items:center;justify-content:center}.preview-image[data-v-7aa9aaa3],.preview-video[data-v-7aa9aaa3]{max-width:100%;max-height:100%;-o-object-fit:contain;object-fit:contain;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-user-drag:none}.preview-close[data-v-7aa9aaa3]{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;z-index:1010}.preview-close[data-v-7aa9aaa3]:hover{background:hsla(0,0%,100%,.2)}.preview-close svg[data-v-7aa9aaa3]{width:28px;height:28px}.page-indicator[data-v-7aa9aaa3]{position:fixed;bottom:30px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.6);color:hsla(0,0%,100%,.8);padding:8px 16px;border-radius:20px;font-size:14px;z-index:1010}.preview-next[data-v-7aa9aaa3],.preview-prev[data-v-7aa9aaa3]{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;z-index:1010}.preview-next[data-v-7aa9aaa3]:hover,.preview-prev[data-v-7aa9aaa3]:hover{background:hsla(0,0%,100%,.2)}.preview-next svg[data-v-7aa9aaa3],.preview-prev svg[data-v-7aa9aaa3]{width:32px;height:32px}.preview-prev[data-v-7aa9aaa3]{left:20px}.preview-next[data-v-7aa9aaa3]{right:20px}.rotate-btn[data-v-7aa9aaa3]{position:fixed;bottom:30px;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;z-index:1010}.rotate-btn[data-v-7aa9aaa3]:hover{background:hsla(0,0%,100%,.2)}.rotate-btn svg[data-v-7aa9aaa3]{width:24px;height:24px}@media (max-width:768px){.desktop-only[data-v-7aa9aaa3]{display:none!important}.preview-content.mobile-only[data-v-7aa9aaa3]{display:block;padding:0;width:100%;height:100%;position:absolute;top:0;left:0}.page-indicator[data-v-7aa9aaa3]{bottom:40px}}@media (min-width:769px){.mobile-only[data-v-7aa9aaa3]{display:none!important}}@media (max-width:1199px) and (min-width:601px){.gallery-container[data-v-7aa9aaa3]{padding:12px}.waterfall-column[data-v-7aa9aaa3],.waterfall[data-v-7aa9aaa3]{gap:10px}.image-wrapper[data-v-7aa9aaa3]{border-radius:8px}}@media (max-width:600px){.header[data-v-7aa9aaa3]{padding:10px 12px}.header-left .logo[data-v-7aa9aaa3]{font-size:16px}.breadcrumb[data-v-7aa9aaa3]{font-size:12px}.breadcrumb-item[data-v-7aa9aaa3]{padding:4px 8px}.file-count[data-v-7aa9aaa3]{font-size:12px}.gallery-container[data-v-7aa9aaa3]{padding:6px}.waterfall-column[data-v-7aa9aaa3],.waterfall[data-v-7aa9aaa3]{gap:6px}.image-wrapper[data-v-7aa9aaa3]{border-radius:6px;min-height:120px}.folders-section[data-v-7aa9aaa3]{margin-bottom:12px}.folders-grid[data-v-7aa9aaa3]{grid-template-columns:repeat(2,1fr);gap:8px}.folder-card[data-v-7aa9aaa3]{padding:16px 12px;border-radius:8px}.folder-icon[data-v-7aa9aaa3]{width:36px;height:36px;margin-bottom:8px}.folder-name[data-v-7aa9aaa3]{font-size:12px}.load-trigger[data-v-7aa9aaa3]{padding:24px;min-height:60px}}.copy-toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%) translateY(20px);background:rgba(0,0,0,.8);color:#fff;padding:10px 24px;border-radius:20px;font-size:14px;opacity:0;transition:all .3s ease;z-index:9999;pointer-events:none}.copy-toast.show{opacity:1;transform:translateX(-50%) translateY(0)} |