gabriel / musehub public
_api_surface.scss
187 lines 6.1 KB
Raw
sha256:94ef169c149a452bff7c604ded8b280b19bd477c2dabcb56972780b0b784c7aa Merge 'fix/assignee-sigil-inline' into 'dev' — proposal: As… Human 12 days ago
1 // ─────────────────────────────────────────────────────────────────────────────
2 // Component: API Surface (.as-* visual)
3 // File: src/scss/components/_api_surface.scss
4 //
5 // VISUAL RULES ONLY — no layout, no dimensions here.
6 // Layout lives in pages/_api_surface.scss.
7 // ─────────────────────────────────────────────────────────────────────────────
8
9 // ── Stat cards ────────────────────────────────────────────────────────────────
10
11 .as-stat-card {
12 background: var(--bg-surface);
13 border: 1px solid var(--border-default);
14 border-radius: 8px;
15
16 &--function { border-color: color-mix(in srgb, var(--color-accent) 30%, transparent); }
17 &--async-fn { border-color: color-mix(in srgb, var(--color-orange) 30%, transparent); }
18 &--class { border-color: color-mix(in srgb, var(--color-purple) 30%, transparent); }
19 &--method { border-color: color-mix(in srgb, var(--color-teal) 30%, transparent); }
20 &--async-method{ border-color: color-mix(in srgb, var(--color-rose) 30%, transparent); }
21 }
22
23 .as-stat-val {
24 font-size: 1.35rem;
25 font-weight: 700;
26 font-family: var(--font-mono);
27 background: var(--gradient-spectral);
28 -webkit-background-clip: text;
29 -webkit-text-fill-color: transparent;
30 background-clip: text;
31 }
32
33 .as-stat-lbl {
34 font-size: 0.65rem;
35 font-weight: 600;
36 letter-spacing: 0.08em;
37 text-transform: uppercase;
38 color: var(--text-muted);
39 }
40
41 // ── List header ───────────────────────────────────────────────────────────────
42
43 .as-hd-addr,
44 .as-hd-kind,
45 .as-hd-ref {
46 font-size: 0.65rem;
47 font-weight: 700;
48 letter-spacing: 0.07em;
49 text-transform: uppercase;
50 color: var(--text-muted);
51 }
52
53 // ── Symbol rows ───────────────────────────────────────────────────────────────
54
55 .as-row {
56 background: var(--bg-page);
57 border-left: 1px solid var(--border-default);
58 border-right: 1px solid var(--border-default);
59 border-bottom: 1px solid var(--border-default);
60 transition: background 0.12s ease;
61
62 &:first-of-type { border-top: 1px solid var(--border-default); border-radius: 6px 6px 0 0; }
63 &:last-child { border-radius: 0 0 6px 6px; }
64 &:only-child { border-radius: 6px; border-top: 1px solid var(--border-default); }
65
66 &:hover { background: var(--bg-surface); }
67 }
68
69 // ── Address ───────────────────────────────────────────────────────────────────
70
71 .as-file {
72 font-size: 0.78rem;
73 font-family: var(--font-mono);
74 color: var(--text-muted);
75 }
76
77 .as-sep {
78 font-size: 0.78rem;
79 font-family: var(--font-mono);
80 color: var(--text-muted);
81 margin: 0 0.1rem;
82 }
83
84 .as-name {
85 font-size: 0.82rem;
86 font-family: var(--font-mono);
87 font-weight: 600;
88 color: var(--text-primary);
89 }
90
91 // ── Kind badges ───────────────────────────────────────────────────────────────
92
93 .as-kind-badge {
94 display: inline-block;
95 font-size: 0.62rem;
96 font-weight: 700;
97 letter-spacing: 0.05em;
98 padding: 2px 7px;
99 border-radius: 4px;
100 text-transform: lowercase;
101
102 &--function {
103 background: color-mix(in srgb, var(--color-accent) 15%, transparent);
104 color: var(--color-accent);
105 border: 1px solid color-mix(in srgb, var(--color-accent) 35%, transparent);
106 }
107
108 &--async-function {
109 background: color-mix(in srgb, var(--color-orange) 15%, transparent);
110 color: var(--color-orange);
111 border: 1px solid color-mix(in srgb, var(--color-orange) 35%, transparent);
112 }
113
114 &--class {
115 background: color-mix(in srgb, var(--color-purple) 15%, transparent);
116 color: var(--color-purple);
117 border: 1px solid color-mix(in srgb, var(--color-purple) 35%, transparent);
118 }
119
120 &--method {
121 background: color-mix(in srgb, var(--color-teal) 15%, transparent);
122 color: var(--color-teal);
123 border: 1px solid color-mix(in srgb, var(--color-teal) 35%, transparent);
124 }
125
126 &--async-method {
127 background: color-mix(in srgb, var(--color-rose) 15%, transparent);
128 color: var(--color-rose);
129 border: 1px solid color-mix(in srgb, var(--color-rose) 35%, transparent);
130 }
131 }
132
133 // ── Dashboard card kind breakdown ─────────────────────────────────────────────
134
135 .as-kind-list {
136 list-style: none;
137 margin: 0.5rem 0 0;
138 padding: 0;
139 display: flex;
140 flex-direction: column;
141 gap: 0.35rem;
142 }
143
144 .as-kind-row {
145 display: grid;
146 grid-template-columns: 8.5rem 1fr auto;
147 align-items: center;
148 gap: 0 0.6rem;
149 }
150
151 .as-kind-bar-wrap {
152 height: 4px;
153 background: var(--border-default);
154 border-radius: 2px;
155 overflow: hidden;
156 }
157
158 .as-kind-bar {
159 height: 100%;
160 background: var(--gradient-spectral);
161 border-radius: 2px;
162 min-width: 2px;
163 }
164
165 .as-kind-count {
166 font-size: 0.68rem;
167 font-family: var(--font-mono);
168 color: var(--text-primary);
169 white-space: nowrap;
170 }
171
172 .as-kind-pct {
173 color: var(--text-muted);
174 font-size: 0.62rem;
175 }
176
177 // ── Ref chip ──────────────────────────────────────────────────────────────────
178
179 .as-ref {
180 font-size: 0.68rem;
181 font-family: var(--font-mono);
182 color: var(--text-muted);
183 opacity: 0.7;
184 white-space: nowrap;
185 overflow: hidden;
186 text-overflow: ellipsis;
187 }
File History 3 commits
sha256:94ef169c149a452bff7c604ded8b280b19bd477c2dabcb56972780b0b784c7aa Merge 'fix/assignee-sigil-inline' into 'dev' — proposal: As… Human 12 days ago
sha256:6b1949fc2797ca4c1936a637a4cbfec828ef56cf52398a2e74ca3c4f494e728f fix: use wire_bytes not mpack_bytes_raw in compute_object_b… Sonnet 4.6 patch 20 days ago
sha256:4aed3d8601c8dd3ed37074de35f11f4a9699a0a4b99d43727048fd3f8e6fd13d chore: doc sweep, ignore wrangler build state, misc fixes Sonnet 4.6 minor ⚠ 23 days ago