gabriel / musehub public
_icons.scss
187 lines 5.9 KB
Raw
sha256:3ff9c9863a9891bdcde71b4a43228f66d0493e38b7cc1d09fe9eb7de774046b2 feat: add repair-commit wire endpoint (API parity with repa… Opus 4.8 minor ⚠ breaking 1 day ago
1 /*
2 * MuseHub Icon System
3 *
4 * CSS-only icon classes for file types and musical concepts.
5 * Icons are implemented as CSS-generated pseudo-elements using Unicode
6 * characters (no external assets, no SVG files, no icon font CDN).
7 *
8 * File-type icons: .icon-mid, .icon-mp3, .icon-wav, .icon-json,
9 * .icon-webp, .icon-xml, .icon-abc
10 *
11 * Musical concept icons: .icon-key, .icon-tempo, .icon-dynamics,
12 * .icon-motif, .icon-emotion, .icon-groove,
13 * .icon-harmony, .icon-rhythm, .icon-melody,
14 * .icon-structure
15 *
16 * Usage:
17 * <span class="file-icon icon-mid"></span>
18 * <span class="music-icon icon-key"></span>
19 *
20 * The .file-icon and .music-icon base classes set shared sizing and alignment.
21 * The variant class sets the glyph (::before) and color.
22 */
23
24 /* -------------------------------------------------------------------------
25 * Base icon classes
26 * ------------------------------------------------------------------------- */
27 .file-icon,
28 .music-icon {
29 display: inline-flex;
30 align-items: center;
31 justify-content: center;
32 font-style: normal;
33 line-height: 1;
34 }
35
36 .file-icon {
37 font-size: var(--text-sm);
38 font-weight: var(--weight-bold);
39 font-family: var(--font-mono);
40 min-width: 32px;
41 padding: 2px 4px;
42 border-radius: var(--radius-sm);
43 border: 1px solid currentColor;
44 }
45
46 .music-icon {
47 font-size: 18px;
48 }
49
50 /* -------------------------------------------------------------------------
51 * File-type icons
52 * Each file type has a distinct background + color combination, and a short
53 * label rendered as text (via ::before) so the icon is screen-reader friendly
54 * when combined with a visible filename.
55 * ------------------------------------------------------------------------- */
56
57 /* MIDI — orange / coral (the native music format) */
58 .icon-mid::before { content: "MID"; }
59 .icon-mid {
60 color: var(--color-orange);
61 border-color: var(--color-orange);
62 background: rgba(240, 136, 62, 0.1);
63 }
64
65 /* MP3 — green (playable audio) */
66 .icon-mp3::before { content: "MP3"; }
67 .icon-mp3 {
68 color: var(--color-success);
69 border-color: var(--color-success);
70 background: rgba(63, 185, 80, 0.1);
71 }
72
73 /* WAV — teal (lossless audio) */
74 .icon-wav::before { content: "WAV"; }
75 .icon-wav {
76 color: #39d353;
77 border-color: #39d353;
78 background: rgba(57, 211, 83, 0.1);
79 }
80
81 /* JSON — blue (data / metadata) */
82 .icon-json::before { content: "JSON"; }
83 .icon-json {
84 color: var(--color-accent);
85 border-color: var(--color-accent);
86 background: rgba(88, 166, 255, 0.1);
87 font-size: 10px;
88 }
89
90 /* WebP — purple (image / visualisation) */
91 .icon-webp::before { content: "IMG"; }
92 .icon-webp {
93 color: var(--color-purple);
94 border-color: var(--color-purple);
95 background: rgba(188, 140, 255, 0.1);
96 }
97
98 /* XML — warm grey (markup / export format) */
99 .icon-xml::before { content: "XML"; }
100 .icon-xml {
101 color: var(--text-muted);
102 border-color: var(--text-muted);
103 background: rgba(139, 148, 158, 0.1);
104 }
105
106 /* ABC notation — yellow (text-based music notation) */
107 .icon-abc::before { content: "ABC"; }
108 .icon-abc {
109 color: var(--color-warning);
110 border-color: var(--color-warning);
111 background: color-mix(in srgb, var(--color-warning) 10%, transparent);
112 }
113
114 /* -------------------------------------------------------------------------
115 * Musical concept icons (emoji-based for broad Unicode support)
116 * ------------------------------------------------------------------------- */
117
118 /* Key signature */
119 .icon-key::before { content: "\266F"; } /* ♯ */
120 .icon-key { color: var(--dim-harmonic); }
121
122 /* Tempo / BPM */
123 .icon-tempo::before { content: "\1F3B5"; } /* 🎵 */
124 .icon-tempo { color: var(--dim-rhythmic); }
125
126 /* Dynamics / velocity */
127 .icon-dynamics::before { content: "\1F4A5"; } /* 💥 */
128 .icon-dynamics { color: var(--dim-dynamic); }
129
130 /* Motif / theme */
131 .icon-motif::before { content: "\1F300"; } /* 🌀 */
132 .icon-motif { color: var(--dim-melodic); }
133
134 /* Emotion / mood */
135 .icon-emotion::before { content: "\1F3AD"; } /* 🎭 */
136 .icon-emotion { color: var(--color-purple); }
137
138 /* Groove / feel */
139 .icon-groove::before { content: "\1F941"; } /* 🥁 */
140 .icon-groove { color: var(--dim-rhythmic); }
141
142 /* Harmony */
143 .icon-harmony::before { content: "\1F3B9"; } /* 🎹 */
144 .icon-harmony { color: var(--dim-harmonic); }
145
146 /* Rhythm */
147 .icon-rhythm::before { content: "\23F1"; } /* ⏱ */
148 .icon-rhythm { color: var(--dim-rhythmic); }
149
150 /* Melody */
151 .icon-melody::before { content: "\1F3B6"; } /* 🎶 */
152 .icon-melody { color: var(--dim-melodic); }
153
154 /* Structure / form */
155 .icon-structure::before { content: "\1F3DB"; } /* 🏛 */
156 .icon-structure { color: var(--dim-structural); }
157
158 /* -------------------------------------------------------------------------
159 * Dimension color swatches
160 * Used in legends, radar chart keys, and commit diff summaries.
161 * ------------------------------------------------------------------------- */
162 .swatch {
163 display: inline-block;
164 width: 10px;
165 height: 10px;
166 border-radius: 2px;
167 vertical-align: middle;
168 margin-right: var(--space-1);
169 }
170
171 .swatch-harmonic { background: var(--dim-harmonic); }
172 .swatch-rhythmic { background: var(--dim-rhythmic); }
173 .swatch-melodic { background: var(--dim-melodic); }
174 .swatch-structural{ background: var(--dim-structural); }
175 .swatch-dynamic { background: var(--dim-dynamic); }
176
177 /* -------------------------------------------------------------------------
178 * Track color swatches (8-track palette)
179 * ------------------------------------------------------------------------- */
180 .swatch-track-0 { background: var(--track-0); }
181 .swatch-track-1 { background: var(--track-1); }
182 .swatch-track-2 { background: var(--track-2); }
183 .swatch-track-3 { background: var(--track-3); }
184 .swatch-track-4 { background: var(--track-4); }
185 .swatch-track-5 { background: var(--track-5); }
186 .swatch-track-6 { background: var(--track-6); }
187 .swatch-track-7 { background: var(--track-7); }
File History 1 commit
sha256:3ff9c9863a9891bdcde71b4a43228f66d0493e38b7cc1d09fe9eb7de774046b2 feat: add repair-commit wire endpoint (API parity with repa… Opus 4.8 minor ⚠ 1 day ago