@docs-site/site-docsify/docs/.docsify/styles/docsify-sidebar-collapse.css

docsify site

/**
 * @file docsify-sidebar-collapse.css
 * @brief 侧边栏折叠样式文件
 * @details 定义侧边栏目录项的折叠箭头样式和动画效果
 */

/**
 * @brief 侧边栏列表项基础样式
 */
.sidebar-nav li {
  position: relative;       /* 相对定位 */
  margin: 0;                /* 无外边距 */
  cursor: pointer;          /* 鼠标手型 */
}

/**
 * @brief 折叠箭头样式
 * @details 使用边框旋转创建三角形箭头效果
 */
.sidebar-nav ul:not(.app-sub-sidebar) > li:not(.file)::before {
  content: '';              /* 伪元素内容 */
  display: block;           /* 块级显示 */
  position: absolute;       /* 绝对定位 */
  top: 11px;                /* 距离顶部11px */
  left: -12px;              /* 距离左侧-12px */
  height: 3px;              /* 高度3px */
  width: 3px;               /* 宽度3px */
  border-right: 2px solid #505d6b;  /* 右侧边框 */
  border-bottom: 2px solid #505d6b; /* 底部边框 */
  transform: rotate(-45deg); /* 旋转-45度 */
  transition: transform 0.1s; /* 旋转动画0.1秒 */
}

/**
 * @brief 展开状态箭头样式
 */
.sidebar-nav ul:not(.app-sub-sidebar) > li.open::before {
  transform: rotate(45deg);  /* 旋转45度 */
}

/**
 * @brief 折叠状态箭头样式
 */
.sidebar-nav ul:not(.app-sub-sidebar) > li.collapse::before {
  transform: rotate(-45deg); /* 旋转-45度 */
}