gabriel / musehub public
_cards.scss
140 lines 4.6 KB
Raw
sha256:fc04e4cae9e1774d6a21b65c45daeed0e6787eb581d13aa1b03bfe9384a34226 Merge branch 'fix/two-column-scroll-layout' into dev Human 9 days 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 13 commits
sha256:fc04e4cae9e1774d6a21b65c45daeed0e6787eb581d13aa1b03bfe9384a34226 Merge branch 'fix/two-column-scroll-layout' into dev Human 9 days ago
sha256:408916fc5973ba59c6e4eebaa80ebdcc801c0a63205651e25009d11548f79454 chore: bump version to 0.2.0.dev2 — nightly.2, matching muse Sonnet 4.6 patch 12 days ago
sha256:d035733f21ccff27735fddebfbbe0ed24565a32a22db8de5885402262671ecd2 chore: bump version to 0.2.0rc15 for musehub#113 fix release Sonnet 4.6 patch 15 days ago
sha256:0032d6cfa33bc3c8367436ad768e7dd0e339b4332153160247da8266cb5fa352 Merge branch 'task/version-tags-phase3-server' into dev Human 17 days ago
sha256:4669620efda9ff41c55bdefd1f7bfe1c239d468428744c84ead9957e5a003a53 merge: rescue snapshot-recovery hardening (c00aa21d) into d… Opus 4.8 minor ⚠ 30 days ago
sha256:a59da49c4611b970fc4b6ae48678ce4943261c213a07ddbd73ce9201df869b4a fix: remove false-positive proposal_comments index drop fro… Sonnet 4.6 patch 34 days ago
sha256:0a240d6dbff234f07d98a28a4a9a68db702f3f9ff9260196f24219bdb1c0b6f3 feat: render markdown mists as HTML with heading anchor links Sonnet 4.6 patch 35 days ago
sha256:24a7d47486ebc4ebd1832830580e177ec6f877b48dced8c000e198cdec4ce9d6 Merge 'task/bump-version-rc12' into 'dev' — proposal: Bump … Human 36 days ago
sha256:b9ff931d147e0114a1f17060f415b89ed551c170a91ff226c70437aa5c85f9ee Merge 'task/bump-version-rc12' into 'dev' — proposal: Bump … Human 36 days ago
sha256:d1122d21e73471879b460037b22c0b50fded7c423444a176f248428f75dac39c Merge 'task/fix-issue-pagination-cursor' into 'dev' — propo… Human 36 days ago
sha256:01e18975e73d2b3cd5b6db7929c895bef9aa6e0d4391dc5b2adfc548b41318dd Merge 'feat/adding-debug-logs-to-staging' into 'dev' — prop… Human 36 days ago
sha256:6b1949fc2797ca4c1936a637a4cbfec828ef56cf52398a2e74ca3c4f494e728f fix: use wire_bytes not mpack_bytes_raw in compute_object_b… Sonnet 4.6 patch 48 days ago
sha256:b99f2455dc346966d040133f5203297e6e3ef5803a93728a2c30568d0a0f7583 rename: delta_add → delta_upsert across wire format, models… Sonnet 4.6 patch 51 days ago