fs-virtual-waterfall/dist/index.css

Vue3 虚拟瀑布流组件

@charset "UTF-8";.fs-virtual-waterfall-container[data-v-78a52c03]{width:100%;height:100%;--shadow-color: 0, 0, 0;--shadow-opacity: .08;--card-bg: #fff;--text-primary: #333;--text-secondary: #999;--border-radius: 12px;--hover-translate: -5px;--hover-scale: var(--5b2b462a);--accent-color: #4299e1}.fs-virtual-waterfall-container.theme-light[data-v-78a52c03]{--shadow-color: 0, 0, 0;--shadow-opacity: .08;--card-bg: #fff;--text-primary: #333;--text-secondary: #999}.fs-virtual-waterfall-container.theme-dark[data-v-78a52c03]{--shadow-color: 0, 0, 0;--shadow-opacity: .2;--card-bg: #1a1a1a;--text-primary: #e0e0e0;--text-secondary: #777}.fs-virtual-waterfall-container.debug-mode .fs-virtual-waterfall-debug-column[data-v-78a52c03]{position:absolute;top:0;border:1px dashed rgba(255,0,0,.3);box-sizing:border-box;color:#ff000080;font-size:12px;padding:4px;pointer-events:none;z-index:1}.fs-virtual-waterfall-content[data-v-78a52c03]{width:100%;height:86%;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;-webkit-overflow-scrolling:touch}.fs-virtual-waterfall-content[data-v-78a52c03]::-webkit-scrollbar{width:6px}.fs-virtual-waterfall-content[data-v-78a52c03]::-webkit-scrollbar-track{background:transparent}.fs-virtual-waterfall-content[data-v-78a52c03]::-webkit-scrollbar-thumb{background-color:#0003;border-radius:3px}.fs-virtual-waterfall-list[data-v-78a52c03]{position:relative;width:100%;min-height:100%;padding:2px}.fs-virtual-waterfall-loading[data-v-78a52c03]{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;color:var(--text-secondary);z-index:5}.fs-virtual-waterfall-loading .loading-spinner[data-v-78a52c03]{width:40px;height:40px;border:3px solid rgba(0,0,0,.1);border-radius:50%;border-top-color:var(--accent-color);animation:spin-78a52c03 1s ease-in-out infinite;margin-bottom:10px}.fs-virtual-waterfall-loading .loading-text[data-v-78a52c03]{font-size:14px}@keyframes spin-78a52c03{to{transform:rotate(360deg)}}.fs-virtual-waterfall-empty[data-v-78a52c03]{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--text-secondary);font-size:14px;z-index:5}.fs-virtual-waterfall-item[data-v-78a52c03]{position:absolute;box-sizing:border-box;padding:8px;filter:drop-shadow(0 4px 12px rgba(var(--shadow-color),var(--shadow-opacity)));will-change:transform;pointer-events:auto;z-index:2;animation:fadeInUp-78a52c03 .5s ease forwards;animation-delay:calc(var(--index, 0) * .05s)}.fs-virtual-waterfall-item-inner[data-v-78a52c03]{width:100%;height:100%;overflow:hidden;background-color:var(--card-bg);transition:all .3s ease;transform-origin:center;position:relative;display:flex;flex-direction:column}.fs-virtual-waterfall-item-inner.card-rounded[data-v-78a52c03]{border-radius:var(--border-radius)}.fs-virtual-waterfall-item-inner.card-square[data-v-78a52c03]{border-radius:0}.fs-virtual-waterfall-item-inner[data-v-78a52c03]:hover{transform:translateY(var(--hover-translate)) scale(var(--hover-scale));filter:drop-shadow(0 10px 16px rgba(var(--shadow-color),calc(var(--shadow-opacity) * 1.5)));z-index:3}.fs-virtual-waterfall-item-inner[data-v-78a52c03] img{width:100%;height:auto;object-fit:cover;transition:transform .4s ease;display:block;margin-bottom:5px}.fs-virtual-waterfall-item-inner[data-v-78a52c03] img:hover{transform:scale(1.05)}.fs-virtual-waterfall-item-inner[data-v-78a52c03] .waterfall-content{flex-shrink:0;min-height:70px;justify-content:center;padding:0 10px 10px}.fs-virtual-waterfall-item-inner[data-v-78a52c03] p{padding:0 12px;font-size:14px;color:var(--text-primary);line-height:1.5;margin:8px 0}.fs-virtual-waterfall-item-inner[data-v-78a52c03] p:first-of-type{margin-top:10px}.fs-virtual-waterfall-item-inner[data-v-78a52c03] p:last-of-type{margin-bottom:10px;color:var(--text-secondary);font-size:12px}@keyframes fadeInUp-78a52c03{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.fs-virtual-waterfall-footer[data-v-78a52c03]{margin-top:20px;padding-bottom:30px;width:100%;text-align:center}@media (prefers-color-scheme: dark){.fs-virtual-waterfall-container.theme-auto[data-v-78a52c03]{--shadow-color: 0, 0, 0;--shadow-opacity: .2;--card-bg: #1a1a1a;--text-primary: #e0e0e0;--text-secondary: #777}}