gabriel / musehub public
_clones.scss
241 lines 7.2 KB
Raw
sha256:0997d6250ae6476362f6fe2025af7789f46d03df3e9f34356d5e8ee79b201923 fix(issues): use issue number as pagination cursor, not cre… Sonnet 4.6 patch 8 days ago
1 // ─────────────────────────────────────────────────────────────────────────────
2 // Component: Clones (.cl-* visuals)
3 // File: src/scss/components/_clones.scss
4 //
5 // VISUAL RULES ONLY — no layout or sizing here.
6 // Structural layout lives in pages/_clones.scss.
7 // ─────────────────────────────────────────────────────────────────────────────
8
9 // ── Stat chips ────────────────────────────────────────────────────────────────
10
11 .cl-stat {
12 background: var(--bg-card);
13 border: 1px solid var(--border-default);
14 border-radius: var(--radius-md);
15 }
16
17 .cl-stat__val {
18 font-size: 1.5rem;
19 font-weight: 600;
20 color: var(--color-accent);
21 font-variant-numeric: tabular-nums;
22 }
23
24 .cl-stat__lbl {
25 font-size: 0.7rem;
26 text-transform: uppercase;
27 letter-spacing: 0.06em;
28 color: var(--fg-muted);
29 }
30
31 // ── Tier badge ────────────────────────────────────────────────────────────────
32
33 .cl-badge {
34 display: inline-flex;
35 align-items: center;
36 justify-content: center;
37 padding: 0.15em 0.55em;
38 border-radius: 3px;
39 font-size: 0.65rem;
40 font-weight: 600;
41 letter-spacing: 0.05em;
42 text-transform: uppercase;
43 white-space: nowrap;
44 }
45
46 .cl-badge--exact {
47 background: color-mix(in srgb, var(--color-accent) 18%, transparent);
48 color: var(--color-accent);
49 border: 1px solid color-mix(in srgb, var(--color-accent) 35%, transparent);
50 }
51
52 .cl-badge--near {
53 background: color-mix(in srgb, var(--color-warning) 18%, transparent);
54 color: var(--color-warning);
55 border: 1px solid color-mix(in srgb, var(--color-warning) 35%, transparent);
56 }
57
58 // ── Cross-file badge ──────────────────────────────────────────────────────────
59
60 .cl-cross-file {
61 font-size: 0.62rem;
62 color: var(--color-warning);
63 opacity: 0.85;
64 }
65
66 // ── File hotspots ─────────────────────────────────────────────────────────────
67
68 .cl-hotspot-section-title {
69 font-size: 0.65rem;
70 text-transform: uppercase;
71 letter-spacing: 0.06em;
72 color: var(--fg-muted);
73 }
74
75 .cl-hotspot-row:hover { background: var(--bg-overlay); }
76
77 .cl-hotspot-file {
78 font-family: var(--font-mono);
79 font-size: 0.8rem;
80 color: var(--fg-default);
81 }
82
83 .cl-hotspot-track { background: var(--bg-overlay); }
84 .cl-hotspot-fill { background: var(--color-warning); opacity: 0.7; }
85
86 .cl-hotspot-val {
87 font-size: 0.75rem;
88 font-variant-numeric: tabular-nums;
89 color: var(--fg-muted);
90 }
91
92 // ── Cluster list ──────────────────────────────────────────────────────────────
93
94 .cl-list {
95 border: 1px solid var(--border-default);
96 border-radius: var(--radius-md);
97 overflow: hidden;
98 }
99
100 .cl-row {
101 border-bottom: 1px solid var(--border-subtle);
102 color: var(--fg-default);
103 transition: background 0.1s;
104
105 &:last-child { border-bottom: none; }
106 &:hover { background: var(--bg-overlay); }
107 }
108
109 .cl-row__hash {
110 font-family: var(--font-mono);
111 font-size: 0.78rem;
112 color: var(--fg-muted);
113 }
114
115 .cl-row__bar-track { background: var(--bg-overlay); }
116 .cl-row__bar-fill--exact { background: var(--color-accent); opacity: 0.7; }
117 .cl-row__bar-fill--near { background: var(--color-warning); opacity: 0.7; }
118
119 .cl-row__count {
120 font-size: 0.78rem;
121 font-variant-numeric: tabular-nums;
122 color: var(--fg-default);
123 font-weight: 500;
124 }
125
126 // ── Language + kind pills ─────────────────────────────────────────────────────
127
128 .cl-lang-pill {
129 font-size: 0.62rem;
130 padding: 0.1em 0.45em;
131 border-radius: 3px;
132 background: color-mix(in srgb, var(--color-teal) 15%, transparent);
133 color: var(--color-teal);
134 white-space: nowrap;
135 }
136
137 .cl-kind-badge {
138 font-size: 0.62rem;
139 padding: 0.1em 0.4em;
140 border-radius: 3px;
141 background: var(--bg-overlay);
142 color: var(--fg-muted);
143 text-transform: lowercase;
144 white-space: nowrap;
145 }
146
147 // ── Detail page ───────────────────────────────────────────────────────────────
148
149 .cl-detail-hash {
150 font-family: var(--font-mono);
151 font-size: 0.95rem;
152 color: var(--fg-muted);
153 margin-bottom: 0.25rem;
154 }
155
156 .cl-detail-meta {
157 font-size: 0.8rem;
158 color: var(--fg-muted);
159 }
160
161 .cl-detail-chip {
162 background: var(--bg-card);
163 border: 1px solid var(--border-default);
164 border-radius: var(--radius-md);
165 min-width: 80px;
166 }
167
168 .cl-detail-chip__val {
169 font-size: 1.35rem;
170 font-weight: 600;
171 color: var(--fg-default);
172 font-variant-numeric: tabular-nums;
173
174 &--accent { color: var(--color-accent); }
175 &--warn { color: var(--color-warning); }
176 }
177
178 .cl-detail-chip__lbl {
179 font-size: 0.65rem;
180 text-transform: uppercase;
181 letter-spacing: 0.06em;
182 color: var(--fg-muted);
183 }
184
185 .cl-section-title {
186 font-size: 0.65rem;
187 text-transform: uppercase;
188 letter-spacing: 0.06em;
189 color: var(--fg-muted);
190 }
191
192 // ── Member list ───────────────────────────────────────────────────────────────
193
194 .cl-member-list {
195 border: 1px solid var(--border-default);
196 border-radius: var(--radius-md);
197 overflow: hidden;
198 }
199
200 .cl-member-row {
201 border-bottom: 1px solid var(--border-subtle);
202
203 &:last-child { border-bottom: none; }
204 &:hover { background: var(--bg-overlay); }
205 }
206
207 .cl-member-addr {
208 font-family: var(--font-mono);
209 font-size: 0.8rem;
210 color: var(--fg-default);
211 }
212
213 // ── File breakdown ────────────────────────────────────────────────────────────
214
215 .cl-file-breakdown {
216 border: 1px solid var(--border-default);
217 border-radius: var(--radius-md);
218 overflow: hidden;
219 padding: 0.5rem 0;
220 }
221
222 .cl-file-row:hover { background: var(--bg-overlay); }
223
224 .cl-file-name {
225 font-family: var(--font-mono);
226 font-size: 0.8rem;
227 color: var(--fg-default);
228 }
229
230 .cl-file-track { background: var(--bg-overlay); }
231 .cl-file-fill { background: var(--color-accent); opacity: 0.5; }
232
233 .cl-file-count {
234 font-size: 0.75rem;
235 color: var(--fg-muted);
236 font-variant-numeric: tabular-nums;
237 }
238
239 // ── Empty state ───────────────────────────────────────────────────────────────
240
241 .cl-empty { color: var(--fg-muted); }
File History 1 commit
sha256:0997d6250ae6476362f6fe2025af7789f46d03df3e9f34356d5e8ee79b201923 fix(issues): use issue number as pagination cursor, not cre… Sonnet 4.6 patch 8 days ago