Hugging Face's logo

Spaces:
UtopiaIA
/
elffuss-code
Running

App Files Community
1
elffuss-code
File size: 9,928 Bytes
4bd8362
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
/* Nivel 2 de extensiones: avisos, diálogos, selector y cuadro de texto que
   piden las extensiones con código, y los diálogos de Code que las vigilan
   (abrir una dirección, vista previa, peticiones del agente). Solo se carga
   en modo extensiones y todo cuelga de #x2-* / .x2-*: nada de esto toca las
   reglas de Code ni entra CSS de VS Code. */

#x2-toasts {
  position: fixed; right: 12px; bottom: 34px; z-index: 160;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
  width: min(92vw, 420px); pointer-events: none;
}
.x2-toast {
  pointer-events: auto; width: 100%; background: var(--bg3, #161a24); color: var(--fg, #eae8f2);
  border: 1px solid var(--line, #20252c); border-left: 3px solid var(--accent2, #8272ff);
  border-radius: 9px; padding: 9px 10px 8px 12px; box-shadow: 0 10px 30px rgba(0,0,0,.45);
  font-size: .8rem; line-height: 1.4;
}
.x2-toast.x2-warning { border-left-color: #e5a53a; }
.x2-toast.x2-error { border-left-color: #ff6b8b; }
.x2-toast-from { font-size: .7rem; color: var(--muted, #8b929c); margin-bottom: 3px; }
.x2-toast-text { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 9.5em; overflow: auto; }
.x2-toast-buttons { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; margin-top: 7px; }
.x2-toast-close { background: none; border: none; color: var(--muted, #8b929c); font-size: 1rem; cursor: pointer; padding: 0 4px; }
.x2-toast-close:hover { color: var(--fg, #eae8f2); }

.x2-btn {
  background: none; border: 1px solid var(--line, #20252c); color: var(--fg, #eae8f2);
  border-radius: 6px; padding: 5px 11px; font-size: .76rem; cursor: pointer; white-space: nowrap;
}
.x2-btn:hover:not([aria-disabled="true"]) { border-color: var(--accent2, #8272ff); }
/* texto oscuro sobre el degradado de Code: 8,1:1 en el dorado y 4,8:1 en el violeta (WCAG 1.4.3 pide 4,5:1).
   El violeta es el --accent2 de Code (misma saturación) un poco más claro: con el
   --accent2 tal cual el texto oscuro se queda en 4,0:1 y el blanco en 2,4:1 sobre el dorado. */
.x2-btn.x2-primary { background: linear-gradient(135deg, var(--accent, #c8a06a), #7c72ce); border: none; color: #0b0c12; font-weight: 600; }
.x2-btn[aria-disabled="true"] { opacity: .55; cursor: default; }
.x2-btn:focus-visible, .x2-toast-close:focus-visible { outline: 2px solid var(--accent2, #8272ff); outline-offset: 2px; }

.x2-backdrop {
  position: fixed; inset: 0; z-index: 170; background: rgba(5,6,10,.55);
  display: flex; align-items: flex-start; justify-content: center; padding: 10vh 8px 8px;
}
.x2-modal {
  width: min(92vw, 560px); max-height: 80vh; overflow: auto; background: var(--bg3, #161a24); color: var(--fg, #eae8f2);
  border: 1px solid var(--accent2, #8272ff); border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.6); padding: 14px 16px 12px;
}
.x2-modal-title { margin: 0 0 8px; font-size: .95rem; }
.x2-modal-text { margin: 0 0 8px; font-size: .82rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.x2-modal-text.x2-warning { color: #f0c27a; }
.x2-modal-text.x2-error { color: #ff9db1; }
.x2-modal-detail { margin: 0 0 8px; font-size: .76rem; color: var(--muted, #8b929c); white-space: pre-wrap; overflow-wrap: anywhere; }
.x2-modal-buttons { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; margin-top: 10px; }
.x2-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem; background: var(--bg, #090a11);
  border: 1px solid var(--line, #20252c); border-radius: 6px; padding: 8px 10px; margin: 0 0 8px;
  white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-all; user-select: all;
}
.x2-code .x2-cc { color: #ff9db1; background: rgba(255,107,139,.14); border-radius: 3px; padding: 0 2px; }
/* una dirección o una orden larga no empuja el título fuera: se desplaza ella */
.x2-code { max-height: min(32vh, 14em); overflow: auto; }
.x2-code:focus-visible { outline: 2px solid var(--accent2, #8272ff); outline-offset: 1px; }
.x2-sizes { margin: 0 0 8px 18px; padding: 0; font-size: .78rem; line-height: 1.45; }
.x2-site { font-size: .8rem; margin: 0 0 6px; }
.x2-site b { overflow-wrap: anywhere; }
.x2-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.x2-note { font-size: .76rem; color: #f0c27a; margin: 0 0 6px; }

.x2-pick {
  position: fixed; top: 52px; left: 50%; transform: translateX(-50%); z-index: 165;
  width: min(92vw, 560px); background: var(--bg3, #161a24); color: var(--fg, #eae8f2);
  border: 1px solid var(--accent2, #8272ff); border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.6); overflow: hidden;
}
.x2-pick-title { font-size: .72rem; color: var(--muted, #8b929c); padding: 8px 14px 0; }
.x2-pick-input { width: 100%; background: var(--bg, #090a11); border: none; border-bottom: 1px solid var(--line, #20252c); color: var(--fg, #eae8f2); padding: 10px 14px; font-size: .9rem; outline: none; }
.x2-pick-list { max-height: 45vh; overflow-y: auto; padding: 4px; }
.x2-pick-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; padding: 6px 10px; border-radius: 6px; cursor: pointer; font-size: .82rem; }
.x2-pick-item.sel, .x2-pick-item:hover { background: #7c5cff33; }
.x2-pick-label { font-weight: 500; overflow-wrap: anywhere; }
.x2-pick-desc { color: var(--muted, #8b929c); font-size: .74rem; overflow-wrap: anywhere; }
.x2-pick-detail { flex-basis: 100%; color: var(--muted, #8b929c); font-size: .72rem; overflow-wrap: anywhere; }
.x2-pick-sep { font-size: .68rem; color: var(--muted, #8b929c); padding: 6px 10px 2px; text-transform: uppercase; letter-spacing: .04em; }
.x2-pick-empty { padding: 10px 12px; color: var(--muted, #8b929c); font-size: .8rem; }
.x2-check { width: 1.1em; }
.x2-pick-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 6px 10px 8px; border-top: 1px solid var(--line, #20252c); }
.x2-pick-foot [hidden] { display: none; }
.x2-input-prompt { font-size: .76rem; color: var(--muted, #8b929c); padding: 6px 14px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.x2-input-error { font-size: .76rem; color: #ff9db1; padding: 4px 14px 0; overflow-wrap: anywhere; }
.x2-input-error[hidden] { display: none; }

.x2-progress { margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 50vw; }

@media (max-width: 560px) {
  /* arriba, bajo la barra de pestañas: abajo taparía el prompt del chat */
  #x2-toasts { right: 4vw; left: 4vw; width: auto; bottom: auto; top: 46px; }
  .x2-backdrop { padding-top: 6vh; }
  .x2-modal-buttons { justify-content: stretch; }
  .x2-modal-buttons .x2-btn { flex: 1 1 auto; }
  .x2-progress { max-width: 40vw; }
}

/* Panel de extensiones: qué funcionará de cada una y los mandos de las que
   traen código (js/ext2/manage.js carga esta hoja al cargarse). */
.ext-x2-lines { margin-top: 3px; }
.ext-x2-runs, .ext-x2-tested { font-size: .72rem; color: #9ecbff; margin-top: 3px; }
.ext-x2-untested { font-size: .72rem; color: var(--muted); margin-top: 3px; }
.ext-actions .ext-install-code { background: none; border: 1px solid var(--accent2); color: var(--fg); }
.ext-x2 { margin-top: 7px; padding: 7px 9px; border: 1px dashed var(--line); border-radius: 8px; font-size: .74rem; }
.ext-x2-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: space-between; }
.ext-x2-state { color: #9ecbff; overflow-wrap: anywhere; }
.ext-x2 button { font-size: .72rem; padding: 4px 10px; border-radius: 6px; cursor: pointer; background: none; border: 1px solid var(--line); color: var(--fg); }
.ext-x2 button.ext-x2-run.on { border-color: var(--accent2); background: rgba(130,114,255,.18); }
.ext-x2 button[aria-disabled="true"] { opacity: .6; cursor: default; }
.ext-x2 details { margin-top: 6px; }
.ext-x2 summary { cursor: pointer; }
.ext-x2-json { display: block; width: 100%; margin: 5px 0; min-height: 70px; resize: vertical; background: var(--bg); color: var(--fg); border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; font: .74rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.ext-x2-msg { margin-top: 4px; color: #9ecbff; overflow-wrap: anywhere; }
.ext-x2-msg[role="alert"] { color: #ff9db1; }
.ext-x2-cmds { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
.ext-x2-cmds li { display: flex; justify-content: space-between; align-items: center; gap: 8px; overflow-wrap: anywhere; }
.ext-x2-fmtrow { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 4px; }
.ext-x2-fmtrow select { background: var(--bg3); color: var(--fg); border: 1px solid var(--line); border-radius: 6px; padding: 2px 4px; font-size: .72rem; max-width: 55%; }
.ext-x2-keys ul { margin: 4px 0 0 18px; padding: 0; color: var(--muted); overflow-wrap: anywhere; }
.ext-x2-log pre { margin: 4px 0 0; max-height: 160px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .68rem; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; }
.ext-x2-runtime { margin: 2px 0 4px; font-size: .74rem; }
.ext-x2-blocked { color: #f0c27a; }
.ext-x2-unblock { font-size: .72rem; padding: 2px 8px; border-radius: 6px; cursor: pointer; background: none; border: 1px solid var(--line); color: var(--fg); }
.ext-x2-unblock:focus-visible { outline: 2px solid var(--accent2); outline-offset: 2px; }
.ext-x2-alloff { margin: 0 0 8px; font-size: .72rem; padding: 4px 10px; border-radius: 6px; cursor: pointer; background: none; border: 1px solid var(--line); color: var(--muted); }
.ext-x2 button:focus-visible, .ext-x2 summary:focus-visible, .ext-x2-json:focus-visible, .ext-x2-alloff:focus-visible { outline: 2px solid var(--accent2); outline-offset: 2px; }
@media (max-width: 560px) {
  .ext-x2-fmtrow { flex-direction: column; align-items: stretch; }
  .ext-x2-fmtrow select { max-width: 100%; }
}