[css] 优化固定回收站样式

逻辑, 操作什么的, 参考这里

[css] 固定回收站置文档树底部

样式效果

平时

拖拽 到 回收站上面的时候,

css 代码

/* 固定回收站 */
div.sy__file>div.fn__flex-1>ul:last-of-type {
    position: sticky;
    bottom: 0px;
    background-color: var(--b3-theme-surface);
    border-radius: 5px;
}
/* 回收站展开了, 就恢复原有样式 */
div.sy__file>div.fn__flex-1>ul:last-of-type:has(ul) {
    position: relative;
}

/* 调高回收站高度 */
div.sy__file>div.fn__flex-1>ul:last-of-type>li {
    padding: 8px 0;
}
/* 拖拽时的阴影 */
div.sy__file>div.fn__flex-1>ul:last-of-type>li.dragover::after {
    width: 100%;
    left: 0px;
    background-color: unset;
}
div.sy__file>div.fn__flex-1>ul:last-of-type>li.dragover {
    background-color: var(--b3-card-error-background);
}

/* 隐藏回收站折叠按钮 */
div.sy__file>div.fn__flex-1>ul:last-of-type>li>span.b3-list-item__toggle--hl {
    display: none;
}
/* 恢复显示回收站图标 */
div.sy__file>div.fn__flex-1>ul:last-of-type>li>span.b3-list-item__icon {
    display: flex;
    font-size: 30px;
    height: 32px;
}
​

与笔记本外框线搭配, 更佳哦

div.sy__file>div.fn__flex-1>ul {
    /* 笔记本设置外框线 */
    border: 1px solid rgba(0, 0, 0, 0.5);
    border-radius: 5px;
    /* 笔记本内部 添加 上下距离*/
    padding: 5px 0;
    /* 笔记本外部 添加 上下距离 */
    margin: 8px 4px;
}

/* 第一个笔记本不需要上下距离 */
div.sy__file>div.fn__flex-1>ul:first-of-type,
div.sy__file>div.fn__flex-1>ul:last-of-type {
    margin: 0 4px;
}

/* 笔记本左右外部距离调整为4px */
.b3-list-item {
    margin: 1px 4px;
}
​