| // Demo列表公共样式 - 被start.scss和compare.scss共享 | |
| // Demo列表容器 - 基础布局样式 | |
| .demos { | |
| display: flex; // 使用flex布局 | |
| flex-direction: column; // 单列竖向排列 | |
| overflow-y: auto; // 垂直滚动 | |
| overflow-x: auto; // 水平滚动，当内容超出时显示横向滚动条 | |
| // 禁用CSS Columns布局 | |
| column-count: 1; // 强制单列 | |
| column-width: auto; // 取消固定列宽 | |
| column-gap: 0; // 取消列间距 | |
| } | |
| // Demo项基础样式 | |
| .demo-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 4px; | |
| break-inside: avoid; // 防止demo项被分列截断 | |
| } | |
| // Demo按钮样式 | |
| .demoBtn, .demo-folder-btn { | |
| display: block; // 每个按钮占一行 | |
| width: max-content; // 宽度根据内容自适应，确保完整显示文件名 | |
| box-sizing: border-box; // 确保padding和border包含在宽度内 | |
| border-radius: 3px; | |
| border: none; // 去除外框 | |
| padding: 0 6px; // 去掉上下留白以压缩行距 | |
| margin-bottom: 0; // 移除按钮之间的额外间隔 | |
| font-size: 9pt; | |
| line-height: 1.2; // 紧凑但可读 | |
| text-align: center; // 文字居中 | |
| white-space: nowrap; // 防止文字换行 | |
| background-color: var(--button-bg); | |
| color: var(--text-color); | |
| transition: none; | |
| &:hover { | |
| background-color: var(--button-hover-bg); | |
| } | |
| } | |
| // 选中状态的按钮样式 | |
| .demoBtn.demo-selected, | |
| .demo-folder-btn.demo-selected { | |
| border: 1px solid var(--primary-color, #3b82f6); | |
| background-color: rgba(59, 130, 246, 0.12); | |
| color: var(--primary-color, #3b82f6); | |
| box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.35); | |
| } | |