69 lines
1.4 KiB
CSS
69 lines
1.4 KiB
CSS
/* 展开鲜果 */
|
|
/* @actor: 悠然自得 & WYT */
|
|
|
|
details {
|
|
interpolate-size: allow-keywords;
|
|
overflow: hidden;
|
|
}
|
|
|
|
details::details-content {
|
|
height: 0;
|
|
transition: height 0.3s ease, content-visibility 0.3s;
|
|
transition-behavior: allow-discrete;
|
|
overflow: hidden;
|
|
}
|
|
|
|
details[open]::details-content {
|
|
height: var(--details-content-height, auto);
|
|
}
|
|
|
|
summary.collapse-name {
|
|
position: relative;
|
|
display: block;
|
|
cursor: pointer;
|
|
transition: color 0.3s ease-in-out;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* 渐变背景实现 */
|
|
summary.collapse-name::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
opacity: 0;
|
|
z-index: -1;
|
|
transition: opacity 0.3s ease-in-out;
|
|
background: var(--collapse-bg, transparent);
|
|
}
|
|
|
|
summary.collapse-name:hover::before,
|
|
details[open] > summary.collapse-name::before {
|
|
opacity: 1;
|
|
}
|
|
|
|
summary.collapse-name:hover > div,
|
|
details[open] > summary.collapse-name > div {
|
|
color: #fff;
|
|
}
|
|
|
|
|
|
/* 移除边框 */
|
|
summary.collapse-name > .layui-card-header {
|
|
border-bottom: none;
|
|
}
|
|
|
|
/* 图标切换 */
|
|
details > summary.collapse-name > div > .iconfont {
|
|
float: right;
|
|
}
|
|
|
|
details > summary.collapse-name > div > .iconfont::before {
|
|
content: "";
|
|
}
|
|
|
|
details[open] > summary.collapse-name > div > .iconfont::before {
|
|
content: "";
|
|
} |