Spaces:

Hayeonbang
/

PitchIn

Running on Zero

PitchIn / gradio-embed.css

Match research page styling and support responsive public embedding

d7fa4ed verified about 1 month ago

6.34 kB

/* Match the academic page while retaining Gradio's controls and interaction states. */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;600;650;700&display=swap');

html, body { margin: 0; height: auto !important; min-height: 0 !important; background: #fff !important; }
gradio-app { background: #fff !important; }
#intro, footer { display: none !important; }
/* Reset only the app shell; Gradio also uses .wrap inside its controls. */
.gradio-container,
.gradio-container > main > .wrap,
.gradio-container > main > .wrap > .contain {
  width: 100% !important; max-width: none !important;
  min-height: 0 !important; height: auto !important;
  margin: 0 !important; padding: 0 !important;
}
.gradio-container {
  --font: 'Noto Sans', Arial, Helvetica, sans-serif;
  --body-background-fill: #fff;
  --body-text-color: #303030;
  --body-text-color-subdued: #686868;
  --body-text-size: 14px;
  --background-fill-primary: #fff;
  --background-fill-secondary: #f7f7f8;
  --color-accent: #454545;
  --color-accent-soft: #f2f2f2;
  --primary-50: #fafafa; --primary-100: #f2f2f2; --primary-200: #dedede;
  --primary-300: #c6c6c6; --primary-400: #777; --primary-500: #454545;
  --primary-600: #383838; --primary-700: #303030; --primary-800: #262626;
  --primary-900: #202020; --primary-950: #151515;
  --border-color-primary: #dedede;
  --border-color-accent: #b5b5b5;
  --link-text-color: #3273b5;
  --link-text-color-hover: #205b97;
  --link-text-color-active: #205b97;
  --link-text-color-visited: #3273b5;
  --block-background-fill: #fff;
  --block-border-color: #dedede;
  --block-border-width: 1px;
  --block-label-background-fill: #fff;
  --block-label-border-width: 0px;
  --block-label-shadow: none;
  --block-label-text-color: #454545;
  --block-label-margin: 0px;
  --block-label-padding: 0px;
  --block-label-radius: 0px;
  --block-label-text-size: 13px;
  --block-label-text-weight: 600;
  --block-title-background-fill: #fff;
  --block-title-text-color: #454545;
  --block-title-radius: 0px;
  --block-title-padding: 0px;
  --block-title-text-size: 13px;
  --block-title-text-weight: 600;
  --block-padding: 14px;
  --block-radius: 4px;
  --block-shadow: none;
  --panel-background-fill: #fff;
  --panel-border-color: #dedede;
  --panel-border-width: 0px;
  --layout-gap: 16px;
  --input-background-fill: #fff;
  --input-border-color: #dedede;
  --input-border-color-focus: #3273b5;
  --input-border-width: 1px;
  --input-padding: 11px 12px;
  --input-placeholder-color: #777;
  --input-radius: 4px;
  --input-shadow: none;
  --input-shadow-focus: 0 0 0 2px #d5e8fa;
  --input-text-size: 14px;
  --loader-color: #686868;
  --slider-color: #686868;
  --shadow-drop: none; --shadow-drop-lg: none; --shadow-inset: none;
  --button-border-width: 1px;
  --button-large-radius: 4px;
  --button-large-text-size: 14px;
  --button-large-text-weight: 600;
  --button-large-padding: 10px 16px;
  --button-primary-background-fill: #383838;
  --button-primary-background-fill-hover: #202020;
  --button-primary-border-color: #383838;
  --button-primary-border-color-hover: #202020;
  --button-primary-text-color: #fff;
  --button-primary-shadow: none;
  --button-primary-shadow-hover: none;
  --button-primary-shadow-active: none;
  --button-secondary-background-fill: #fff;
  --button-secondary-background-fill-hover: #f2f2f2;
  --button-secondary-border-color: #dedede;
  --button-secondary-border-color-hover: #b5b5b5;
  --button-secondary-text-color: #454545;
  --button-secondary-shadow: none;
  --button-secondary-shadow-hover: none;
  --button-secondary-shadow-active: none;
  color: #303030 !important;
  font-family: var(--font) !important;
}
.gradio-container main { flex: none !important; width: 100% !important; padding: 0 !important; }
.gradio-container .app { padding: 0 !important; }
.gradio-container button, .gradio-container textarea, .gradio-container input { font-family: var(--font) !important; }
.gradio-container [data-testid="block-label"] { color: #454545 !important; background: #fff !important; }
.gradio-container .block:has(> .audio-container) {
  border-style: solid !important;
  padding: 14px;
}
.gradio-container .block:has(> .audio-container) > [data-testid="block-label"] {
  position: static;
  margin: 0 0 10px;
  padding: 0;
}
.gradio-container .block:has(> .audio-container) > [data-testid="block-label"] > span { display: none; }
.gradio-container .audio-container > button[aria-dropeffect="copy"] {
  height: auto !important;
  border: 1px dashed #cfcfcf;
  border-radius: 4px;
  background: #fafafa;
  color: #686868 !important;
}
.gradio-container .audio-container > button[aria-dropeffect="copy"] > .wrap {
  width: 100%;
  min-height: 170px;
  height: auto;
  margin: 0;
  padding: 22px 14px;
  box-sizing: border-box;
  justify-content: center;
}
.gradio-container .audio-container > [data-testid="source-select"] {
  flex: none;
  height: auto;
  justify-content: flex-start;
  gap: 8px;
  border-top: 0;
  padding-top: 10px;
}
.gradio-container [data-testid="source-select"] button.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  width: auto;
  height: auto;
  margin: 0;
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: 4px;
  color: #686868;
}
.gradio-container [data-testid="source-select"] button.icon svg { width: 16px; height: 16px; }
.gradio-container [data-testid="source-select"] button.icon::after { content: attr(aria-label); font-size: 12px; }
.gradio-container [data-testid="source-select"] button.icon.selected { background: #f2f2f2; border-color: #dedede; color: #303030; }
.gradio-container [data-testid="source-select"] button.icon:hover { background: #f2f2f2; }
.gradio-container textarea { line-height: 1.75 !important; }
.gradio-container button.gallery-item { border: 1px solid #dedede; border-radius: 4px; box-shadow: none; font-size: 12px; }
.gradio-container button:focus-visible { outline: 2px solid #3273b5; outline-offset: 2px; }
#answer textarea { font-size: 14px !important; color: #303030 !important; opacity: 1; -webkit-text-fill-color: #303030; }
@media (max-width: 680px) {
  .gradio-container { --layout-gap: 14px; --block-padding: 12px; }
  #answer textarea { height: 240px !important; min-height: 240px !important; overflow-y: auto !important; }
}

	/* Match the academic page while retaining Gradio's controls and interaction states. */
	@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;600;650;700&display=swap');

	html, body { margin: 0; height: auto !important; min-height: 0 !important; background: #fff !important; }
	gradio-app { background: #fff !important; }
	#intro, footer { display: none !important; }
	/* Reset only the app shell; Gradio also uses .wrap inside its controls. */
	.gradio-container,
	.gradio-container > main > .wrap,
	.gradio-container > main > .wrap > .contain {
	width: 100% !important; max-width: none !important;
	min-height: 0 !important; height: auto !important;
	margin: 0 !important; padding: 0 !important;
	}
	.gradio-container {
	--font: 'Noto Sans', Arial, Helvetica, sans-serif;
	--body-background-fill: #fff;
	--body-text-color: #303030;
	--body-text-color-subdued: #686868;
	--body-text-size: 14px;
	--background-fill-primary: #fff;
	--background-fill-secondary: #f7f7f8;
	--color-accent: #454545;
	--color-accent-soft: #f2f2f2;
	--primary-50: #fafafa; --primary-100: #f2f2f2; --primary-200: #dedede;
	--primary-300: #c6c6c6; --primary-400: #777; --primary-500: #454545;
	--primary-600: #383838; --primary-700: #303030; --primary-800: #262626;
	--primary-900: #202020; --primary-950: #151515;
	--border-color-primary: #dedede;
	--border-color-accent: #b5b5b5;
	--link-text-color: #3273b5;
	--link-text-color-hover: #205b97;
	--link-text-color-active: #205b97;
	--link-text-color-visited: #3273b5;
	--block-background-fill: #fff;
	--block-border-color: #dedede;
	--block-border-width: 1px;
	--block-label-background-fill: #fff;
	--block-label-border-width: 0px;
	--block-label-shadow: none;
	--block-label-text-color: #454545;
	--block-label-margin: 0px;
	--block-label-padding: 0px;
	--block-label-radius: 0px;
	--block-label-text-size: 13px;
	--block-label-text-weight: 600;
	--block-title-background-fill: #fff;
	--block-title-text-color: #454545;
	--block-title-radius: 0px;
	--block-title-padding: 0px;
	--block-title-text-size: 13px;
	--block-title-text-weight: 600;
	--block-padding: 14px;
	--block-radius: 4px;
	--block-shadow: none;
	--panel-background-fill: #fff;
	--panel-border-color: #dedede;
	--panel-border-width: 0px;
	--layout-gap: 16px;
	--input-background-fill: #fff;
	--input-border-color: #dedede;
	--input-border-color-focus: #3273b5;
	--input-border-width: 1px;
	--input-padding: 11px 12px;
	--input-placeholder-color: #777;
	--input-radius: 4px;
	--input-shadow: none;
	--input-shadow-focus: 0 0 0 2px #d5e8fa;
	--input-text-size: 14px;
	--loader-color: #686868;
	--slider-color: #686868;
	--shadow-drop: none; --shadow-drop-lg: none; --shadow-inset: none;
	--button-border-width: 1px;
	--button-large-radius: 4px;
	--button-large-text-size: 14px;
	--button-large-text-weight: 600;
	--button-large-padding: 10px 16px;
	--button-primary-background-fill: #383838;
	--button-primary-background-fill-hover: #202020;
	--button-primary-border-color: #383838;
	--button-primary-border-color-hover: #202020;
	--button-primary-text-color: #fff;
	--button-primary-shadow: none;
	--button-primary-shadow-hover: none;
	--button-primary-shadow-active: none;
	--button-secondary-background-fill: #fff;
	--button-secondary-background-fill-hover: #f2f2f2;
	--button-secondary-border-color: #dedede;
	--button-secondary-border-color-hover: #b5b5b5;
	--button-secondary-text-color: #454545;
	--button-secondary-shadow: none;
	--button-secondary-shadow-hover: none;
	--button-secondary-shadow-active: none;
	color: #303030 !important;
	font-family: var(--font) !important;
	}
	.gradio-container main { flex: none !important; width: 100% !important; padding: 0 !important; }
	.gradio-container .app { padding: 0 !important; }
	.gradio-container button, .gradio-container textarea, .gradio-container input { font-family: var(--font) !important; }
	.gradio-container [data-testid="block-label"] { color: #454545 !important; background: #fff !important; }
	.gradio-container .block:has(> .audio-container) {
	border-style: solid !important;
	padding: 14px;
	}
	.gradio-container .block:has(> .audio-container) > [data-testid="block-label"] {
	position: static;
	margin: 0 0 10px;
	padding: 0;
	}
	.gradio-container .block:has(> .audio-container) > [data-testid="block-label"] > span { display: none; }
	.gradio-container .audio-container > button[aria-dropeffect="copy"] {
	height: auto !important;
	border: 1px dashed #cfcfcf;
	border-radius: 4px;
	background: #fafafa;
	color: #686868 !important;
	}
	.gradio-container .audio-container > button[aria-dropeffect="copy"] > .wrap {
	width: 100%;
	min-height: 170px;
	height: auto;
	margin: 0;
	padding: 22px 14px;
	box-sizing: border-box;
	justify-content: center;
	}
	.gradio-container .audio-container > [data-testid="source-select"] {
	flex: none;
	height: auto;
	justify-content: flex-start;
	gap: 8px;
	border-top: 0;
	padding-top: 10px;
	}
	.gradio-container [data-testid="source-select"] button.icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 36px;
	width: auto;
	height: auto;
	margin: 0;
	padding: 6px 10px;
	border: 1px solid transparent;
	border-radius: 4px;
	color: #686868;
	}
	.gradio-container [data-testid="source-select"] button.icon svg { width: 16px; height: 16px; }
	.gradio-container [data-testid="source-select"] button.icon::after { content: attr(aria-label); font-size: 12px; }
	.gradio-container [data-testid="source-select"] button.icon.selected { background: #f2f2f2; border-color: #dedede; color: #303030; }
	.gradio-container [data-testid="source-select"] button.icon:hover { background: #f2f2f2; }
	.gradio-container textarea { line-height: 1.75 !important; }
	.gradio-container button.gallery-item { border: 1px solid #dedede; border-radius: 4px; box-shadow: none; font-size: 12px; }
	.gradio-container button:focus-visible { outline: 2px solid #3273b5; outline-offset: 2px; }
	#answer textarea { font-size: 14px !important; color: #303030 !important; opacity: 1; -webkit-text-fill-color: #303030; }
	@media (max-width: 680px) {
	.gradio-container { --layout-gap: 14px; --block-padding: 12px; }
	#answer textarea { height: 240px !important; min-height: 240px !important; overflow-y: auto !important; }
	}