Spaces:

htgudi
/

radionAI

Runtime error

radionAI / style.css

deploy 6bcac61

5bb3295 about 1 month ago

6.1 kB

/* ============================================================================
   radionAI — YashTech Ltd. AI Labs
   Translucent "glass" surface, light and dark, on Apple's system font stack.
   Loaded by app.py via gr.Blocks(css=...). Everything is driven by the two
   variable blocks below, so a re-skin is a colour edit, not a CSS rewrite.
   ========================================================================= */

:root,
.gradio-container {
  --glass-bg: rgba(255, 255, 255, 0.62);
  --glass-bg-strong: rgba(255, 255, 255, 0.86);
  --glass-border: rgba(0, 0, 0, 0.08);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  --glass-blur: 22px;
  --ink: #1d1d1f;
  --ink-soft: #6e6e73;
  --accent: #0071e3;
  --danger: #d70015;
  --page: linear-gradient(160deg, #f5f5f7 0%, #e8eef5 55%, #eef1f6 100%);
  --radius: 18px;
}

.dark,
.dark .gradio-container {
  --glass-bg: rgba(28, 28, 30, 0.58);
  --glass-bg-strong: rgba(28, 28, 30, 0.84);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  --ink: #f5f5f7;
  --ink-soft: #a1a1a6;
  --accent: #0a84ff;
  --danger: #ff453a;
  --page: linear-gradient(160deg, #000000 0%, #14161a 55%, #1c1c1e 100%);
}

body,
.gradio-container {
  background: var(--page) fixed !important;
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
.prose h1,
.prose h2 {
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--ink);
}

/* ---------------------------------------------------------------- surfaces */

/* Blur is applied ONLY to the outer chrome. An element with backdrop-filter
   becomes a containing block and a new stacking context, so any dropdown,
   tooltip or modal rendered inside it as an overlay gets clipped or painted
   underneath — which looks exactly like "the dropdown won't open". Inner
   blocks get the translucency without the filter. */
.gradio-container .block,
.gradio-container .form,
.gradio-container .panel {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--glass-shadow);
}

#ct-header,
#ct-admin-card {
  background: var(--glass-bg) !important;
  backdrop-filter: saturate(180%) blur(var(--glass-blur));
  -webkit-backdrop-filter: saturate(180%) blur(var(--glass-blur));
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--glass-shadow);
}

/* ---------------------------------------------------------------- overlays */

/* The option list must escape its parent and paint above everything. */
.gradio-container .block:has(ul.options),
.gradio-container .form:has(ul.options),
.gradio-container .wrap:has(ul.options) {
  overflow: visible !important;
}

ul.options,
.gradio-container ul.options {
  background: var(--glass-bg-strong) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 12px !important;
  box-shadow: var(--glass-shadow);
  color: var(--ink) !important;
  z-index: 2000 !important;
}

ul.options li.item {
  color: var(--ink) !important;
  border-radius: 8px;
}

ul.options li.item:hover,
ul.options li.item.selected,
ul.options li.item.active {
  background: color-mix(in srgb, var(--accent) 18%, transparent) !important;
}

.gradio-container .tabs>.tab-nav {
  background: var(--glass-bg-strong);
  backdrop-filter: saturate(180%) blur(var(--glass-blur));
  -webkit-backdrop-filter: saturate(180%) blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  padding: 4px;
  gap: 2px;
}

.gradio-container .tabs>.tab-nav>button {
  border: none !important;
  border-radius: 999px !important;
  color: var(--ink-soft);
  font-weight: 500;
  transition: background 0.18s ease, color 0.18s ease;
}

.gradio-container .tabs>.tab-nav>button.selected {
  background: var(--glass-bg-strong);
  color: var(--ink);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

/* ---------------------------------------------------------------- controls */

.gradio-container button.primary {
  background: var(--accent) !important;
  border: none !important;
  border-radius: 12px !important;
  font-weight: 590;
  box-shadow: 0 2px 10px rgba(0, 113, 227, 0.3);
}

.gradio-container button.secondary {
  background: var(--glass-bg-strong) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 12px !important;
  color: var(--ink) !important;
}

.gradio-container input,
.gradio-container textarea,
.gradio-container select {
  border-radius: 12px !important;
  background: var(--glass-bg-strong) !important;
  color: var(--ink) !important;
  border: 1px solid var(--glass-border) !important;
}

/* ---------------------------------------------------------------- header */

#ct-header {
  padding: 14px 20px;
  margin-bottom: 12px;
}

#ct-identity {
  color: var(--ink-soft);
  font-size: 0.92rem;
  font-weight: 500;
}

#ct-theme-toggle button {
  min-width: 44px;
  border-radius: 999px !important;
}

#ct-disclaimer {
  border-left: 3px solid var(--danger);
  padding-left: 12px;
  color: var(--ink-soft);
  font-size: 0.86rem;
}

/* Disabled tabs are hidden outright rather than shown greyed: a radiographer
   should not be offered a task the department has switched off. */
.ct-hidden {
  display: none !important;
}

/* Print: strip the glass so a report prints black on white. */
@media print {

  body,
  .gradio-container,
  .gradio-container .block {
    background: #fff !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    color: #000 !important;
  }

  .tabs>.tab-nav,
  #ct-header,
  button {
    display: none !important;
  }
}

@media (prefers-reduced-transparency: reduce) {

  .gradio-container .block,
  #ct-header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--glass-bg-strong) !important;
  }
}

	/* ============================================================================
	radionAI — YashTech Ltd. AI Labs
	Translucent "glass" surface, light and dark, on Apple's system font stack.
	Loaded by app.py via gr.Blocks(css=...). Everything is driven by the two
	variable blocks below, so a re-skin is a colour edit, not a CSS rewrite.
	========================================================================= */

	:root,
	.gradio-container {
	--glass-bg: rgba(255, 255, 255, 0.62);
	--glass-bg-strong: rgba(255, 255, 255, 0.86);
	--glass-border: rgba(0, 0, 0, 0.08);
	--glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
	--glass-blur: 22px;
	--ink: #1d1d1f;
	--ink-soft: #6e6e73;
	--accent: #0071e3;
	--danger: #d70015;
	--page: linear-gradient(160deg, #f5f5f7 0%, #e8eef5 55%, #eef1f6 100%);
	--radius: 18px;
	}

	.dark,
	.dark .gradio-container {
	--glass-bg: rgba(28, 28, 30, 0.58);
	--glass-bg-strong: rgba(28, 28, 30, 0.84);
	--glass-border: rgba(255, 255, 255, 0.12);
	--glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
	--ink: #f5f5f7;
	--ink-soft: #a1a1a6;
	--accent: #0a84ff;
	--danger: #ff453a;
	--page: linear-gradient(160deg, #000000 0%, #14161a 55%, #1c1c1e 100%);
	}

	body,
	.gradio-container {
	background: var(--page) fixed !important;
	color: var(--ink);
	font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
	Roboto, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	}

	h1,
	h2,
	h3,
	.prose h1,
	.prose h2 {
	letter-spacing: -0.02em;
	font-weight: 600;
	color: var(--ink);
	}

	/* ---------------------------------------------------------------- surfaces */

	/* Blur is applied ONLY to the outer chrome. An element with backdrop-filter
	becomes a containing block and a new stacking context, so any dropdown,
	tooltip or modal rendered inside it as an overlay gets clipped or painted
	underneath — which looks exactly like "the dropdown won't open". Inner
	blocks get the translucency without the filter. */
	.gradio-container .block,
	.gradio-container .form,
	.gradio-container .panel {
	background: var(--glass-bg) !important;
	border: 1px solid var(--glass-border) !important;
	border-radius: var(--radius) !important;
	box-shadow: var(--glass-shadow);
	}

	#ct-header,
	#ct-admin-card {
	background: var(--glass-bg) !important;
	backdrop-filter: saturate(180%) blur(var(--glass-blur));
	-webkit-backdrop-filter: saturate(180%) blur(var(--glass-blur));
	border: 1px solid var(--glass-border) !important;
	border-radius: var(--radius) !important;
	box-shadow: var(--glass-shadow);
	}

	/* ---------------------------------------------------------------- overlays */

	/* The option list must escape its parent and paint above everything. */
	.gradio-container .block:has(ul.options),
	.gradio-container .form:has(ul.options),
	.gradio-container .wrap:has(ul.options) {
	overflow: visible !important;
	}

	ul.options,
	.gradio-container ul.options {
	background: var(--glass-bg-strong) !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	border: 1px solid var(--glass-border) !important;
	border-radius: 12px !important;
	box-shadow: var(--glass-shadow);
	color: var(--ink) !important;
	z-index: 2000 !important;
	}

	ul.options li.item {
	color: var(--ink) !important;
	border-radius: 8px;
	}

	ul.options li.item:hover,
	ul.options li.item.selected,
	ul.options li.item.active {
	background: color-mix(in srgb, var(--accent) 18%, transparent) !important;
	}

	.gradio-container .tabs>.tab-nav {
	background: var(--glass-bg-strong);
	backdrop-filter: saturate(180%) blur(var(--glass-blur));
	-webkit-backdrop-filter: saturate(180%) blur(var(--glass-blur));
	border: 1px solid var(--glass-border);
	border-radius: 999px;
	padding: 4px;
	gap: 2px;
	}

	.gradio-container .tabs>.tab-nav>button {
	border: none !important;
	border-radius: 999px !important;
	color: var(--ink-soft);
	font-weight: 500;
	transition: background 0.18s ease, color 0.18s ease;
	}

	.gradio-container .tabs>.tab-nav>button.selected {
	background: var(--glass-bg-strong);
	color: var(--ink);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
	}

	/* ---------------------------------------------------------------- controls */

	.gradio-container button.primary {
	background: var(--accent) !important;
	border: none !important;
	border-radius: 12px !important;
	font-weight: 590;
	box-shadow: 0 2px 10px rgba(0, 113, 227, 0.3);
	}

	.gradio-container button.secondary {
	background: var(--glass-bg-strong) !important;
	border: 1px solid var(--glass-border) !important;
	border-radius: 12px !important;
	color: var(--ink) !important;
	}

	.gradio-container input,
	.gradio-container textarea,
	.gradio-container select {
	border-radius: 12px !important;
	background: var(--glass-bg-strong) !important;
	color: var(--ink) !important;
	border: 1px solid var(--glass-border) !important;
	}

	/* ---------------------------------------------------------------- header */

	#ct-header {
	padding: 14px 20px;
	margin-bottom: 12px;
	}

	#ct-identity {
	color: var(--ink-soft);
	font-size: 0.92rem;
	font-weight: 500;
	}

	#ct-theme-toggle button {
	min-width: 44px;
	border-radius: 999px !important;
	}

	#ct-disclaimer {
	border-left: 3px solid var(--danger);
	padding-left: 12px;
	color: var(--ink-soft);
	font-size: 0.86rem;
	}

	/* Disabled tabs are hidden outright rather than shown greyed: a radiographer
	should not be offered a task the department has switched off. */
	.ct-hidden {
	display: none !important;
	}

	/* Print: strip the glass so a report prints black on white. */
	@media print {

	body,
	.gradio-container,
	.gradio-container .block {
	background: #fff !important;
	box-shadow: none !important;
	backdrop-filter: none !important;
	color: #000 !important;
	}

	.tabs>.tab-nav,
	#ct-header,
	button {
	display: none !important;
	}
	}

	@media (prefers-reduced-transparency: reduce) {

	.gradio-container .block,
	#ct-header {
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	background: var(--glass-bg-strong) !important;
	}
	}