style(dashboard): enhance step numbers and mod-point card styling

- Change step numbers from circles to rounded rectangles
- Add shadow to step number badges for depth
- Enhance mod-point-card with full border and stronger left accent
- Add hover effect with elevated shadow on mod-point-card

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
catlog22
2025-12-05 16:52:36 +08:00
parent 1d3436d51b
commit 296761a34e

View File

@@ -3718,16 +3718,17 @@ ol.step-commands code {
.step-number { .step-number {
flex-shrink: 0; flex-shrink: 0;
width: 24px; min-width: 28px;
height: 24px; height: 28px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background: var(--primary, #3b82f6); background: var(--primary, #3b82f6);
color: white; color: white;
border-radius: 50%; border-radius: 6px;
font-size: 12px; font-size: 13px;
font-weight: 600; font-weight: 700;
box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
} }
.step-text { .step-text {
@@ -3744,10 +3745,18 @@ ol.step-commands code {
} }
.mod-point-card { .mod-point-card {
padding: 12px; padding: 14px 16px;
background: var(--bg-secondary, #f9fafb); background: var(--bg-primary, #fff);
border-radius: 6px; border-radius: 8px;
border-left: 3px solid var(--primary, #3b82f6); border: 1px solid var(--border-color, #e5e7eb);
border-left: 4px solid var(--primary, #3b82f6);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
transition: all 0.2s ease;
}
.mod-point-card:hover {
border-color: var(--primary, #3b82f6);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
} }
.mod-point-card .mod-file code { .mod-point-card .mod-file code {