mirror of
https://github.com/ZSCGR/CloudFlare-ImgBed.git
synced 2026-08-13 04:03:42 +08:00
sunian6780andLuoH-AN
d7aabf266d
Rebuild frontend from Sanyue-ImgHub feat/flat-redesign branch: - unified glassmorphism (--glass-bg/border/shadow + backdrop-filter) - dark mode: muted slate-blue primary (#4A5D9B), dimmed selected states - upload/admin pages: glass cards, dragger, search box, tables - new global wallpaper on/off switch - misc dark-mode fixes (image brightness, dialogs, messages) Co-Authored-By: LuoH-AN <[email protected]>
1 line
6.0 KiB
CSS
1 line
6.0 KiB
CSS
.not-found-container[data-v-59d53856]{min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;background:var(--bg-color,#6366f1);color:var(--text-color,#333)}.background-wrapper[data-v-59d53856]{position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1}.not-found-content[data-v-59d53856]{text-align:center;z-index:10;max-width:600px;padding:2rem;position:relative;background:hsla(0,0%,100%,.1);border-radius:20px;border:1px solid hsla(0,0%,100%,.2);box-shadow:none}.back-button-wrapper[data-v-59d53856]{position:absolute;top:-25px;right:-25px;z-index:15}.back-button[data-v-59d53856]{background:var(--toolbar-button-bg-color,hsla(0,0%,100%,.9));border:none;color:var(--toolbar-button-text-color,#333);box-shadow:none;transition:all .3s cubic-bezier(.4,0,.2,1)}.back-button[data-v-59d53856]:hover{transform:scale(1.1);box-shadow:none;background:var(--primary-color,#2563eb);color:#fff}.error-animation[data-v-59d53856]{margin-bottom:2rem;position:relative}.error-number[data-v-59d53856]{font-size:6rem;font-weight:900;display:flex;justify-content:center;align-items:center;gap:.5rem;margin-bottom:1rem;text-shadow:0 0 20px rgba(0,0,0,.3);color:var(--primary-color,#2563eb)}.error-number span[data-v-59d53856]{display:inline-block;animation:bounce-59d53856 2s infinite;color:var(--not-found-title-text-color,#2563eb)}.error-number .four[data-v-59d53856]:first-child{animation-delay:-.5s}.error-number .zero[data-v-59d53856]{animation-delay:-.25s;color:#f56c6c;-webkit-text-fill-color:#f56c6c}.error-number .four[data-v-59d53856]:last-child{animation-delay:0s}.error-image[data-v-59d53856]{display:flex;justify-content:center;margin:1.5rem 0}.floating-image[data-v-59d53856]{width:100px;height:100px;-o-object-fit:contain;object-fit:contain;animation:float-59d53856 3s ease-in-out infinite;filter:drop-shadow(0 10px 20px rgba(0,0,0,.2));border-radius:20px;background:hsla(0,0%,100%,.1);padding:10px;border:1px solid hsla(0,0%,100%,.2)}.error-info[data-v-59d53856]{animation:fadeInUp-59d53856 1s ease-out .5s both}.error-title[data-v-59d53856]{font-size:2rem;font-weight:700;margin-bottom:1rem;color:var(--text-color,#333);color:var(--not-found-title-text-color,#2563eb)}.error-description[data-v-59d53856]{font-size:1.1rem;line-height:1.6;margin-bottom:2rem;opacity:.8;color:var(--text-color-secondary,#666)}.error-actions[data-v-59d53856]{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-bottom:2rem}.action-btn[data-v-59d53856]{border-radius:25px;padding:12px 24px;font-weight:600;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:none;border:none;min-width:140px}.primary-btn[data-v-59d53856]{background:var(--primary-color,#2563eb);color:#fff}.secondary-btn[data-v-59d53856]{background:var(--toolbar-button-bg-color,hsla(0,0%,100%,.9));color:var(--text-color,#333)}.action-btn[data-v-59d53856]:hover{box-shadow:none}.btn-icon[data-v-59d53856]{margin-right:8px}.help-links[data-v-59d53856]{animation:fadeInUp-59d53856 1s ease-out 1s both}.help-text[data-v-59d53856]{margin-bottom:1rem;opacity:.7;font-size:.9rem;color:var(--text-color-secondary,#666)}.quick-links[data-v-59d53856]{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}.quick-link[data-v-59d53856]{color:var(--primary-color,#2563eb);text-decoration:none;font-weight:500;padding:.5rem 1rem;border-radius:15px;background:var(--toolbar-button-bg-color,hsla(0,0%,100%,.8));transition:all .3s cubic-bezier(.4,0,.2,1);border:1px solid rgba(37,99,235,.2);font-size:.85rem;display:flex;align-items:center;gap:.5rem}.quick-link[data-v-59d53856]:hover{background:var(--primary-color,#2563eb);color:#fff;box-shadow:none}.floating-elements[data-v-59d53856]{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1}.floating-shape[data-v-59d53856]{position:absolute;background:rgba(37,99,235,.1);border-radius:50%;animation:floatShapes-59d53856 8s ease-in-out infinite}.shape-1[data-v-59d53856]{width:60px;height:60px;top:15%;left:10%;animation-delay:0s}.shape-2[data-v-59d53856]{width:80px;height:80px;top:60%;right:15%;animation-delay:-2s;background:rgba(103,194,58,.1)}.shape-3[data-v-59d53856]{width:40px;height:40px;bottom:25%;left:20%;animation-delay:-4s}.shape-4[data-v-59d53856]{width:70px;height:70px;top:25%;right:25%;animation-delay:-1s;background:hsla(0,87%,69%,.1)}.shape-5[data-v-59d53856]{width:50px;height:50px;bottom:15%;right:10%;animation-delay:-3s;background:rgba(230,162,60,.1)}@keyframes bounce-59d53856{0%,20%,50%,80%,to{transform:translateY(0)}40%{transform:translateY(-15px)}60%{transform:translateY(-8px)}}@keyframes float-59d53856{0%,to{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-15px) rotate(5deg)}}@keyframes floatShapes-59d53856{0%,to{transform:translateY(0) rotate(0deg);opacity:.6}50%{transform:translateY(-25px) rotate(180deg);opacity:.3}}@keyframes fadeInUp-59d53856{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media (max-width:768px){.not-found-content[data-v-59d53856]{padding:1.5rem;margin:1rem;max-width:calc(100% - 2rem)}.back-button-wrapper[data-v-59d53856]{top:-20px;right:-20px}.error-number[data-v-59d53856]{font-size:4rem;gap:.3rem}.error-title[data-v-59d53856]{font-size:1.5rem}.error-description[data-v-59d53856]{font-size:1rem}.error-actions[data-v-59d53856]{flex-direction:column;align-items:center}.action-btn[data-v-59d53856]{width:200px}.quick-links[data-v-59d53856]{flex-direction:column;gap:.5rem;align-items:center}.quick-link[data-v-59d53856]{width:-moz-fit-content;width:fit-content;min-width:120px;justify-content:center}.floating-image[data-v-59d53856]{width:80px;height:80px;border-radius:15px;padding:8px}}@media (prefers-color-scheme:dark){.not-found-container[data-v-59d53856]{background:var(--bg-color,#1f1f22);color:var(--text-color,#e4e7ed)}.not-found-content[data-v-59d53856]{background:rgba(0,0,0,.2);border:1px solid hsla(0,0%,100%,.1)}.error-title[data-v-59d53856]{color:var(--text-color,#e4e7ed)}.error-description[data-v-59d53856],.help-text[data-v-59d53856]{color:var(--text-color-secondary,#a1a1aa)}} |