gabriel / musehub public
_toasts.scss
139 lines 3.8 KB
Raw
sha256:fc04e4cae9e1774d6a21b65c45daeed0e6787eb581d13aa1b03bfe9384a34226 Merge branch 'fix/two-column-scroll-layout' into dev Human 9 days ago
1 // ─────────────────────────────────────────────────────────────────────────────
2 // Component: Toasts
3 // File: src/scss/components/_toasts.scss
4 //
5 // Variants: .empty-state .empty-title .empty-desc .loading .error
6 // [data-tooltip] .tooltip
7 // Tokens: --bg-overlay, --border-default, --color-danger, --text-muted
8 // Usage: <div class="empty-state"><div class="empty-icon">…</div></div>
9 //
10 // Notes: Tooltips are CSS-only via data-tooltip attribute.
11 // ─────────────────────────────────────────────────────────────────────────────
12
13 .loading {
14 color: var(--text-muted);
15 font-size: var(--text-base);
16 }
17
18 .error {
19 color: var(--color-danger);
20 font-size: var(--text-base);
21 margin: var(--space-2) 0;
22 }
23
24 .empty-state {
25 text-align: center;
26 padding: var(--space-12) var(--space-6);
27 color: var(--text-muted);
28 font-size: var(--text-base);
29 }
30
31 .empty-state .empty-icon {
32 display: flex;
33 align-items: center;
34 justify-content: center;
35 width: 56px;
36 height: 56px;
37 border-radius: var(--radius-lg);
38 background: var(--bg-overlay);
39 border: 1px solid var(--border-subtle);
40 margin: 0 auto var(--space-4);
41 color: var(--text-muted);
42
43 svg, i[data-lucide] { width: 24px; height: 24px; stroke: currentColor; }
44 }
45
46 .empty-title {
47 font-size: var(--text-md);
48 font-weight: var(--weight-semibold);
49 color: var(--text-primary);
50 margin-bottom: var(--space-2);
51 letter-spacing: -0.01em;
52 }
53
54 .empty-desc {
55 font-size: var(--text-sm);
56 color: var(--text-muted);
57 margin-bottom: var(--space-5);
58 max-width: 360px;
59 margin-left: auto;
60 margin-right: auto;
61 line-height: var(--line-height-relaxed);
62 }
63
64 // Toast notifications
65 .toast {
66 display: flex;
67 align-items: flex-start;
68 gap: var(--space-3);
69 padding: var(--space-3) var(--space-4);
70 border-radius: var(--radius-md);
71 border: 1px solid var(--border-default);
72 background: var(--bg-elevated);
73 font-size: var(--text-sm);
74 color: var(--text-secondary);
75 box-shadow: var(--shadow-md);
76 max-width: 400px;
77 }
78
79 .toast--success {
80 border-color: color-mix(in srgb, var(--color-success) 30%, transparent);
81 background: color-mix(in srgb, var(--color-success) 8%, var(--bg-elevated));
82 color: var(--color-success);
83 }
84
85 .toast--error {
86 border-color: color-mix(in srgb, var(--color-danger) 30%, transparent);
87 background: color-mix(in srgb, var(--color-danger) 8%, var(--bg-elevated));
88 color: var(--color-danger);
89 }
90
91 .toast--info {
92 border-color: color-mix(in srgb, var(--color-accent) 30%, transparent);
93 background: color-mix(in srgb, var(--color-accent) 8%, var(--bg-elevated));
94 color: var(--color-accent);
95 }
96
97 // CSS-only tooltips
98 [data-tooltip] { position: relative; }
99
100 [data-tooltip]::after {
101 content: attr(data-tooltip);
102 position: absolute;
103 bottom: calc(100% + var(--space-1));
104 left: 50%;
105 transform: translateX(-50%);
106 background: var(--bg-overlay);
107 color: var(--text-primary);
108 border: 1px solid var(--border-default);
109 border-radius: var(--radius-sm);
110 padding: 4px var(--space-2);
111 font-size: var(--text-xs);
112 white-space: nowrap;
113 pointer-events: none;
114 opacity: 0;
115 transition: opacity var(--transition-base);
116 z-index: var(--z-tooltip);
117 box-shadow: var(--shadow-md);
118 }
119
120 [data-tooltip]:hover::after { opacity: 1; }
121
122 .tooltip { position: relative; }
123
124 // Notification badge
125 .notif-badge {
126 position: absolute;
127 top: -4px;
128 right: -4px;
129 background: var(--color-danger);
130 color: #fff;
131 font-size: 10px;
132 border-radius: var(--radius-full);
133 min-width: 16px;
134 height: 16px;
135 display: flex;
136 align-items: center;
137 justify-content: center;
138 padding: 0 4px;
139 }
File History 13 commits
sha256:fc04e4cae9e1774d6a21b65c45daeed0e6787eb581d13aa1b03bfe9384a34226 Merge branch 'fix/two-column-scroll-layout' into dev Human 9 days ago
sha256:408916fc5973ba59c6e4eebaa80ebdcc801c0a63205651e25009d11548f79454 chore: bump version to 0.2.0.dev2 — nightly.2, matching muse Sonnet 4.6 patch 11 days ago
sha256:d035733f21ccff27735fddebfbbe0ed24565a32a22db8de5885402262671ecd2 chore: bump version to 0.2.0rc15 for musehub#113 fix release Sonnet 4.6 patch 15 days ago
sha256:0032d6cfa33bc3c8367436ad768e7dd0e339b4332153160247da8266cb5fa352 Merge branch 'task/version-tags-phase3-server' into dev Human 17 days ago
sha256:4669620efda9ff41c55bdefd1f7bfe1c239d468428744c84ead9957e5a003a53 merge: rescue snapshot-recovery hardening (c00aa21d) into d… Opus 4.8 minor ⚠ 29 days ago
sha256:a59da49c4611b970fc4b6ae48678ce4943261c213a07ddbd73ce9201df869b4a fix: remove false-positive proposal_comments index drop fro… Sonnet 4.6 patch 34 days ago
sha256:0a240d6dbff234f07d98a28a4a9a68db702f3f9ff9260196f24219bdb1c0b6f3 feat: render markdown mists as HTML with heading anchor links Sonnet 4.6 patch 34 days ago
sha256:24a7d47486ebc4ebd1832830580e177ec6f877b48dced8c000e198cdec4ce9d6 Merge 'task/bump-version-rc12' into 'dev' — proposal: Bump … Human 35 days ago
sha256:b9ff931d147e0114a1f17060f415b89ed551c170a91ff226c70437aa5c85f9ee Merge 'task/bump-version-rc12' into 'dev' — proposal: Bump … Human 35 days ago
sha256:d1122d21e73471879b460037b22c0b50fded7c423444a176f248428f75dac39c Merge 'task/fix-issue-pagination-cursor' into 'dev' — propo… Human 35 days ago
sha256:01e18975e73d2b3cd5b6db7929c895bef9aa6e0d4391dc5b2adfc548b41318dd Merge 'feat/adding-debug-logs-to-staging' into 'dev' — prop… Human 36 days ago
sha256:6b1949fc2797ca4c1936a637a4cbfec828ef56cf52398a2e74ca3c4f494e728f fix: use wire_bytes not mpack_bytes_raw in compute_object_b… Sonnet 4.6 patch 48 days ago
sha256:b99f2455dc346966d040133f5203297e6e3ef5803a93728a2c30568d0a0f7583 rename: delta_add → delta_upsert across wire format, models… Sonnet 4.6 patch 50 days ago