gabriel / musehub public
_surfaces.scss
263 lines 7.5 KB
Raw
sha256:bb2baaabdd19320bde50cb69d447fd1c1e571467df729be1a23b5e93064b046a feat(intel): standardize headers, gauge icon, velocity card… Sonnet 4.6 minor ⚠ breaking 143 days ago
1 // ─────────────────────────────────────────────────────────────────────────────
2 // Component: Surfaces
3 // File: src/scss/patterns/_surfaces.scss
4 //
5 // Variants: .panel .panel--overlay .drawer .modal .modal-backdrop .modal-panel
6 // Tokens: --bg-surface, --bg-elevated, --bg-overlay, --border-default
7 // --shadow-xl, --z-modal, --z-overlay
8 // Usage: <div class="modal"><div class="modal-panel">…</div></div>
9 //
10 // Notes: No drop shadows on cards — use border-lift.
11 // Modal backdrop is rgba black at 0.6 — intentionally hardcoded.
12 // ─────────────────────────────────────────────────────────────────────────────
13
14 // ── Hero ──────────────────────────────────────────────────────────────────────
15 // Full-width section with dark gradient background + optional radial glow.
16 // Usage: <div class="hero hero--human"> ... </div>
17 .hero {
18 position: relative;
19 overflow: hidden;
20 padding: 0 var(--space-4);
21 border-bottom: 1px solid var(--border-default);
22 background: var(--bg-base);
23
24 &--human {
25 background: linear-gradient(135deg,
26 var(--bg-base) 0%,
27 color-mix(in srgb, var(--color-accent) 4%, var(--bg-base)) 55%,
28 var(--bg-base) 100%
29 );
30 }
31
32 &--agent {
33 background: linear-gradient(135deg,
34 var(--bg-base) 0%,
35 color-mix(in srgb, var(--color-purple) 5%, var(--bg-base)) 55%,
36 var(--bg-base) 100%
37 );
38 }
39
40 &--org {
41 background: linear-gradient(135deg,
42 var(--bg-base) 0%,
43 color-mix(in srgb, var(--color-warning) 4%, var(--bg-base)) 55%,
44 var(--bg-base) 100%
45 );
46 }
47
48 &--explore {
49 background: linear-gradient(135deg, var(--bg-base) 0%, #0f1923 50%, var(--bg-base) 100%);
50 }
51 }
52
53 // Ambient radial glow layer — place as first child: <div class="hero-glow hero-glow--human"></div>
54 .hero-glow {
55 position: absolute;
56 inset: 0;
57 pointer-events: none;
58
59 &--human {
60 background:
61 radial-gradient(ellipse 60% 80% at 78% 40%, color-mix(in srgb, var(--color-accent) 8%, transparent) 0%, transparent 65%),
62 radial-gradient(ellipse 35% 55% at 8% 75%, color-mix(in srgb, var(--color-purple) 5%, transparent) 0%, transparent 60%);
63 }
64
65 &--agent {
66 background:
67 radial-gradient(ellipse 60% 80% at 78% 40%, color-mix(in srgb, var(--color-purple) 10%, transparent) 0%, transparent 65%),
68 radial-gradient(ellipse 35% 55% at 8% 75%, color-mix(in srgb, var(--color-accent) 5%, transparent) 0%, transparent 60%);
69 }
70
71 &--org {
72 background:
73 radial-gradient(ellipse 60% 80% at 78% 40%, color-mix(in srgb, var(--color-warning) 9%, transparent) 0%, transparent 65%),
74 radial-gradient(ellipse 35% 55% at 8% 75%, color-mix(in srgb, var(--color-success) 5%, transparent) 0%, transparent 60%);
75 }
76
77 &--explore {
78 background:
79 radial-gradient(ellipse 60% 80% at 70% 50%, color-mix(in srgb, var(--color-accent) 6%, transparent) 0%, transparent 70%),
80 radial-gradient(ellipse 40% 60% at 10% 80%, color-mix(in srgb, var(--color-purple) 5%, transparent) 0%, transparent 60%);
81 }
82 }
83
84 // Inner content row — max-width container inside a hero
85 .hero-inner {
86 position: relative;
87 display: flex;
88 align-items: flex-start;
89 gap: var(--space-4);
90 padding: var(--space-8) 0 var(--space-5);
91 max-width: 1200px;
92 margin: 0 auto;
93
94 @media (max-width: 768px) {
95 flex-direction: column;
96 gap: var(--space-3);
97 padding: var(--space-6) 0 var(--space-4);
98 }
99
100 // Centered variant — for full-width content like explore search
101 &--center {
102 max-width: 760px;
103 flex-direction: column;
104 align-items: center;
105 text-align: center;
106 padding: var(--space-8) 0 var(--space-6);
107 }
108 }
109
110 // Hero left content column — natural width, capped so it doesn't blow out
111 .hero__content {
112 max-width: 560px;
113 min-width: 0;
114 }
115
116 // Hero action buttons row
117 .hero__actions {
118 display: flex;
119 gap: 10px;
120 flex-wrap: wrap;
121 align-items: center;
122 }
123
124 // Hero stats column — e.g. stat pills in MCP hero
125 .hero__stats {
126 display: flex;
127 flex-direction: column;
128 gap: var(--space-3);
129 flex-shrink: 0;
130 margin-left: auto;
131 }
132
133 // Hero subtitle — descriptive text below the h1
134 .hero__sub {
135 font-size: var(--text-sm);
136 line-height: 1.6;
137 color: var(--text-secondary);
138 max-width: 520px;
139 margin: 0 0 var(--space-4);
140 }
141
142 // Bottom metadata strip inside a hero
143 .hero-strip {
144 position: relative;
145 display: flex;
146 flex-wrap: wrap;
147 align-items: center;
148 gap: 0 var(--space-3);
149 padding: var(--space-3) 0;
150 border-top: 1px solid rgba(255, 255, 255, 0.06);
151 max-width: 1200px;
152 margin: 0 auto;
153 font-size: var(--text-xs);
154 }
155
156 // Hero eyebrow — row above display name in hero
157 .hero-eyebrow { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); flex-wrap: wrap; }
158
159 // Hero strip items — metadata within .hero-strip
160 .strip-item { display: flex; align-items: center; gap: 6px; font-size: 12px; }
161 .strip-label { color: var(--text-muted); font-size: 11px; }
162 .strip-val { font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); }
163 .strip-sep { color: var(--border-default); user-select: none; font-size: 14px; line-height: 1; }
164 .strip-badge {
165 font-family: var(--font-mono);
166 font-size: 10px;
167 font-weight: var(--weight-semibold);
168 color: var(--color-accent);
169 background: color-mix(in srgb, var(--color-accent) 10%, transparent);
170 border: 1px solid color-mix(in srgb, var(--color-accent) 25%, transparent);
171 border-radius: 4px;
172 padding: 1px 6px;
173 letter-spacing: 0.05em;
174 text-transform: uppercase;
175 }
176
177 .panel {
178 background: var(--bg-surface);
179 border: 1px solid var(--border-default);
180 border-radius: var(--radius-md);
181 padding: var(--space-4);
182 }
183
184 .panel--overlay {
185 background: var(--bg-overlay);
186 }
187
188 // Modal
189 .modal {
190 display: none;
191 position: fixed;
192 inset: 0;
193 z-index: var(--z-modal);
194
195 &.is-open {
196 display: flex;
197 align-items: center;
198 justify-content: center;
199 }
200 }
201
202 .modal-backdrop {
203 position: fixed;
204 inset: 0;
205 background: rgba(0, 0, 0, 0.6);
206 z-index: var(--z-overlay);
207 }
208
209 .modal-panel {
210 position: relative;
211 z-index: var(--z-modal);
212 background: var(--bg-surface);
213 border: 1px solid var(--border-default);
214 border-radius: var(--radius-md);
215 box-shadow: var(--shadow-xl);
216 padding: var(--space-6);
217 max-width: 560px;
218 width: 90%;
219 max-height: 80vh;
220 overflow-y: auto;
221 }
222
223 .modal-header {
224 display: flex;
225 align-items: center;
226 justify-content: space-between;
227 margin-bottom: var(--space-4);
228 }
229
230 .modal-footer {
231 display: flex;
232 gap: var(--space-2);
233 justify-content: flex-end;
234 margin-top: var(--space-4);
235 padding-top: var(--space-4);
236 border-top: 1px solid var(--border-default);
237 }
238
239 // Comment blocks
240 .comment-block {
241 border: 1px solid var(--border-default);
242 border-radius: var(--radius-base);
243 overflow: hidden;
244 margin-bottom: var(--space-3);
245 }
246
247 .comment-header-row {
248 display: flex;
249 align-items: center;
250 gap: var(--space-2);
251 padding: var(--space-2) var(--space-3);
252 background: var(--bg-surface);
253 border-bottom: 1px solid var(--border-default);
254 font-size: 13px;
255 }
256
257 .comment-body-text {
258 padding: var(--space-3);
259 font-size: 13px;
260 color: var(--text-primary);
261 white-space: pre-wrap;
262 word-break: break-word;
263 }
File History 1 commit
sha256:bb2baaabdd19320bde50cb69d447fd1c1e571467df729be1a23b5e93064b046a feat(intel): standardize headers, gauge icon, velocity card… Sonnet 4.6 minor ⚠ 143 days ago