Spaces:

coderuday21
/

satdetect-dev

Sleeping

App Files Files Community

satdetect-dev / static /css /dda-modernist-result-modal.css

coderuday21

Cursor

Deploy latest uday app code to Hugging Face (skip research binaries).

c682b53 17 days ago

Raw History Blame Contribute Delete

8.98 kB

/* ============================================================
   Modernist theme for the interactive Result modal (#result-modal)
   — shared by the Change Detection page (shown right after a run)
   and the standalone report page. Scoped entirely to
   #result-modal so nothing else is affected.
   ============================================================ */

#result-modal.result-modal-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10000 !important;
  /* Solid — never let the page underneath bleed through. */
  background: var(--dm-bg, #f3f2f2) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  display: flex;
  align-items: stretch;
  justify-content: center;
  overflow-y: auto;
}
#result-modal .result-modal {
  background: var(--dm-bg, #f3f2f2);
  border-radius: 0;
  box-shadow: none;
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  max-width: 100%;
}

/* --- Header --- */
#result-modal .result-modal-header h3 {
  font-family: var(--dm-font);
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  color: var(--dm-ink);
}
#result-modal .result-modal-header-actions .btn {
  border-radius: 0;
  font-family: var(--dm-font);
  font-weight: 700;
}
#result-modal .result-modal-header-actions .btn-secondary {
  background: transparent;
  border-color: var(--dm-line);
  color: var(--dm-ink);
}
#result-modal .result-modal-header-actions .btn-secondary:hover { background: var(--dm-surface); }
#result-modal .btn-close-modal:hover { background: var(--dm-accent-100); color: var(--dm-accent); border-radius: 0; }

/* --- Stat grid --- */
#result-modal .result-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 1px;
  background: var(--dm-line);
  border: 1px solid var(--dm-line);
  margin-bottom: 0.75rem;
}
#result-modal .stat-box {
  background: var(--dm-surface);
  border: none;
  border-radius: 0;
  padding: 0.85rem 0.75rem;
}
#result-modal .stat-box:hover { border-color: transparent; }
#result-modal .stat-box .value {
  font-family: var(--dm-font);
  font-weight: 800;
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: var(--dm-ink);
  color: var(--dm-ink);
}
#result-modal .stat-box .label {
  color: var(--dm-ink-muted);
  font-weight: 600;
}

/* --- View toolbar --- */
#result-modal .dda-view-toolbar {
  border: 1px solid var(--dm-line);
  padding: 0.3rem;
  display: inline-flex;
  gap: 0;
  width: auto;
}
#result-modal .dda-view-label { color: var(--dm-ink-muted); margin: 0 0.5rem 0 0.15rem; }
#result-modal .dda-view-btn {
  border-radius: 0;
  font-family: var(--dm-font);
  font-weight: 700;
}
#result-modal .dda-view-btn:hover { background: var(--dm-bg); }
#result-modal .dda-view-btn.active {
  background: var(--dm-accent);
  color: #fff;
}
#result-modal #dda-locate-btn.btn-secondary {
  border-radius: 0;
  font-family: var(--dm-font);
  font-weight: 700;
}
#result-modal .btn-zoom {
  border-radius: 0;
  font-family: var(--dm-font);
}
#result-modal .zoom-level { font-family: var(--dm-font); font-weight: 700; color: var(--dm-ink); }

#result-modal .compare-slider { border: 1px solid var(--dm-line); border-radius: 0; }
#result-modal .compare-label {
  border-radius: 0;
  font-family: var(--dm-font);
  font-weight: 700;
}
#result-modal .compare-label-left { background: var(--dm-ink); color: #fff; }
#result-modal .compare-label-right { background: var(--dm-accent); color: #fff; }
#result-modal .compare-handle-knob { border-radius: 0; background: var(--dm-ink); color: #fff; }

#result-modal .dda-map-toolbar {
  border: 1px solid var(--dm-line);
  border-radius: 0;
}
#result-modal .dda-map-toolbar select,
#result-modal .dda-map-xyz {
  border-radius: 0;
}
#result-modal .dda-map-toolbar .btn { border-radius: 0; font-family: var(--dm-font); font-weight: 700; }
#result-modal .dda-map-canvas { border: 1px solid var(--dm-line); border-radius: 0; }

#result-modal .result-modal-layout {
  align-items: stretch;
}
#result-modal .result-modal-side {
  border-left-color: var(--dm-line);
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: calc(100vh - 12rem);
  max-height: calc(100dvh - 12rem);
}
#result-modal .dda-review-summary { color: var(--dm-ink-muted); }
#result-modal .dda-review-summary strong { color: var(--dm-ink); }
#result-modal .dda-review-actions .btn {
  border-radius: 0;
  font-family: var(--dm-font);
  font-weight: 700;
}
#result-modal .dda-review-actions .btn-secondary {
  background: transparent;
  border-color: var(--dm-line);
  color: var(--dm-ink);
}
#result-modal .dda-review-actions .btn-secondary:hover { background: var(--dm-surface); }
#result-modal .dda-review-actions .btn-primary { background: var(--dm-accent); }
#result-modal .dda-review-actions .btn-primary:hover { background: var(--dm-accent-hover); filter: none; box-shadow: none; }

#result-modal .regions-table {
  border-collapse: separate;
  border-spacing: 0;
}
#result-modal .regions-table th {
  font-family: var(--dm-font);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.68rem;
  color: var(--dm-ink-muted);
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--dm-surface, #fff);
  box-shadow: 0 1px 0 var(--dm-line);
}
#result-modal .regions-table td {
  border-color: var(--dm-line);
  background: var(--dm-surface, #fff);
}
#result-modal .regions-table td:nth-child(2) { color: var(--dm-ink); }
#result-modal .regions-table tr:hover td { background: var(--dm-bg); }
#result-modal .regions-table tr.region-hover td { background: var(--dm-accent-100); }
#result-modal .regions-table tr.region-selected td { background: var(--dm-accent-100); }
#result-modal .severity-badge,
#result-modal .review-badge {
  border-radius: 2px;
}
#result-modal .dda-review-btns .btn { border-radius: 0; }
#result-modal .pagination { font-family: var(--dm-font); }

#result-modal .result-modal-side .regions-table-wrap {
  flex: 1 1 auto;
  min-height: 12rem;
  max-height: none;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
#result-modal .result-modal-side .regions-table {
  min-width: 960px;
}
#result-modal .result-modal-side > .pagination {
  flex: 0 0 auto;
}

/* ---- Standalone report page: never clip the viewport ----
   The report page embeds the result UI in-flow (not a fixed overlay).
   Cap-heights + body overflow:hidden were cutting the bottom of the screen. */
#page-report-detail {
  overflow: auto !important;
  height: auto !important;
  min-height: 100vh;
}
#page-report-detail .dda-report-page {
  overflow: visible !important;
  height: auto !important;
}
#page-report-detail #result-modal.result-modal-backdrop,
.dda-report-page #result-modal.result-modal-backdrop {
  position: relative !important;
  inset: auto !important;
  z-index: 1 !important;
  display: block !important;
  overflow: visible !important;
  min-height: 0 !important;
  height: auto !important;
  background: var(--dm-bg, #f3f2f2) !important;
  backdrop-filter: none !important;
}
#page-report-detail #result-modal .result-modal,
.dda-report-page #result-modal .result-modal {
  min-height: 0 !important;
  height: auto !important;
  overflow: visible !important;
}
#page-report-detail #result-modal .result-modal-layout,
.dda-report-page #result-modal .result-modal-layout {
  align-items: start;
}
#page-report-detail #result-modal .result-modal-side,
.dda-report-page #result-modal .result-modal-side {
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
}
#page-report-detail #result-modal .result-modal-side .regions-table-wrap,
.dda-report-page #result-modal .result-modal-side .regions-table-wrap {
  flex: none !important;
  max-height: none !important;
  min-height: 0 !important;
  /* Only horizontal scroll for wide columns; vertical uses the page. */
  overflow-x: auto !important;
  overflow-y: visible !important;
}
#page-report-detail #result-modal .regions-table th,
.dda-report-page #result-modal .regions-table th {
  position: static;
  box-shadow: none;
}
#page-report-detail .dda-header.dda-report-header {
  margin: 0 !important;
}

/* --- Editable report title --- */
#result-modal .result-title-edit-btn {
  border-radius: 0;
  color: var(--dm-ink-muted);
}
#result-modal .result-title-edit-btn:hover { background: var(--dm-accent-100); color: var(--dm-accent); }
#result-modal .result-title-input {
  border-radius: 0;
  border-color: var(--dm-line);
  font-family: var(--dm-font);
}
#result-modal .result-modal-title-edit .btn {
  border-radius: 0;
  font-family: var(--dm-font);
  font-weight: 700;
}
#result-modal .result-modal-title-edit .btn-primary { background: var(--dm-accent); }
#result-modal .result-modal-title-edit .btn-primary:hover { background: var(--dm-accent-hover); filter: none; box-shadow: none; }
#result-modal .result-title-msg { color: var(--dm-accent); }

	/* ============================================================
	Modernist theme for the interactive Result modal (#result-modal)
	— shared by the Change Detection page (shown right after a run)
	and the standalone report page. Scoped entirely to
	#result-modal so nothing else is affected.
	============================================================ */

	#result-modal.result-modal-backdrop {
	position: fixed !important;
	inset: 0 !important;
	z-index: 10000 !important;
	/* Solid — never let the page underneath bleed through. */
	background: var(--dm-bg, #f3f2f2) !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	display: flex;
	align-items: stretch;
	justify-content: center;
	overflow-y: auto;
	}
	#result-modal .result-modal {
	background: var(--dm-bg, #f3f2f2);
	border-radius: 0;
	box-shadow: none;
	min-height: 100vh;
	min-height: 100dvh;
	width: 100%;
	max-width: 100%;
	}

	/* --- Header --- */
	#result-modal .result-modal-header h3 {
	font-family: var(--dm-font);
	font-weight: 800;
	font-size: 1.3rem;
	letter-spacing: -0.01em;
	color: var(--dm-ink);
	}
	#result-modal .result-modal-header-actions .btn {
	border-radius: 0;
	font-family: var(--dm-font);
	font-weight: 700;
	}
	#result-modal .result-modal-header-actions .btn-secondary {
	background: transparent;
	border-color: var(--dm-line);
	color: var(--dm-ink);
	}
	#result-modal .result-modal-header-actions .btn-secondary:hover { background: var(--dm-surface); }
	#result-modal .btn-close-modal:hover { background: var(--dm-accent-100); color: var(--dm-accent); border-radius: 0; }

	/* --- Stat grid --- */
	#result-modal .result-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
	gap: 1px;
	background: var(--dm-line);
	border: 1px solid var(--dm-line);
	margin-bottom: 0.75rem;
	}
	#result-modal .stat-box {
	background: var(--dm-surface);
	border: none;
	border-radius: 0;
	padding: 0.85rem 0.75rem;
	}
	#result-modal .stat-box:hover { border-color: transparent; }
	#result-modal .stat-box .value {
	font-family: var(--dm-font);
	font-weight: 800;
	background: none;
	-webkit-background-clip: initial;
	background-clip: initial;
	-webkit-text-fill-color: var(--dm-ink);
	color: var(--dm-ink);
	}
	#result-modal .stat-box .label {
	color: var(--dm-ink-muted);
	font-weight: 600;
	}

	/* --- View toolbar --- */
	#result-modal .dda-view-toolbar {
	border: 1px solid var(--dm-line);
	padding: 0.3rem;
	display: inline-flex;
	gap: 0;
	width: auto;
	}
	#result-modal .dda-view-label { color: var(--dm-ink-muted); margin: 0 0.5rem 0 0.15rem; }
	#result-modal .dda-view-btn {
	border-radius: 0;
	font-family: var(--dm-font);
	font-weight: 700;
	}
	#result-modal .dda-view-btn:hover { background: var(--dm-bg); }
	#result-modal .dda-view-btn.active {
	background: var(--dm-accent);
	color: #fff;
	}
	#result-modal #dda-locate-btn.btn-secondary {
	border-radius: 0;
	font-family: var(--dm-font);
	font-weight: 700;
	}
	#result-modal .btn-zoom {
	border-radius: 0;
	font-family: var(--dm-font);
	}
	#result-modal .zoom-level { font-family: var(--dm-font); font-weight: 700; color: var(--dm-ink); }

	#result-modal .compare-slider { border: 1px solid var(--dm-line); border-radius: 0; }
	#result-modal .compare-label {
	border-radius: 0;
	font-family: var(--dm-font);
	font-weight: 700;
	}
	#result-modal .compare-label-left { background: var(--dm-ink); color: #fff; }
	#result-modal .compare-label-right { background: var(--dm-accent); color: #fff; }
	#result-modal .compare-handle-knob { border-radius: 0; background: var(--dm-ink); color: #fff; }

	#result-modal .dda-map-toolbar {
	border: 1px solid var(--dm-line);
	border-radius: 0;
	}
	#result-modal .dda-map-toolbar select,
	#result-modal .dda-map-xyz {
	border-radius: 0;
	}
	#result-modal .dda-map-toolbar .btn { border-radius: 0; font-family: var(--dm-font); font-weight: 700; }
	#result-modal .dda-map-canvas { border: 1px solid var(--dm-line); border-radius: 0; }

	#result-modal .result-modal-layout {
	align-items: stretch;
	}
	#result-modal .result-modal-side {
	border-left-color: var(--dm-line);
	display: flex;
	flex-direction: column;
	min-height: 0;
	max-height: calc(100vh - 12rem);
	max-height: calc(100dvh - 12rem);
	}
	#result-modal .dda-review-summary { color: var(--dm-ink-muted); }
	#result-modal .dda-review-summary strong { color: var(--dm-ink); }
	#result-modal .dda-review-actions .btn {
	border-radius: 0;
	font-family: var(--dm-font);
	font-weight: 700;
	}
	#result-modal .dda-review-actions .btn-secondary {
	background: transparent;
	border-color: var(--dm-line);
	color: var(--dm-ink);
	}
	#result-modal .dda-review-actions .btn-secondary:hover { background: var(--dm-surface); }
	#result-modal .dda-review-actions .btn-primary { background: var(--dm-accent); }
	#result-modal .dda-review-actions .btn-primary:hover { background: var(--dm-accent-hover); filter: none; box-shadow: none; }

	#result-modal .regions-table {
	border-collapse: separate;
	border-spacing: 0;
	}
	#result-modal .regions-table th {
	font-family: var(--dm-font);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 0.68rem;
	color: var(--dm-ink-muted);
	position: sticky;
	top: 0;
	z-index: 3;
	background: var(--dm-surface, #fff);
	box-shadow: 0 1px 0 var(--dm-line);
	}
	#result-modal .regions-table td {
	border-color: var(--dm-line);
	background: var(--dm-surface, #fff);
	}
	#result-modal .regions-table td:nth-child(2) { color: var(--dm-ink); }
	#result-modal .regions-table tr:hover td { background: var(--dm-bg); }
	#result-modal .regions-table tr.region-hover td { background: var(--dm-accent-100); }
	#result-modal .regions-table tr.region-selected td { background: var(--dm-accent-100); }
	#result-modal .severity-badge,
	#result-modal .review-badge {
	border-radius: 2px;
	}
	#result-modal .dda-review-btns .btn { border-radius: 0; }
	#result-modal .pagination { font-family: var(--dm-font); }

	#result-modal .result-modal-side .regions-table-wrap {
	flex: 1 1 auto;
	min-height: 12rem;
	max-height: none;
	overflow: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	}
	#result-modal .result-modal-side .regions-table {
	min-width: 960px;
	}
	#result-modal .result-modal-side > .pagination {
	flex: 0 0 auto;
	}

	/* ---- Standalone report page: never clip the viewport ----
	The report page embeds the result UI in-flow (not a fixed overlay).
	Cap-heights + body overflow:hidden were cutting the bottom of the screen. */
	#page-report-detail {
	overflow: auto !important;
	height: auto !important;
	min-height: 100vh;
	}
	#page-report-detail .dda-report-page {
	overflow: visible !important;
	height: auto !important;
	}
	#page-report-detail #result-modal.result-modal-backdrop,
	.dda-report-page #result-modal.result-modal-backdrop {
	position: relative !important;
	inset: auto !important;
	z-index: 1 !important;
	display: block !important;
	overflow: visible !important;
	min-height: 0 !important;
	height: auto !important;
	background: var(--dm-bg, #f3f2f2) !important;
	backdrop-filter: none !important;
	}
	#page-report-detail #result-modal .result-modal,
	.dda-report-page #result-modal .result-modal {
	min-height: 0 !important;
	height: auto !important;
	overflow: visible !important;
	}
	#page-report-detail #result-modal .result-modal-layout,
	.dda-report-page #result-modal .result-modal-layout {
	align-items: start;
	}
	#page-report-detail #result-modal .result-modal-side,
	.dda-report-page #result-modal .result-modal-side {
	max-height: none !important;
	height: auto !important;
	overflow: visible !important;
	}
	#page-report-detail #result-modal .result-modal-side .regions-table-wrap,
	.dda-report-page #result-modal .result-modal-side .regions-table-wrap {
	flex: none !important;
	max-height: none !important;
	min-height: 0 !important;
	/* Only horizontal scroll for wide columns; vertical uses the page. */
	overflow-x: auto !important;
	overflow-y: visible !important;
	}
	#page-report-detail #result-modal .regions-table th,
	.dda-report-page #result-modal .regions-table th {
	position: static;
	box-shadow: none;
	}
	#page-report-detail .dda-header.dda-report-header {
	margin: 0 !important;
	}

	/* --- Editable report title --- */
	#result-modal .result-title-edit-btn {
	border-radius: 0;
	color: var(--dm-ink-muted);
	}
	#result-modal .result-title-edit-btn:hover { background: var(--dm-accent-100); color: var(--dm-accent); }
	#result-modal .result-title-input {
	border-radius: 0;
	border-color: var(--dm-line);
	font-family: var(--dm-font);
	}
	#result-modal .result-modal-title-edit .btn {
	border-radius: 0;
	font-family: var(--dm-font);
	font-weight: 700;
	}
	#result-modal .result-modal-title-edit .btn-primary { background: var(--dm-accent); }
	#result-modal .result-modal-title-edit .btn-primary:hover { background: var(--dm-accent-hover); filter: none; box-shadow: none; }
	#result-modal .result-title-msg { color: var(--dm-accent); }