/* 开启排序模式时,统一卡片样式 */ #chapter-list.reorder-mode .chapter-item, #chapter-list.reorder-mode .lesson-item { border: 2px solid #ddd; border-radius: 10px; background: #fff; cursor: grab; transition: box-shadow .2s, border-color .2s; } /* 间距与内边距 */ .chapter-item { padding: 8px 10px; margin: 8px 0; } .lesson-item { padding: 6px 10px; margin: 6px 0; } /* hover/active 反馈 */ #chapter-list.reorder-mode .chapter-item:hover, #chapter-list.reorder-mode .lesson-item:hover { border-color: #4CAF50; box-shadow: 0 2px 6px rgba(0,0,0,.1); } #chapter-list.reorder-mode .chapter-item:active, #chapter-list.reorder-mode .lesson-item:active { cursor: grabbing; } .dragging { opacity: .6; } /* 放置位置提示线(在元素顶部/底部) */ .drop-indicator-top { box-shadow: inset 0 3px 0 0 #4CAF50; } .drop-indicator-bottom { box-shadow: inset 0 -3px 0 0 #4CAF50; } /* 把 lesson 拖到 chapter 标题上时,高亮标题,表示会追加到该章节末尾 */ .chapter-header.drop-target { outline: 2px dashed #4CAF50; border-radius: 6px; } .chapter-header { display: block; /* 使元素成为块级元素,占满整行 */ /* 文字默认左对齐,无需额外设置text-align: left */ }