Spaces:
Running
Running
| /* ───────────────────────────────────────────────────────────────────────── | |
| * Floating panels: tool-call input area + HTML preview modal. | |
| * | |
| * #tool-area lives inside the Gradio tree, so it still needs !important to | |
| * win the cascade against framework styles. | |
| * | |
| * .html-preview-* lives directly under <body> (appended by static/app.js) | |
| * so it can use plain specificity. | |
| * ───────────────────────────────────────────────────────────────────────── */ | |
| /* ── tool area (inside Gradio) ─────────────────────────────────────────── */ | |
| #tool-area { | |
| position: fixed ; | |
| bottom: 120px ; | |
| left: 50% ; | |
| transform: translateX(-50%) ; | |
| width: min(600px, 55%) ; | |
| z-index: 999 ; | |
| background: var(--hy-bg) ; | |
| border: 1px solid var(--hy-border) ; | |
| border-radius: 12px ; | |
| padding: 16px ; | |
| box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08) ; | |
| } | |
| .dark #tool-area { | |
| background: var(--hy-bg-soft) ; | |
| border-color: var(--hy-border) ; | |
| box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5) ; | |
| } | |
| .dark #tool-area *:not(button):not(button *) { | |
| background: transparent ; | |
| border-color: var(--hy-border-strong) ; | |
| } | |
| .dark #tool-area textarea, | |
| .dark #tool-area input[type="text"] { | |
| background: var(--hy-bg-muted) ; | |
| color: var(--hy-text) ; | |
| border: 1px solid var(--hy-border-strong) ; | |
| } | |
| .dark #tool-area textarea::placeholder, | |
| .dark #tool-area input[type="text"]::placeholder { | |
| color: var(--hy-text-muted) ; | |
| } | |
| /* ── Code-block card (header w/ language label + copy button) ────────── | |
| * | |
| * Each fenced code block is wrapped by static/app.js: | |
| * | |
| * <div class="hy-codeblock"> | |
| * <div class="hy-codeblock-header"> | |
| * <span class="hy-codeblock-lang">python</span> | |
| * <button class="code-copy-btn">…</button> | |
| * </div> | |
| * <pre><code class="hljs language-…">…</code></pre> | |
| * </div> | |
| * | |
| * The wrapper owns the rounded border and background so the inner <pre> | |
| * can be flush with the header (no double border / gap). */ | |
| #hy-chat .hy-codeblock { | |
| margin: 0.9em 0; | |
| border: 1px solid var(--hy-border); | |
| border-radius: 10px; | |
| overflow: hidden; | |
| background: #f6f7f9; | |
| } | |
| .dark #hy-chat .hy-codeblock { | |
| border-color: #2a2a2a; | |
| background: #0f1115; | |
| } | |
| #hy-chat .hy-codeblock-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 12px; | |
| padding: 6px 8px 6px 14px; | |
| background: #ececef; | |
| border-bottom: 1px solid var(--hy-border); | |
| font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", | |
| "Segoe UI", Roboto, sans-serif; | |
| font-size: 12px; | |
| line-height: 1; | |
| color: #6b6b6b; | |
| user-select: none; | |
| } | |
| .dark #hy-chat .hy-codeblock-header { | |
| background: #1a1d22; | |
| border-bottom-color: #262a30; | |
| color: #9ca3af; | |
| } | |
| #hy-chat .hy-codeblock-lang { | |
| text-transform: lowercase; | |
| letter-spacing: 0.02em; | |
| font-weight: 500; | |
| } | |
| #hy-chat .hy-codeblock-lang:empty::before { | |
| content: "text"; | |
| opacity: 0.7; | |
| } | |
| /* Strip the standalone <pre> chrome from _misc.css when nested in a | |
| * .hy-codeblock — the wrapper provides the border/radius/background. */ | |
| #hy-chat .hy-codeblock pre { | |
| margin: 0 ; | |
| border: none ; | |
| border-radius: 0 ; | |
| background: transparent ; | |
| padding: 12px 16px ; | |
| } | |
| /* Copy button — lives in the header, simple icon button. */ | |
| #hy-chat .hy-codeblock-header .code-copy-btn { | |
| flex-shrink: 0; | |
| width: 26px; | |
| height: 26px; | |
| padding: 0; | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: inherit; | |
| background: transparent; | |
| border: none; | |
| border-radius: 6px; | |
| cursor: pointer; | |
| transition: background 0.15s ease, color 0.15s ease; | |
| } | |
| #hy-chat .hy-codeblock-header .code-copy-btn svg { | |
| display: block; | |
| width: 14px; | |
| height: 14px; | |
| } | |
| #hy-chat .hy-codeblock-header .code-copy-btn:hover { | |
| background: rgba(0, 0, 0, 0.06); | |
| color: #111; | |
| } | |
| #hy-chat .hy-codeblock-header .code-copy-btn:focus { | |
| outline: none; | |
| } | |
| #hy-chat .hy-codeblock-header .code-copy-btn:focus-visible { | |
| outline: 2px solid var(--hy-accent, #2563eb); | |
| outline-offset: 1px; | |
| } | |
| #hy-chat .hy-codeblock-header .code-copy-btn.copied, | |
| #hy-chat .hy-codeblock-header .code-copy-btn.copied:hover { | |
| color: #0a7f3f; | |
| background: transparent; | |
| } | |
| .dark #hy-chat .hy-codeblock-header .code-copy-btn:hover { | |
| background: rgba(255, 255, 255, 0.08); | |
| color: #f5f5f5; | |
| } | |
| .dark #hy-chat .hy-codeblock-header .code-copy-btn.copied, | |
| .dark #hy-chat .hy-codeblock-header .code-copy-btn.copied:hover { | |
| color: #4ade80; | |
| background: transparent; | |
| } | |
| /* ── HTML preview play button (under code blocks) ─────────────────────── */ | |
| .html-preview-btn { | |
| display: inline-flex; | |
| align-items: center; | |
| background: none; | |
| border: none; | |
| padding: 2px 0; | |
| margin: 2px 0 6px; | |
| cursor: pointer; | |
| font-size: 0; | |
| line-height: 1; | |
| transition: opacity 0.15s ease; | |
| } | |
| .html-preview-btn::before { | |
| content: "▶ html preview"; | |
| font-size: 12px; | |
| color: var(--hy-accent); | |
| font-weight: 400; | |
| font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif; | |
| } | |
| .html-preview-btn:hover { | |
| opacity: 0.7; | |
| } | |
| /* ── HTML preview modal (outside Gradio, under <body>) ────────────────── */ | |
| .html-preview-overlay { | |
| position: fixed; | |
| inset: 0; | |
| z-index: 10000; | |
| background: rgba(0, 0, 0, 0.5); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| animation: fadeIn 0.2s ease; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| .html-preview-modal { | |
| width: 90vw; | |
| height: 85vh; | |
| background: var(--hy-bg); | |
| border-radius: 12px; | |
| box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2); | |
| display: flex; | |
| flex-direction: column; | |
| overflow: hidden; | |
| animation: modalSlideUp 0.25s ease; | |
| } | |
| .dark .html-preview-modal { | |
| background: var(--hy-bg-soft); | |
| box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); | |
| } | |
| @keyframes modalSlideUp { | |
| from { transform: translateY(30px); opacity: 0; } | |
| to { transform: translateY(0); opacity: 1; } | |
| } | |
| .html-preview-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 12px 20px; | |
| border-bottom: 1px solid var(--hy-border); | |
| background: var(--hy-bg-soft); | |
| flex-shrink: 0; | |
| } | |
| .dark .html-preview-header { | |
| background: var(--hy-bg-muted); | |
| } | |
| .html-preview-title { | |
| font-size: 14px; | |
| font-weight: 600; | |
| color: var(--hy-text); | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .html-preview-title::before { | |
| content: "⬡"; | |
| color: var(--hy-accent); | |
| } | |
| .html-preview-close { | |
| background: none; | |
| border: none; | |
| font-size: 20px; | |
| color: var(--hy-text-muted); | |
| cursor: pointer; | |
| padding: 4px 8px; | |
| border-radius: 6px; | |
| line-height: 1; | |
| transition: all 0.15s ease; | |
| } | |
| .html-preview-close:hover { | |
| background: #fee2e2; | |
| color: #dc2626; | |
| } | |
| .html-preview-iframe { | |
| flex: 1; | |
| border: none; | |
| width: 100%; | |
| background: var(--hy-bg); | |
| } | |