@closerclick/closer-click-profile 0.1.0 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/index.js +77 -71
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@closerclick/closer-click-profile",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.1",
|
|
4
4
|
"description": "Web Component (custom element) <closer-click-profile> reutilizable por cualquier app del ecosistema Closer Click: tarjeta de perfil + reputación (confianza/afinidad, web-of-trust, reputación de la red). Autohosteado, Shadow DOM, temable por CSS vars.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "src/index.js",
|
package/src/index.js
CHANGED
|
@@ -123,27 +123,33 @@ const AVATAR_PALETTE = [
|
|
|
123
123
|
|
|
124
124
|
const STYLE = `
|
|
125
125
|
:host {
|
|
126
|
-
/* ----- Tema
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
--ccp-
|
|
133
|
-
--
|
|
134
|
-
--
|
|
135
|
-
--ccp-
|
|
136
|
-
--ccp-
|
|
137
|
-
--ccp-
|
|
138
|
-
--ccp-
|
|
139
|
-
--ccp-
|
|
140
|
-
--
|
|
141
|
-
--
|
|
142
|
-
--
|
|
143
|
-
--
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
126
|
+
/* ----- Tema -----
|
|
127
|
+
* API pública = --ccp-* (la app las setea por :root, selector o inline).
|
|
128
|
+
* Tokens internos = --_* (los usa el componente). Cada uno resuelve:
|
|
129
|
+
* override --ccp-* → var de tema del messenger → literal.
|
|
130
|
+
* NO declaramos --ccp-* acá (eso ganaría por especificidad al override de la
|
|
131
|
+
* app); así un simple selector de la app (o en :root) funciona. */
|
|
132
|
+
--_bg: var(--ccp-bg, var(--bg-1, #faf3e7));
|
|
133
|
+
--_bg-2: var(--ccp-bg-2, var(--bg-2, #f5ede0));
|
|
134
|
+
--_bg-3: var(--ccp-bg-3, var(--bg-3, #ede2cf));
|
|
135
|
+
--_bg-4: var(--ccp-bg-4, var(--bg-4, #e0d3ba));
|
|
136
|
+
--_border: var(--ccp-border, var(--border, #d4c4a8));
|
|
137
|
+
--_text: var(--ccp-text, var(--text, #2b211a));
|
|
138
|
+
--_muted: var(--ccp-muted, var(--muted, #8a7a66));
|
|
139
|
+
--_accent: var(--ccp-accent, var(--accent, #c0392b));
|
|
140
|
+
--_accent-2: var(--ccp-accent-2, var(--accent-2, #a93226));
|
|
141
|
+
--_gold: var(--ccp-gold, var(--gold, #d4a72c));
|
|
142
|
+
--_derived: var(--ccp-derived, var(--derived, #a37a45));
|
|
143
|
+
--_online: var(--ccp-online, var(--online, #5a8a3a));
|
|
144
|
+
--_affinity: var(--ccp-affinity, var(--affinity, #2dd4bf));
|
|
145
|
+
--_input-bg: var(--ccp-input-bg, var(--input-bg, #fff));
|
|
146
|
+
--_radius: var(--ccp-radius, 16px);
|
|
147
|
+
--_font: var(--ccp-font, var(--font-body, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif));
|
|
148
|
+
--_font-headline: var(--ccp-font-headline, var(--font-headline, var(--_font)));
|
|
149
|
+
--_font-mono: var(--ccp-font-mono, var(--font-mono, ui-monospace, Menlo, Consolas, monospace));
|
|
150
|
+
|
|
151
|
+
font-family: var(--_font);
|
|
152
|
+
color: var(--_text);
|
|
147
153
|
}
|
|
148
154
|
* { box-sizing: border-box; }
|
|
149
155
|
|
|
@@ -156,9 +162,9 @@ const STYLE = `
|
|
|
156
162
|
z-index: 2147483000;
|
|
157
163
|
}
|
|
158
164
|
.modal {
|
|
159
|
-
background: var(--
|
|
160
|
-
border: 1px solid var(--
|
|
161
|
-
border-radius: var(--
|
|
165
|
+
background: var(--_bg);
|
|
166
|
+
border: 1px solid var(--_border);
|
|
167
|
+
border-radius: var(--_radius);
|
|
162
168
|
width: 100%; max-width: 460px;
|
|
163
169
|
max-height: 92vh;
|
|
164
170
|
display: flex; flex-direction: column;
|
|
@@ -168,18 +174,18 @@ const STYLE = `
|
|
|
168
174
|
.head {
|
|
169
175
|
display: flex; align-items: center; justify-content: space-between;
|
|
170
176
|
padding: 18px 24px;
|
|
171
|
-
border-bottom: 1px solid var(--
|
|
177
|
+
border-bottom: 1px solid var(--_border);
|
|
172
178
|
}
|
|
173
179
|
.head h2 {
|
|
174
|
-
margin: 0; font-family: var(--
|
|
175
|
-
font-size: 18px; font-weight: 600; color: var(--
|
|
180
|
+
margin: 0; font-family: var(--_font-headline);
|
|
181
|
+
font-size: 18px; font-weight: 600; color: var(--_text);
|
|
176
182
|
}
|
|
177
183
|
.x {
|
|
178
184
|
background: transparent; border: 0;
|
|
179
|
-
font-size: 24px; cursor: pointer; color: var(--
|
|
185
|
+
font-size: 24px; cursor: pointer; color: var(--_muted);
|
|
180
186
|
width: 32px; height: 32px; border-radius: 8px; line-height: 1;
|
|
181
187
|
}
|
|
182
|
-
.x:hover { background: var(--
|
|
188
|
+
.x:hover { background: var(--_bg-3); color: var(--_text); }
|
|
183
189
|
|
|
184
190
|
.body { padding: 20px 24px; display: flex; flex-direction: column; gap: 20px; overflow-y: auto; }
|
|
185
191
|
:host([modal]) .body { max-height: 70vh; }
|
|
@@ -187,102 +193,102 @@ const STYLE = `
|
|
|
187
193
|
/* ----- Identity ----- */
|
|
188
194
|
.identity {
|
|
189
195
|
display: flex; gap: 14px; align-items: center;
|
|
190
|
-
background: var(--
|
|
191
|
-
border: 1px solid var(--
|
|
196
|
+
background: var(--_bg-2);
|
|
197
|
+
border: 1px solid var(--_border);
|
|
192
198
|
border-radius: 12px; padding: 14px;
|
|
193
199
|
}
|
|
194
200
|
.avatar-wrap { position: relative; flex-shrink: 0; }
|
|
195
201
|
.avatar {
|
|
196
202
|
width: 56px; height: 56px; border-radius: 50%;
|
|
197
203
|
display: flex; align-items: center; justify-content: center;
|
|
198
|
-
color: #fff; font-family: var(--
|
|
204
|
+
color: #fff; font-family: var(--_font-headline);
|
|
199
205
|
font-weight: 600; font-size: 18px;
|
|
200
206
|
}
|
|
201
207
|
.online-dot {
|
|
202
208
|
position: absolute; right: 0; bottom: 0;
|
|
203
209
|
width: 14px; height: 14px; border-radius: 50%;
|
|
204
|
-
background: var(--
|
|
210
|
+
background: var(--_online); border: 2px solid var(--_bg-2);
|
|
205
211
|
}
|
|
206
212
|
.identity-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
|
|
207
|
-
.name { font-family: var(--
|
|
213
|
+
.name { font-family: var(--_font-headline); font-weight: 600; font-size: 17px; color: var(--_text); }
|
|
208
214
|
.pubkey {
|
|
209
|
-
background: var(--
|
|
210
|
-
font-family: var(--
|
|
215
|
+
background: var(--_bg-3); padding: 2px 8px; border-radius: 6px;
|
|
216
|
+
font-family: var(--_font-mono); font-size: 11.5px; color: var(--_muted);
|
|
211
217
|
width: fit-content;
|
|
212
218
|
}
|
|
213
|
-
.since { font-size: 12px; color: var(--
|
|
219
|
+
.since { font-size: 12px; color: var(--_muted); }
|
|
214
220
|
|
|
215
221
|
/* ----- Sections ----- */
|
|
216
222
|
.section { display: flex; flex-direction: column; gap: 6px; position: relative; }
|
|
217
|
-
.section-label { font-size: 13px; font-weight: 500; color: var(--
|
|
223
|
+
.section-label { font-size: 13px; font-weight: 500; color: var(--_muted); }
|
|
218
224
|
.section-label small { font-weight: 400; }
|
|
219
225
|
.stars-row { display: flex; gap: 6px; align-items: center; }
|
|
220
226
|
.star-btn {
|
|
221
227
|
background: transparent; border: 0; font-size: 36px;
|
|
222
|
-
color: var(--
|
|
228
|
+
color: var(--_bg-4); cursor: pointer; padding: 0; line-height: 1;
|
|
223
229
|
transition: color 100ms ease-out, transform 100ms ease-out;
|
|
224
230
|
}
|
|
225
231
|
.star-btn[disabled] { cursor: default; }
|
|
226
232
|
.star-btn:not([disabled]):hover { transform: scale(1.1); }
|
|
227
|
-
.star-btn.filled { color: var(--
|
|
228
|
-
.star-btn.afin.filled { color: var(--
|
|
233
|
+
.star-btn.filled { color: var(--_gold); text-shadow: 0 1px 2px rgba(212, 167, 44, 0.35); }
|
|
234
|
+
.star-btn.afin.filled { color: var(--_affinity); text-shadow: none; }
|
|
229
235
|
|
|
230
|
-
.rating-meta { display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--
|
|
236
|
+
.rating-meta { display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--_text); margin-top: 4px; }
|
|
231
237
|
.rating-num { font-weight: 600; }
|
|
232
|
-
.rating-label { color: var(--
|
|
238
|
+
.rating-label { color: var(--_muted); }
|
|
233
239
|
.clear {
|
|
234
|
-
background: transparent; border: 0; color: var(--
|
|
240
|
+
background: transparent; border: 0; color: var(--_muted); cursor: pointer;
|
|
235
241
|
font-size: 12px; margin-left: auto; text-decoration: underline;
|
|
236
242
|
}
|
|
237
|
-
.clear:hover { color: var(--
|
|
243
|
+
.clear:hover { color: var(--_accent); }
|
|
238
244
|
|
|
239
245
|
textarea {
|
|
240
|
-
width: 100%; resize: vertical; font: inherit; color: var(--
|
|
241
|
-
background: #fff; border: 1px solid var(--
|
|
246
|
+
width: 100%; resize: vertical; font: inherit; color: var(--_text);
|
|
247
|
+
background: var(--ccp-input-bg, #fff); border: 1px solid var(--_border); border-radius: 8px;
|
|
242
248
|
padding: 8px 10px;
|
|
243
249
|
}
|
|
244
|
-
textarea:focus { outline: none; border-color: var(--
|
|
245
|
-
.counter { position: absolute; right: 8px; bottom: 8px; font-size: 11px; color: var(--
|
|
250
|
+
textarea:focus { outline: none; border-color: var(--_accent); }
|
|
251
|
+
.counter { position: absolute; right: 8px; bottom: 8px; font-size: 11px; color: var(--_muted); background: var(--ccp-input-bg, #fff); padding: 0 4px; }
|
|
246
252
|
|
|
247
253
|
/* ----- Web of Trust + Cloud ----- */
|
|
248
|
-
.panel { background: var(--
|
|
254
|
+
.panel { background: var(--_bg-3); border-radius: 12px; padding: 14px; }
|
|
249
255
|
.panel + .panel { margin-top: 12px; }
|
|
250
256
|
.panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
|
|
251
|
-
.panel-title { font-size: 12px; font-weight: 600; color: var(--
|
|
252
|
-
.refresh { background: transparent; border: 0; color: var(--
|
|
253
|
-
.refresh:hover { background: var(--
|
|
254
|
-
.empty { font-size: 13px; color: var(--
|
|
255
|
-
.weak { font-size: 13px; color: var(--
|
|
257
|
+
.panel-title { font-size: 12px; font-weight: 600; color: var(--_text); text-transform: uppercase; letter-spacing: 0.05em; }
|
|
258
|
+
.refresh { background: transparent; border: 0; color: var(--_muted); cursor: pointer; font-size: 16px; width: 24px; height: 24px; border-radius: 6px; }
|
|
259
|
+
.refresh:hover { background: var(--_bg-4); color: var(--_text); }
|
|
260
|
+
.empty { font-size: 13px; color: var(--_muted); font-style: italic; }
|
|
261
|
+
.weak { font-size: 13px; color: var(--_muted); }
|
|
256
262
|
.summary { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
|
|
257
263
|
.summary:last-child { margin-bottom: 0; }
|
|
258
264
|
.stars { font-size: 16px; letter-spacing: 1px; }
|
|
259
|
-
.stars.derived { color: var(--
|
|
260
|
-
.stars.afin { color: var(--
|
|
261
|
-
.num { font-family: var(--
|
|
262
|
-
.count { font-size: 12px; color: var(--
|
|
263
|
-
.ind { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--
|
|
265
|
+
.stars.derived { color: var(--_derived); }
|
|
266
|
+
.stars.afin { color: var(--_affinity); }
|
|
267
|
+
.num { font-family: var(--_font-headline); font-weight: 600; font-size: 14px; color: var(--_text); }
|
|
268
|
+
.count { font-size: 12px; color: var(--_muted); }
|
|
269
|
+
.ind { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--_muted); min-width: 64px; }
|
|
264
270
|
|
|
265
271
|
.endorsements { list-style: none; padding: 0; margin: 0; max-height: 130px; overflow-y: auto; }
|
|
266
272
|
.endorsements li {
|
|
267
273
|
display: flex; gap: 8px; align-items: center; font-size: 12.5px;
|
|
268
|
-
padding: 6px 0; border-bottom: 1px solid var(--
|
|
274
|
+
padding: 6px 0; border-bottom: 1px solid var(--_border);
|
|
269
275
|
}
|
|
270
276
|
.endorsements li:last-child { border-bottom: 0; }
|
|
271
|
-
.endorsements .key { background: var(--
|
|
272
|
-
.endorsements .r { color: var(--
|
|
273
|
-
.endorsements .when { color: var(--
|
|
277
|
+
.endorsements .key { background: var(--_bg-2); padding: 1px 6px; border-radius: 4px; font-family: var(--_font-mono); font-size: 11px; color: var(--_muted); }
|
|
278
|
+
.endorsements .r { color: var(--_derived); }
|
|
279
|
+
.endorsements .when { color: var(--_muted); margin-left: auto; font-size: 11px; }
|
|
274
280
|
|
|
275
|
-
.privacy { margin: 0; font-size: 12px; color: var(--
|
|
276
|
-
.error { margin: 0; font-size: 13px; color: var(--
|
|
281
|
+
.privacy { margin: 0; font-size: 12px; color: var(--_muted); text-align: center; line-height: 1.5; }
|
|
282
|
+
.error { margin: 0; font-size: 13px; color: var(--_accent); font-weight: 500; }
|
|
277
283
|
|
|
278
284
|
/* ----- Footer ----- */
|
|
279
|
-
.foot { display: flex; gap: 10px; justify-content: flex-end; padding: 14px 24px; background: var(--
|
|
285
|
+
.foot { display: flex; gap: 10px; justify-content: flex-end; padding: 14px 24px; background: var(--_bg-2); border-top: 1px solid var(--_border); }
|
|
280
286
|
.btn { font: inherit; font-weight: 600; padding: 9px 16px; border-radius: 10px; border: 1px solid transparent; cursor: pointer; }
|
|
281
|
-
.btn.primary { background: var(--
|
|
282
|
-
.btn.primary:hover:not(:disabled) { background: var(--
|
|
287
|
+
.btn.primary { background: var(--_accent); color: #fff; }
|
|
288
|
+
.btn.primary:hover:not(:disabled) { background: var(--_accent-2); }
|
|
283
289
|
.btn.primary:disabled { opacity: 0.6; cursor: default; }
|
|
284
|
-
.btn.secondary { background: transparent; color: var(--
|
|
285
|
-
.btn.secondary:hover { background: var(--
|
|
290
|
+
.btn.secondary { background: transparent; color: var(--_text); border-color: var(--_border); }
|
|
291
|
+
.btn.secondary:hover { background: var(--_bg-3); }
|
|
286
292
|
`
|
|
287
293
|
|
|
288
294
|
class CloserClickProfile extends HTMLElement {
|