gabriel / musehub public
_cards.scss
140 lines 4.6 KB
Raw
sha256:3ff9c9863a9891bdcde71b4a43228f66d0493e38b7cc1d09fe9eb7de774046b2 feat: add repair-commit wire endpoint (API parity with repa… Opus 4.8 minor ⚠ breaking 1 day ago
1 // ─────────────────────────────────────────────────────────────────────────────
2 // Component: Cards
3 // File: src/scss/components/_cards.scss
4 //
5 // Variants: .card .card--elevated .card--hover .card--repo .card--stat
6 // .card--accent-top .card--accent-{color}
7 // Tokens: --bg-surface, --bg-elevated, --border-default, --border-glow
8 // Usage: <div class="card">…</div>
9 //
10 // Notes: No drop shadows — in a dark theme, use border-lift instead.
11 // Active/selected state: 2px left accent bar via --dd-accent.
12 // ─────────────────────────────────────────────────────────────────────────────
13
14 .card {
15 background: var(--bg-surface);
16 border: 1px solid var(--border-default);
17 border-radius: var(--radius-md);
18 padding: var(--space-4);
19 transition: border-color var(--transition-base), background var(--transition-base);
20 }
21
22 .card--elevated {
23 background: var(--bg-elevated);
24 }
25
26 .card--hover {
27 cursor: pointer;
28 transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
29
30 &:hover {
31 border-color: var(--border-glow);
32 background: var(--bg-elevated);
33 transform: translateY(-2px);
34 }
35 }
36
37 // Repo card grid
38 .card--repo {
39 position: relative;
40 background: transparent;
41 border: 1px solid var(--border-subtle);
42 border-radius: var(--radius-sm);
43 padding: var(--space-3);
44 cursor: pointer;
45 text-decoration: none;
46 display: flex;
47 flex-direction: column;
48 gap: var(--space-2);
49 color: inherit;
50
51 transition: border-color var(--transition-fast), background var(--transition-fast);
52
53 &:hover {
54 border-color: var(--border-default);
55 background: color-mix(in srgb, var(--text-primary) 2%, transparent);
56 text-decoration: none;
57 color: inherit;
58 }
59 }
60
61 // Stat card
62 .card--stat {
63 background: var(--bg-surface);
64 border: 1px solid var(--border-default);
65 border-radius: var(--radius-base);
66 padding: var(--space-4);
67 text-align: center;
68
69 .stat-value {
70 font-family: var(--font-mono);
71 font-size: var(--text-2xl);
72 font-weight: var(--weight-bold);
73 color: var(--color-accent);
74 display: block;
75 line-height: 1.1;
76 }
77
78 .stat-label {
79 font-size: var(--text-sm);
80 color: var(--text-muted);
81 margin-top: var(--space-1);
82 }
83 }
84
85 // Top accent bar variants
86 .card--accent-top { border-top: 3px solid var(--color-accent); }
87 .card--accent-success { border-top: 3px solid var(--color-success); }
88 .card--accent-warning { border-top: 3px solid var(--color-warning); }
89 .card--accent-danger { border-top: 3px solid var(--color-danger); }
90 .card--accent-purple { border-top: 3px solid var(--color-purple); }
91 .card--accent-orange { border-top: 3px solid var(--color-orange); }
92
93 // Legacy class aliases
94 .card-accent-top { border-top: 3px solid var(--color-accent); }
95 .card-accent-success { border-top: 3px solid var(--color-success); }
96 .card-accent-warning { border-top: 3px solid var(--color-warning); }
97 .card-accent-danger { border-top: 3px solid var(--color-danger); }
98 .card-accent-purple { border-top: 3px solid var(--color-purple); }
99 .card-accent-orange { border-top: 3px solid var(--color-orange); }
100 .card-accent-harmonic { border-top: 3px solid var(--dim-harmonic); }
101 .card-accent-rhythmic { border-top: 3px solid var(--dim-rhythmic); }
102 .card-accent-melodic { border-top: 3px solid var(--dim-melodic); }
103 .card-accent-structural { border-top: 3px solid var(--dim-structural); }
104 .card-accent-dynamic { border-top: 3px solid var(--dim-dynamic); }
105
106 .card-hover {
107 transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
108
109 &:hover {
110 transform: translateY(-2px);
111 box-shadow: var(--shadow-md);
112 }
113 }
114
115 // Stat pill — number + label display used in hero right column and dashboards
116 .stat-pill {
117 display: flex;
118 align-items: center;
119 gap: 10px;
120 border: 1px solid var(--border-subtle);
121 border-radius: var(--radius-sm);
122 padding: 9px 14px;
123 background: transparent;
124
125 &__num {
126 font-family: var(--font-mono);
127 font-size: 18px;
128 font-weight: var(--weight-bold);
129 color: var(--text-primary);
130 line-height: 1;
131 }
132
133 &__label {
134 font-size: var(--text-xs);
135 font-weight: var(--weight-medium);
136 color: var(--text-muted);
137 text-transform: uppercase;
138 letter-spacing: 0.06em;
139 }
140 }
File History 1 commit
sha256:3ff9c9863a9891bdcde71b4a43228f66d0493e38b7cc1d09fe9eb7de774046b2 feat: add repair-commit wire endpoint (API parity with repa… Opus 4.8 minor ⚠ 1 day ago