Hy3-new

Running

App Files Files Community

Hy3-new / static /css /_examples.css

ericsqin

add hy3

ad51766 8 days ago

Raw

History Blame Contribute Delete

4.57 kB

	/* ─────────────────────────────────────────────────────────────────────────
	* 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 !important;
	align-items: center;
	justify-content: center;
	overflow: hidden !important;
	box-sizing: border-box !important;

	width: 460px;
	/* 14px font * 1.5 line-height = 21px per line. 2 lines = 42px.
	* + 14px2 padding-y = 28px. + 1px2 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 !important;
	-webkit-line-clamp: 2 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
	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);
	}