gabriel / musehub public
_codemap.scss
186 lines 7.0 KB
Raw
sha256:3c58668648c7323bb9f5c6881cfe6a3f14fc93fcb73b537d253732952a5bf8bf chore: bump version to 0.2.0rc12 Sonnet 4.6 patch 8 days ago
1 // ─────────────────────────────────────────────────────────────────────────────
2 // Component: Code Map Intel (.cm-* visual)
3 // File: src/scss/components/_codemap.scss
4 //
5 // VISUAL RULES ONLY — no layout, no dimensions here.
6 // Layout lives in pages/_codemap.scss.
7 // ─────────────────────────────────────────────────────────────────────────────
8
9 // ── Stat chips ────────────────────────────────────────────────────────────────
10
11 .cm-stat-card {
12 background: var(--bg-surface);
13 border: 1px solid var(--border-default);
14 border-radius: 8px;
15
16 &--edges { border-color: color-mix(in srgb, var(--color-teal) 30%, transparent); }
17 &--cycles { border-color: color-mix(in srgb, var(--color-purple) 30%, transparent); }
18 &--warn { border-color: color-mix(in srgb, var(--color-danger) 45%, transparent); }
19 }
20
21 .cm-stat-val {
22 font-size: 1.35rem;
23 font-weight: 700;
24 font-family: var(--font-mono);
25 background: var(--gradient-spectral);
26 -webkit-background-clip: text;
27 -webkit-text-fill-color: transparent;
28 background-clip: text;
29 }
30
31 .cm-stat-lbl {
32 font-size: 0.65rem;
33 font-weight: 600;
34 letter-spacing: 0.08em;
35 text-transform: uppercase;
36 color: var(--text-muted);
37 }
38
39 // ── List header ───────────────────────────────────────────────────────────────
40
41 .cm-hd-file,
42 .cm-hd-sym,
43 .cm-hd-fanin,
44 .cm-hd-fanout,
45 .cm-hd-lang {
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 // ── Module rows ───────────────────────────────────────────────────────────────
54
55 .cm-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 // ── File path ─────────────────────────────────────────────────────────────────
70
71 .cm-file-path {
72 font-size: 0.75rem;
73 font-family: var(--font-mono);
74 color: var(--text-primary);
75 overflow: hidden;
76 text-overflow: ellipsis;
77 white-space: nowrap;
78 }
79
80 // ── Symbol count ──────────────────────────────────────────────────────────────
81
82 .cm-sym-count {
83 font-size: 0.72rem;
84 font-family: var(--font-mono);
85 color: var(--text-secondary);
86 white-space: nowrap;
87 }
88
89 // ── Fan-in bar ────────────────────────────────────────────────────────────────
90
91 .cm-bar-wrap {
92 height: 6px;
93 background: var(--border-default);
94 border-radius: 3px;
95 overflow: hidden;
96 flex: 1;
97 }
98
99 .cm-fan-bar {
100 height: 100%;
101 background: var(--gradient-spectral);
102 border-radius: 3px;
103 min-width: 2px;
104 transition: width 0.3s ease;
105 }
106
107 .cm-fan-n {
108 font-size: 0.65rem;
109 font-family: var(--font-mono);
110 font-weight: 600;
111 color: var(--text-primary);
112 white-space: nowrap;
113 min-width: 2rem;
114 text-align: right;
115 }
116
117 // ── Fan-out count ─────────────────────────────────────────────────────────────
118
119 .cm-fanout-count {
120 font-size: 0.72rem;
121 font-family: var(--font-mono);
122 color: var(--text-secondary);
123 white-space: nowrap;
124 }
125
126 // ── Language badge ────────────────────────────────────────────────────────────
127
128 .cm-lang-badge {
129 display: inline-flex;
130 align-items: center;
131 font-size: 0.6rem;
132 font-weight: 700;
133 letter-spacing: 0.04em;
134 padding: 2px 6px;
135 border-radius: 4px;
136 text-transform: lowercase;
137 background: color-mix(in srgb, var(--color-accent) 12%, transparent);
138 color: var(--color-accent);
139 border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent);
140
141 &--python { background: color-mix(in srgb, var(--color-teal) 12%, transparent); color: var(--color-teal); border-color: color-mix(in srgb, var(--color-teal) 30%, transparent); }
142 &--typescript { background: color-mix(in srgb, var(--color-accent) 12%, transparent); color: var(--color-accent); border-color: color-mix(in srgb, var(--color-accent) 30%, transparent); }
143 &--javascript { background: color-mix(in srgb, var(--color-orange) 12%, transparent); color: var(--color-orange); border-color: color-mix(in srgb, var(--color-orange) 30%, transparent); }
144 &--html { background: color-mix(in srgb, var(--color-rose) 12%, transparent); color: var(--color-rose); border-color: color-mix(in srgb, var(--color-rose) 30%, transparent); }
145 &--css { background: color-mix(in srgb, var(--color-purple) 12%, transparent); color: var(--color-purple); border-color: color-mix(in srgb, var(--color-purple) 30%, transparent); }
146 }
147
148 // ── Cycle panel ───────────────────────────────────────────────────────────────
149
150 .cm-cycle-panel {
151 display: flex;
152 align-items: flex-start;
153 gap: 0.5rem;
154 font-size: 0.78rem;
155 padding: 0.6rem 0.9rem;
156 border-radius: 6px;
157 border: 1px solid;
158 }
159
160 .cm-cycle-ok {
161 color: var(--color-success, #4ade80);
162 border-color: color-mix(in srgb, var(--color-success, #4ade80) 30%, transparent);
163 background: color-mix(in srgb, var(--color-success, #4ade80) 8%, transparent);
164 }
165
166 .cm-cycle-warn {
167 flex-direction: column;
168 color: var(--color-danger, #f87171);
169 border-color: color-mix(in srgb, var(--color-danger, #f87171) 30%, transparent);
170 background: color-mix(in srgb, var(--color-danger, #f87171) 8%, transparent);
171 }
172
173 .cm-cycle-list {
174 list-style: none;
175 padding: 0;
176 margin: 0.35rem 0 0;
177 display: flex;
178 flex-direction: column;
179 gap: 0.2rem;
180 }
181
182 .cm-cycle-path {
183 font-size: 0.68rem;
184 font-family: var(--font-mono);
185 color: var(--text-secondary);
186 }
File History 1 commit
sha256:3c58668648c7323bb9f5c6881cfe6a3f14fc93fcb73b537d253732952a5bf8bf chore: bump version to 0.2.0rc12 Sonnet 4.6 patch 8 days ago