Spaces:
Running
Running
| /* ───────────────────────────────────────────────────────────────────────── | |
| * Empty-state "What can I help you with?" overlay. | |
| * Lives outside the Gradio container (appended to <body>) so we don't need | |
| * !important to win against framework styles. | |
| * ───────────────────────────────────────────────────────────────────────── */ | |
| #examples-overlay { | |
| position: fixed; | |
| left: 0; right: 0; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| z-index: 100; | |
| background: var(--hy-bg); | |
| pointer-events: none; | |
| overflow-y: auto; | |
| } | |
| .examples-wrapper { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| margin: auto; | |
| pointer-events: auto; | |
| padding: 40px 20px; | |
| } | |
| .examples-heading { | |
| font-size: 22px; | |
| font-weight: 600; | |
| color: var(--hy-text); | |
| margin: 0 0 28px; | |
| letter-spacing: -0.01em; | |
| } | |
| /* 1-2-1 "diamond" layout for exactly 4 example cards. | |
| * row 1: card #1 (centered, spans both columns) | |
| * row 2: card #2 (right-aligned in left col) | card #3 (left-aligned in right col) | |
| * row 3: card #4 (centered, spans both columns) | |
| * Using CSS grid with explicit nth-child placements rather than flex- | |
| * wrap, because flex-wrap on equal-width children can only produce | |
| * 1xN, 2x2, or 4x1 — never 1-2-1. */ | |
| .examples-grid { | |
| display: grid; | |
| grid-template-columns: minmax(0, 480px) minmax(0, 480px); | |
| column-gap: 20px; | |
| row-gap: 14px; | |
| justify-content: center; | |
| width: min(1020px, 100%); | |
| } | |
| .example-btn:nth-child(1), | |
| .example-btn:nth-child(4) { | |
| grid-column: 1 / span 2; | |
| justify-self: center; | |
| } | |
| .example-btn:nth-child(2) { | |
| grid-column: 1; | |
| justify-self: end; | |
| } | |
| .example-btn:nth-child(3) { | |
| grid-column: 2; | |
| justify-self: start; | |
| } | |
| .example-btn { | |
| /* Outer card: flex container that vertically + horizontally centers | |
| * its single inner ``.example-btn-text`` child. We CANNOT also be | |
| * a ``-webkit-box`` here (that's the inner element's job, see | |
| * below) — line-clamp and flex centering need separate elements. */ | |
| display: flex ; | |
| align-items: center; | |
| justify-content: center; | |
| overflow: hidden ; | |
| box-sizing: border-box ; | |
| width: 460px; | |
| /* 14px font * 1.5 line-height = 21px per line. 2 lines = 42px. | |
| * + 14px*2 padding-y = 28px. + 1px*2 border = 2px. Total 72px. */ | |
| height: 72px; | |
| background: var(--hy-bg); | |
| border: 1px solid var(--hy-border); | |
| border-radius: 18px; | |
| padding: 14px 20px; | |
| font-size: 14px; | |
| line-height: 1.5; | |
| color: var(--hy-text); | |
| cursor: pointer; | |
| transition: transform 0.15s ease, background 0.2s ease, | |
| border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease; | |
| font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", | |
| "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, | |
| Arial, sans-serif; | |
| user-select: none; | |
| text-align: center; | |
| } | |
| /* Inner text element: owns the 2-line clamp + auto ellipsis. The | |
| * ``!important`` triplet defends against framework-level resets that | |
| * would otherwise silently change ``display`` and let a 3rd line | |
| * bleed into view. */ | |
| .example-btn-text { | |
| display: -webkit-box ; | |
| -webkit-line-clamp: 2 ; | |
| -webkit-box-orient: vertical ; | |
| overflow: hidden ; | |
| word-break: break-word; | |
| width: 100%; | |
| text-align: center; | |
| } | |
| /* On narrow screens the diamond would overflow horizontally — collapse | |
| * to a single centered column instead. */ | |
| @media (max-width: 1020px) { | |
| .examples-grid { | |
| grid-template-columns: minmax(0, 1fr); | |
| } | |
| .example-btn:nth-child(1), | |
| .example-btn:nth-child(2), | |
| .example-btn:nth-child(3), | |
| .example-btn:nth-child(4) { | |
| grid-column: 1; | |
| justify-self: center; | |
| } | |
| .example-btn { | |
| width: 100%; | |
| max-width: 520px; | |
| } | |
| } | |
| .example-btn:hover { | |
| background: var(--hy-bg-muted); | |
| border-color: var(--hy-border-strong); | |
| color: var(--hy-text-strong); | |
| box-shadow: var(--hy-shadow); | |
| transform: translateY(-1px); | |
| } | |
| .dark .example-btn:hover { | |
| border-color: rgba(107, 159, 255, 0.35); | |
| box-shadow: 0 0 8px rgba(107, 159, 255, 0.08); | |
| } | |