fix: restore GeoIntel and upgrade Atlas workbench
This commit is contained in:
Jens
+11
-2
@@ -1,5 +1,5 @@
|
||||
import { useEffect, useMemo, useRef, useState } from 'react'
|
||||
import { LogOut, UserRound } from 'lucide-react'
|
||||
import { CircleAlert, LogOut, UserRound } from 'lucide-react'
|
||||
import '@fontsource/manrope/latin-500.css'
|
||||
import '@fontsource/manrope/latin-600.css'
|
||||
import '@fontsource/manrope/latin-700.css'
|
||||
@@ -9,6 +9,7 @@ import '@fontsource/public-sans/latin-600.css'
|
||||
import './styles/app.css'
|
||||
import './styles/premium.css'
|
||||
import './styles/atlas-workbench.css'
|
||||
import './styles/atlas-premium-v2.css'
|
||||
import { LandingPage } from './components/auth/LandingPage'
|
||||
import { ChangeDetectionPanel } from './components/analysis/ChangeDetectionPanel'
|
||||
import { GeoAssistantPanel } from './components/assistant/GeoAssistantPanel'
|
||||
@@ -789,7 +790,15 @@ function WorkbenchApp({ username, loggingOut, onLogout }: WorkbenchAppProps): JS
|
||||
Ga naar de werkruimte
|
||||
</a>
|
||||
<p className="sr-only" role="status" aria-live="polite">{workspaceStatusMessage}</p>
|
||||
{errorMessage ? <p className="error" role="alert">{errorMessage}</p> : null}
|
||||
{errorMessage ? (
|
||||
<div className="workspace-notice" role="alert">
|
||||
<CircleAlert aria-hidden="true" />
|
||||
<div>
|
||||
<strong>Werkruimte vraagt aandacht</strong>
|
||||
<span>{errorMessage}</span>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div className="workbench-layout">
|
||||
<WorkbenchNavigation
|
||||
|
||||
@@ -43,6 +43,7 @@ describe('WorkbenchStatusStrip analytical readiness', () => {
|
||||
|
||||
expect(screen.getByText('Kaartwerkruimte is gebruiksklaar')).toBeTruthy()
|
||||
expect(screen.getByText("1 analysethema")).toBeTruthy()
|
||||
expect(screen.getByLabelText('4 van 6 onderdelen gereed').getAttribute('data-ready')).toBe('4')
|
||||
})
|
||||
|
||||
it('does not call an unrelated stored context file an analysis theme', () => {
|
||||
@@ -60,5 +61,6 @@ describe('WorkbenchStatusStrip analytical readiness', () => {
|
||||
|
||||
expect(screen.getByText('Kaartwerkruimte vraagt aandacht')).toBeTruthy()
|
||||
expect(screen.getByText("0 analysethema's")).toBeTruthy()
|
||||
expect(screen.getByLabelText('3 van 6 onderdelen gereed').getAttribute('data-ready')).toBe('3')
|
||||
})
|
||||
})
|
||||
|
||||
@@ -195,9 +195,12 @@ export function WorkbenchStatusStrip({
|
||||
</h2>
|
||||
<p className="status-next-action">{nextAction(items)}</p>
|
||||
</div>
|
||||
<div className="status-readiness" aria-label={`${readyCount} van ${items.length} onderdelen gereed`}>
|
||||
<strong>{readyCount}/{items.length}</strong>
|
||||
<span>onderdelen gereed</span>
|
||||
<div className="status-readiness" data-ready={readyCount} aria-label={`${readyCount} van ${items.length} onderdelen gereed`}>
|
||||
<span className="status-readiness-orbit" aria-hidden="true" />
|
||||
<div className="status-readiness-copy">
|
||||
<strong>{readyCount}/{items.length}</strong>
|
||||
<span>onderdelen gereed</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="status-strip-grid">
|
||||
|
||||
@@ -0,0 +1,966 @@
|
||||
/* GeoIntel Atlas premium command-center layer.
|
||||
This is intentionally loaded last: it unifies the preserved workflows
|
||||
without changing their data or interaction contracts. */
|
||||
|
||||
:root {
|
||||
--atlas-950: #082a26;
|
||||
--atlas-900: #0a3731;
|
||||
--atlas-800: #0d4a42;
|
||||
--atlas-700: #0d665b;
|
||||
--atlas-600: #0b7f71;
|
||||
--atlas-500: #159889;
|
||||
--atlas-100: #dff3ef;
|
||||
--atlas-50: #eef8f6;
|
||||
--ink-950: #10211d;
|
||||
--ink-700: #334c46;
|
||||
--ink-500: #647b75;
|
||||
--canvas: #f2f6f4;
|
||||
--paper: #ffffff;
|
||||
--paper-muted: #f8faf9;
|
||||
--atlas-line: #d9e4e0;
|
||||
--atlas-line-strong: #c2d2cd;
|
||||
--atlas-shadow-xs: 0 1px 2px rgba(8, 42, 38, 0.05);
|
||||
--atlas-shadow-sm: 0 8px 24px rgba(8, 42, 38, 0.07);
|
||||
--atlas-shadow-md: 0 18px 44px rgba(8, 42, 38, 0.1);
|
||||
--atlas-shadow-floating: 0 24px 70px rgba(8, 42, 38, 0.17);
|
||||
--atlas-radius-sm: 0.625rem;
|
||||
--atlas-radius-md: 0.875rem;
|
||||
--atlas-radius-lg: 1.125rem;
|
||||
--atlas-radius-xl: 1.5rem;
|
||||
--bg: var(--canvas);
|
||||
--panel: var(--paper);
|
||||
--panel-soft: var(--paper-muted);
|
||||
--surface-raised: var(--paper);
|
||||
--surface-sunken: #edf3f0;
|
||||
--text: var(--ink-950);
|
||||
--muted: var(--ink-500);
|
||||
--line: var(--atlas-line);
|
||||
--line-strong: var(--atlas-line-strong);
|
||||
--accent: var(--atlas-600);
|
||||
--accent-strong: var(--atlas-800);
|
||||
--accent-soft: var(--atlas-50);
|
||||
--shadow: var(--atlas-shadow-md);
|
||||
--shadow-soft: var(--atlas-shadow-sm);
|
||||
}
|
||||
|
||||
body {
|
||||
color: var(--ink-950);
|
||||
background: var(--canvas);
|
||||
}
|
||||
|
||||
.workbench-shell {
|
||||
font-family: "Public Sans", "Segoe UI", sans-serif;
|
||||
background:
|
||||
radial-gradient(
|
||||
circle at 78% -12%,
|
||||
rgba(21, 152, 137, 0.09),
|
||||
transparent 28rem
|
||||
),
|
||||
linear-gradient(rgba(13, 102, 91, 0.022) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(13, 102, 91, 0.022) 1px, transparent 1px),
|
||||
var(--canvas);
|
||||
background-size:
|
||||
auto,
|
||||
32px 32px,
|
||||
32px 32px,
|
||||
auto;
|
||||
}
|
||||
|
||||
.workbench-layout {
|
||||
grid-template-columns: 15.5rem minmax(0, 1fr);
|
||||
min-height: 100dvh;
|
||||
}
|
||||
|
||||
/* Brand rail */
|
||||
|
||||
.workbench-sidebar {
|
||||
border: 0;
|
||||
padding: 1rem 0.85rem 1.25rem;
|
||||
color: rgba(255, 255, 255, 0.76);
|
||||
background:
|
||||
radial-gradient(
|
||||
circle at 20% 4%,
|
||||
rgba(85, 205, 187, 0.16),
|
||||
transparent 15rem
|
||||
),
|
||||
linear-gradient(180deg, var(--atlas-900), var(--atlas-950));
|
||||
box-shadow: 12px 0 36px rgba(8, 42, 38, 0.12);
|
||||
}
|
||||
|
||||
.sidebar-brand {
|
||||
min-height: 4.75rem;
|
||||
gap: 0.75rem;
|
||||
margin: 0 0 1.15rem;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.11);
|
||||
padding: 0.35rem 0.45rem 1.15rem;
|
||||
}
|
||||
|
||||
.sidebar-brand .brand-mark {
|
||||
width: 2.65rem;
|
||||
height: 2.65rem;
|
||||
border: 1px solid rgba(173, 238, 227, 0.44);
|
||||
border-radius: 0.8rem;
|
||||
color: #dffaf5;
|
||||
background: rgba(255, 255, 255, 0.09);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.14),
|
||||
0 10px 24px rgba(0, 0, 0, 0.16);
|
||||
}
|
||||
|
||||
.sidebar-brand-copy {
|
||||
display: grid;
|
||||
gap: 0.12rem;
|
||||
}
|
||||
|
||||
.sidebar-brand-copy strong {
|
||||
color: #ffffff;
|
||||
font-family: "Manrope", sans-serif;
|
||||
font-size: 1.02rem;
|
||||
letter-spacing: -0.025em;
|
||||
}
|
||||
|
||||
.sidebar-brand-copy small {
|
||||
color: rgba(223, 250, 245, 0.58);
|
||||
font-size: 0.72rem;
|
||||
}
|
||||
|
||||
.nav-group {
|
||||
margin-top: 1.15rem;
|
||||
}
|
||||
|
||||
.workbench-shell .nav-section-label {
|
||||
margin: 0 0 0.42rem;
|
||||
padding: 0 0.7rem;
|
||||
color: rgba(220, 246, 240, 0.46);
|
||||
font-size: 0.68rem;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
|
||||
.workbench-sidebar .nav-item {
|
||||
position: relative;
|
||||
min-height: 3rem;
|
||||
gap: 0.75rem;
|
||||
margin: 0.2rem 0;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 0.75rem;
|
||||
padding: 0.68rem 0.72rem;
|
||||
color: rgba(239, 252, 249, 0.7);
|
||||
background: transparent;
|
||||
font-size: 0.82rem;
|
||||
font-weight: 650;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.workbench-sidebar .nav-item:hover:not(:disabled) {
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
color: #ffffff;
|
||||
background: rgba(255, 255, 255, 0.075);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.workbench-sidebar .nav-item-active,
|
||||
.workbench-sidebar .nav-item-active:hover:not(:disabled) {
|
||||
border-color: rgba(134, 224, 208, 0.22);
|
||||
color: #ffffff;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(39, 169, 151, 0.3),
|
||||
rgba(255, 255, 255, 0.09)
|
||||
);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.1),
|
||||
0 8px 22px rgba(0, 0, 0, 0.14);
|
||||
}
|
||||
|
||||
.workbench-sidebar .nav-item-active::before {
|
||||
position: absolute;
|
||||
top: 0.68rem;
|
||||
bottom: 0.68rem;
|
||||
left: -0.86rem;
|
||||
width: 0.22rem;
|
||||
border-radius: 0 999px 999px 0;
|
||||
background: #69d5c2;
|
||||
box-shadow: 0 0 14px rgba(105, 213, 194, 0.72);
|
||||
content: "";
|
||||
}
|
||||
|
||||
.workbench-sidebar .nav-item-icon {
|
||||
width: 1.15rem;
|
||||
height: 1.15rem;
|
||||
flex: 0 0 auto;
|
||||
color: rgba(211, 244, 237, 0.72);
|
||||
}
|
||||
|
||||
.workbench-sidebar .nav-item-active .nav-item-icon {
|
||||
color: #9be7da;
|
||||
}
|
||||
|
||||
/* Context command bar */
|
||||
|
||||
.workbench-topbar {
|
||||
min-height: 5rem;
|
||||
gap: 1rem;
|
||||
border-bottom: 1px solid rgba(194, 210, 205, 0.72);
|
||||
padding: 0.72rem 1.35rem;
|
||||
background: rgba(250, 252, 251, 0.9);
|
||||
box-shadow: 0 8px 24px rgba(8, 42, 38, 0.055);
|
||||
backdrop-filter: blur(18px) saturate(135%);
|
||||
}
|
||||
|
||||
.context-bar {
|
||||
gap: 0.48rem;
|
||||
}
|
||||
|
||||
.context-bar > div {
|
||||
position: relative;
|
||||
min-width: 0;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 0.72rem;
|
||||
padding: 0.48rem 0.72rem 0.52rem;
|
||||
background: rgba(238, 248, 246, 0.62);
|
||||
transition:
|
||||
border-color 140ms ease,
|
||||
background-color 140ms ease,
|
||||
transform 140ms ease;
|
||||
}
|
||||
|
||||
.context-bar > div:first-child {
|
||||
border-color: #c7ded8;
|
||||
background: #eaf6f3;
|
||||
}
|
||||
|
||||
.workbench-shell .context-bar span {
|
||||
margin-bottom: 0.16rem;
|
||||
color: #6d827c;
|
||||
font-size: 0.66rem;
|
||||
letter-spacing: 0.055em;
|
||||
}
|
||||
|
||||
.context-bar strong {
|
||||
color: var(--ink-950);
|
||||
font-size: 0.78rem;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.context-health {
|
||||
min-height: 2.45rem;
|
||||
border: 1px solid #cfe0dc;
|
||||
border-radius: 999px;
|
||||
padding: 0.45rem 0.78rem;
|
||||
color: var(--atlas-800);
|
||||
background: #f4faf8;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.context-health > span {
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
background: #26a68f;
|
||||
box-shadow: 0 0 0 4px rgba(38, 166, 143, 0.12);
|
||||
}
|
||||
|
||||
.context-account {
|
||||
min-height: 2.55rem;
|
||||
border: 1px solid var(--atlas-line);
|
||||
border-radius: 999px;
|
||||
padding: 0.22rem 0.28rem 0.22rem 0.68rem;
|
||||
background: var(--paper);
|
||||
box-shadow: var(--atlas-shadow-xs);
|
||||
}
|
||||
|
||||
.context-account button {
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
/* Calm, singular operational notice */
|
||||
|
||||
.workspace-notice {
|
||||
position: fixed;
|
||||
top: 5.75rem;
|
||||
right: 1.25rem;
|
||||
z-index: 80;
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr);
|
||||
width: min(26rem, calc(100vw - 2rem));
|
||||
gap: 0.7rem;
|
||||
align-items: start;
|
||||
border: 1px solid #e6c9b2;
|
||||
border-radius: 0.9rem;
|
||||
padding: 0.82rem 0.95rem;
|
||||
color: #6f3b1c;
|
||||
background: rgba(255, 250, 244, 0.96);
|
||||
box-shadow: var(--atlas-shadow-floating);
|
||||
backdrop-filter: blur(18px);
|
||||
}
|
||||
|
||||
.workspace-notice > svg {
|
||||
width: 1.08rem;
|
||||
margin-top: 0.08rem;
|
||||
color: #b26530;
|
||||
}
|
||||
|
||||
.workspace-notice > div {
|
||||
display: grid;
|
||||
gap: 0.18rem;
|
||||
}
|
||||
|
||||
.workspace-notice strong {
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
.workspace-notice span {
|
||||
color: #865337;
|
||||
font-size: 0.74rem;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
/* Page composition */
|
||||
|
||||
.workbench-main {
|
||||
padding: 1.6rem 1.75rem 2.75rem;
|
||||
}
|
||||
|
||||
.workspace-heading {
|
||||
min-height: 5.6rem;
|
||||
margin: -0.15rem 0 1.2rem;
|
||||
border: 0;
|
||||
padding: 0.5rem 0 1rem;
|
||||
}
|
||||
|
||||
.workspace-heading-copy {
|
||||
gap: 0.12rem;
|
||||
}
|
||||
|
||||
.workbench-shell .workspace-heading .eyebrow {
|
||||
color: var(--atlas-700);
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 0.075em;
|
||||
}
|
||||
|
||||
.workspace-heading h2 {
|
||||
color: var(--ink-950);
|
||||
font-family: "Manrope", sans-serif;
|
||||
font-size: clamp(1.65rem, 2vw, 2.25rem);
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.045em;
|
||||
}
|
||||
|
||||
.workspace-heading-actions > p {
|
||||
max-width: 31rem;
|
||||
color: var(--ink-500);
|
||||
font-size: 0.84rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.inspector-toggle,
|
||||
.secondary-action,
|
||||
.primary-action,
|
||||
.quick-action-button {
|
||||
min-height: 2.65rem;
|
||||
border-radius: 0.68rem;
|
||||
padding-inline: 1rem;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.workbench-shell .primary-action {
|
||||
border-color: var(--atlas-700);
|
||||
background: linear-gradient(135deg, var(--atlas-700), var(--atlas-600));
|
||||
box-shadow: 0 8px 20px rgba(13, 102, 91, 0.16);
|
||||
}
|
||||
|
||||
.workbench-shell .primary-action:hover:not(:disabled) {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 12px 26px rgba(13, 102, 91, 0.22);
|
||||
}
|
||||
|
||||
/* Shared premium surfaces */
|
||||
|
||||
.workspace-panel,
|
||||
.panel,
|
||||
.workbench-status-strip,
|
||||
.source-freshness-panel,
|
||||
.workspace-grid-data > section,
|
||||
.source-catalog-panel,
|
||||
.secondary-analysis-disclosure,
|
||||
.status-details-disclosure,
|
||||
.export-history-disclosure {
|
||||
border: 1px solid rgba(194, 210, 205, 0.78);
|
||||
border-radius: var(--atlas-radius-lg);
|
||||
background: rgba(255, 255, 255, 0.94);
|
||||
box-shadow: var(--atlas-shadow-sm);
|
||||
}
|
||||
|
||||
.panel-title-row h2,
|
||||
.workspace-panel h2,
|
||||
.source-catalog-panel h2 {
|
||||
font-family: "Manrope", sans-serif;
|
||||
letter-spacing: -0.025em;
|
||||
}
|
||||
|
||||
.workbench-shell .eyebrow,
|
||||
.workbench-shell .section-kicker {
|
||||
color: var(--atlas-700);
|
||||
font-size: 0.69rem;
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
|
||||
.muted,
|
||||
.panel-title-row .muted,
|
||||
.result-state p,
|
||||
.empty-state p {
|
||||
color: var(--ink-500);
|
||||
font-size: 0.78rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.status-badge,
|
||||
.count-pill,
|
||||
.status-pill {
|
||||
border-radius: 999px;
|
||||
padding: 0.28rem 0.52rem;
|
||||
font-size: 0.66rem;
|
||||
font-weight: 750;
|
||||
letter-spacing: 0.015em;
|
||||
}
|
||||
|
||||
.result-state,
|
||||
.empty-state {
|
||||
min-height: 9rem;
|
||||
border: 1px dashed #bfd0cb;
|
||||
border-radius: var(--atlas-radius-md);
|
||||
padding: 1.2rem;
|
||||
background:
|
||||
radial-gradient(
|
||||
circle at 50% 0%,
|
||||
rgba(21, 152, 137, 0.08),
|
||||
transparent 8rem
|
||||
),
|
||||
#fbfdfc;
|
||||
}
|
||||
|
||||
.result-state-error {
|
||||
border-style: solid;
|
||||
border-color: #ebc7bf;
|
||||
background: #fff8f6;
|
||||
}
|
||||
|
||||
/* Status becomes an executive health overview */
|
||||
|
||||
.workbench-status-strip {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.status-strip-header {
|
||||
min-height: 10rem;
|
||||
border-bottom: 1px solid var(--atlas-line);
|
||||
padding: 1.55rem 1.65rem;
|
||||
background:
|
||||
radial-gradient(
|
||||
circle at 92% 12%,
|
||||
rgba(91, 204, 184, 0.22),
|
||||
transparent 14rem
|
||||
),
|
||||
linear-gradient(135deg, #f8fcfb, #eef7f4);
|
||||
}
|
||||
|
||||
.status-strip-header h2 {
|
||||
margin-top: 0.15rem;
|
||||
color: var(--atlas-950);
|
||||
font-family: "Manrope", sans-serif;
|
||||
font-size: clamp(1.3rem, 1.55vw, 1.8rem);
|
||||
letter-spacing: -0.035em;
|
||||
}
|
||||
|
||||
.status-next-action {
|
||||
max-width: 42rem;
|
||||
margin-top: 0.45rem;
|
||||
color: var(--ink-500);
|
||||
font-size: 0.84rem;
|
||||
}
|
||||
|
||||
.status-readiness {
|
||||
position: relative;
|
||||
display: grid;
|
||||
width: 7.2rem;
|
||||
height: 7.2rem;
|
||||
place-items: center;
|
||||
border: 0;
|
||||
border-radius: 50%;
|
||||
padding: 0;
|
||||
background: var(--paper);
|
||||
box-shadow: 0 12px 30px rgba(8, 42, 38, 0.13);
|
||||
}
|
||||
|
||||
.status-readiness-orbit {
|
||||
position: absolute;
|
||||
inset: 0.42rem;
|
||||
border-radius: inherit;
|
||||
background: conic-gradient(var(--atlas-500) 60deg, #dce8e4 0);
|
||||
mask: radial-gradient(circle, transparent 57%, #000 58%);
|
||||
}
|
||||
|
||||
.status-readiness[data-ready="0"] .status-readiness-orbit {
|
||||
background: conic-gradient(var(--atlas-500) 0deg, #dce8e4 0);
|
||||
}
|
||||
.status-readiness[data-ready="1"] .status-readiness-orbit {
|
||||
background: conic-gradient(var(--atlas-500) 60deg, #dce8e4 0);
|
||||
}
|
||||
.status-readiness[data-ready="2"] .status-readiness-orbit {
|
||||
background: conic-gradient(var(--atlas-500) 120deg, #dce8e4 0);
|
||||
}
|
||||
.status-readiness[data-ready="3"] .status-readiness-orbit {
|
||||
background: conic-gradient(var(--atlas-500) 180deg, #dce8e4 0);
|
||||
}
|
||||
.status-readiness[data-ready="4"] .status-readiness-orbit {
|
||||
background: conic-gradient(var(--atlas-500) 240deg, #dce8e4 0);
|
||||
}
|
||||
.status-readiness[data-ready="5"] .status-readiness-orbit {
|
||||
background: conic-gradient(var(--atlas-500) 300deg, #dce8e4 0);
|
||||
}
|
||||
.status-readiness[data-ready="6"] .status-readiness-orbit {
|
||||
background: conic-gradient(var(--atlas-500) 360deg, #dce8e4 0);
|
||||
}
|
||||
|
||||
.status-readiness-copy {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: grid;
|
||||
max-width: 5rem;
|
||||
gap: 0.08rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.status-readiness-copy strong {
|
||||
color: var(--atlas-900);
|
||||
font-family: "Manrope", sans-serif;
|
||||
font-size: 1.5rem;
|
||||
letter-spacing: -0.05em;
|
||||
}
|
||||
|
||||
.status-readiness-copy > span {
|
||||
color: var(--ink-500);
|
||||
font-size: 0.62rem;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.status-strip-grid {
|
||||
gap: 0.65rem;
|
||||
padding: 0.75rem;
|
||||
background: #f7faf9;
|
||||
}
|
||||
|
||||
.status-tile,
|
||||
.status-tile:nth-child(n) {
|
||||
position: relative;
|
||||
min-height: 8rem;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--atlas-line);
|
||||
border-radius: 0.8rem;
|
||||
padding: 0.9rem;
|
||||
background: var(--paper);
|
||||
}
|
||||
|
||||
.status-tile::after {
|
||||
position: absolute;
|
||||
right: -1.3rem;
|
||||
bottom: -1.7rem;
|
||||
width: 4.4rem;
|
||||
height: 4.4rem;
|
||||
border-radius: 50%;
|
||||
background: rgba(13, 102, 91, 0.055);
|
||||
content: "";
|
||||
}
|
||||
|
||||
.status-tile-ready {
|
||||
border-color: #c6dfd8;
|
||||
box-shadow: inset 0 3px 0 #45a996;
|
||||
}
|
||||
|
||||
.status-tile-warning {
|
||||
box-shadow: inset 0 3px 0 #d69b48;
|
||||
}
|
||||
|
||||
.status-tile > strong {
|
||||
margin-top: 0.7rem;
|
||||
color: var(--ink-950);
|
||||
font-family: "Manrope", sans-serif;
|
||||
font-size: 0.88rem;
|
||||
}
|
||||
|
||||
.status-tile p {
|
||||
margin-top: 0.28rem;
|
||||
color: var(--ink-500);
|
||||
font-size: 0.7rem;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
/* Source workspace: distinct choose / understand / act planes */
|
||||
|
||||
.workspace-grid-data {
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.workbench-shell .workspace-grid-data > section {
|
||||
border-radius: var(--atlas-radius-lg);
|
||||
box-shadow: var(--atlas-shadow-sm);
|
||||
}
|
||||
|
||||
.workbench-shell .workspace-grid-data > section.source-catalog-panel {
|
||||
border-color: #c5dcd6;
|
||||
background:
|
||||
linear-gradient(
|
||||
135deg,
|
||||
rgba(238, 248, 246, 0.72),
|
||||
rgba(255, 255, 255, 0.95) 28%
|
||||
),
|
||||
var(--paper);
|
||||
}
|
||||
|
||||
.source-catalog-panel > .panel-title-row {
|
||||
padding: 1.25rem 1.35rem;
|
||||
}
|
||||
|
||||
.source-domain-card,
|
||||
.source-catalog-domain,
|
||||
.entity-card,
|
||||
.dataset-card,
|
||||
.data-selection-summary {
|
||||
border-radius: var(--atlas-radius-md);
|
||||
}
|
||||
|
||||
.workspace-grid-data .entity-card,
|
||||
.workspace-grid-data .dataset-card {
|
||||
border-color: var(--atlas-line);
|
||||
padding: 0.9rem;
|
||||
background: #fcfdfd;
|
||||
transition:
|
||||
transform 140ms ease,
|
||||
border-color 140ms ease,
|
||||
box-shadow 140ms ease;
|
||||
}
|
||||
|
||||
.workspace-grid-data .entity-card:hover,
|
||||
.workspace-grid-data .dataset-card:hover {
|
||||
transform: translateY(-1px);
|
||||
border-color: #9fc8be;
|
||||
box-shadow: var(--atlas-shadow-sm);
|
||||
}
|
||||
|
||||
/* Map command center */
|
||||
|
||||
.geo-explorer {
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(170, 195, 188, 0.84);
|
||||
border-radius: var(--atlas-radius-xl);
|
||||
background: var(--paper);
|
||||
box-shadow: var(--atlas-shadow-md);
|
||||
}
|
||||
|
||||
.geo-explorer-header {
|
||||
min-height: 6rem;
|
||||
border-bottom: 1px solid var(--atlas-line);
|
||||
padding: 1rem 1.25rem;
|
||||
background:
|
||||
radial-gradient(
|
||||
circle at 90% 0%,
|
||||
rgba(84, 196, 176, 0.14),
|
||||
transparent 16rem
|
||||
),
|
||||
linear-gradient(135deg, #fbfdfc, #f3f9f7);
|
||||
}
|
||||
|
||||
.geo-explorer-header h2 {
|
||||
font-family: "Manrope", sans-serif;
|
||||
font-size: 1.45rem;
|
||||
letter-spacing: -0.04em;
|
||||
}
|
||||
|
||||
.geo-explorer-header p:last-child {
|
||||
color: var(--ink-500);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.geo-explorer-layout {
|
||||
gap: 0;
|
||||
background: #eef3f1;
|
||||
}
|
||||
|
||||
.geo-theme-panel,
|
||||
.geo-insight-panel {
|
||||
border: 0;
|
||||
background: rgba(255, 255, 255, 0.97);
|
||||
}
|
||||
|
||||
.geo-theme-panel {
|
||||
border-right: 1px solid var(--atlas-line);
|
||||
}
|
||||
|
||||
.geo-insight-panel {
|
||||
border-left: 1px solid var(--atlas-line);
|
||||
}
|
||||
|
||||
.geo-theme-panel > .geo-panel-heading,
|
||||
.geo-insight-panel > .geo-panel-heading {
|
||||
min-height: 5rem;
|
||||
padding: 1rem;
|
||||
background: #fbfdfc;
|
||||
}
|
||||
|
||||
.geo-theme-list {
|
||||
gap: 0.45rem;
|
||||
padding: 0.7rem;
|
||||
}
|
||||
|
||||
.geo-theme-option {
|
||||
min-height: 3.65rem;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 0.75rem;
|
||||
padding: 0.65rem 0.72rem;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.geo-theme-option:hover:not(:disabled) {
|
||||
border-color: #c4d9d4;
|
||||
background: #f5faf8;
|
||||
}
|
||||
|
||||
.geo-theme-option-active,
|
||||
.geo-theme-option-active:hover:not(:disabled) {
|
||||
border-color: #9bc9be;
|
||||
background: linear-gradient(135deg, #e7f5f1, #f4faf8);
|
||||
box-shadow:
|
||||
inset 3px 0 0 var(--atlas-600),
|
||||
0 6px 16px rgba(8, 42, 38, 0.07);
|
||||
}
|
||||
|
||||
.geo-theme-option strong {
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
.geo-theme-option small,
|
||||
.geo-theme-option i {
|
||||
font-size: 0.69rem;
|
||||
}
|
||||
|
||||
.geo-map-panel,
|
||||
.geo-map-stage,
|
||||
.map-frame-surface {
|
||||
background: #dce7e3;
|
||||
}
|
||||
|
||||
.geo-explorer .map-container,
|
||||
.map-frame-surface .map-container {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.geo-explorer .maplibregl-ctrl-group,
|
||||
.map-frame-surface .maplibregl-ctrl-group {
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(171, 192, 186, 0.78);
|
||||
border-radius: 0.65rem;
|
||||
box-shadow: var(--atlas-shadow-md);
|
||||
}
|
||||
|
||||
.geo-explorer .maplibregl-ctrl button,
|
||||
.map-frame-surface .maplibregl-ctrl button {
|
||||
width: 2.4rem;
|
||||
height: 2.4rem;
|
||||
}
|
||||
|
||||
.geo-map-toolbar,
|
||||
.map-toolbar {
|
||||
border: 1px solid rgba(172, 194, 188, 0.82);
|
||||
border-radius: 0.78rem;
|
||||
background: rgba(255, 255, 255, 0.94);
|
||||
box-shadow: var(--atlas-shadow-floating);
|
||||
backdrop-filter: blur(16px);
|
||||
}
|
||||
|
||||
.geo-explorer-footer {
|
||||
min-height: 3rem;
|
||||
border-top: 1px solid var(--atlas-line);
|
||||
background: #fbfdfc;
|
||||
color: var(--ink-500);
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
/* Disclosures and forms */
|
||||
|
||||
.technical-run-list,
|
||||
.area-catalog-disclosure,
|
||||
.dataset-history-disclosure,
|
||||
.dataset-technical-details,
|
||||
.quality-advanced-disclosure,
|
||||
.provider-technical-details,
|
||||
.secondary-analysis-disclosure,
|
||||
.status-details-disclosure,
|
||||
.export-history-disclosure {
|
||||
border-color: var(--atlas-line);
|
||||
border-radius: var(--atlas-radius-md);
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.technical-run-list > summary,
|
||||
.area-catalog-disclosure > summary,
|
||||
.dataset-history-disclosure > summary,
|
||||
.dataset-technical-details > summary,
|
||||
.quality-advanced-disclosure > summary,
|
||||
.provider-technical-details > summary,
|
||||
.secondary-analysis-disclosure > summary,
|
||||
.status-details-disclosure > summary,
|
||||
.export-history-disclosure > summary {
|
||||
min-height: 3.15rem;
|
||||
padding: 0.75rem 0.95rem;
|
||||
color: var(--ink-700);
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
.workbench-shell input,
|
||||
.workbench-shell select,
|
||||
.workbench-shell textarea {
|
||||
min-height: 2.65rem;
|
||||
border-color: var(--atlas-line-strong);
|
||||
border-radius: 0.62rem;
|
||||
background: #fcfdfd;
|
||||
}
|
||||
|
||||
.workbench-shell input:focus,
|
||||
.workbench-shell select:focus,
|
||||
.workbench-shell textarea:focus {
|
||||
border-color: var(--atlas-600);
|
||||
background: #ffffff;
|
||||
box-shadow: 0 0 0 4px rgba(21, 152, 137, 0.12);
|
||||
}
|
||||
|
||||
@media (min-width: 1800px) {
|
||||
.workbench-layout {
|
||||
grid-template-columns: 16rem minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.workbench-main {
|
||||
padding: 1.9rem 2.25rem 3rem;
|
||||
}
|
||||
|
||||
.workspace-grid-data {
|
||||
grid-template-columns: minmax(18rem, 0.78fr) minmax(28rem, 1.5fr) minmax(
|
||||
20rem,
|
||||
0.9fr
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1360px) and (min-width: 921px) {
|
||||
.workbench-layout {
|
||||
grid-template-columns: 5.75rem minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.workbench-sidebar {
|
||||
padding-inline: 0.55rem;
|
||||
}
|
||||
|
||||
.sidebar-brand {
|
||||
justify-content: center;
|
||||
padding-inline: 0;
|
||||
}
|
||||
|
||||
.sidebar-brand-copy,
|
||||
.nav-section-label,
|
||||
.workbench-sidebar .nav-item > span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.workbench-sidebar .nav-item {
|
||||
justify-content: center;
|
||||
padding-inline: 0;
|
||||
}
|
||||
|
||||
.workbench-sidebar .nav-item-icon {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 920px) {
|
||||
.workbench-sidebar {
|
||||
color: var(--ink-700);
|
||||
background: rgba(255, 255, 255, 0.97);
|
||||
box-shadow: 0 8px 24px rgba(8, 42, 38, 0.08);
|
||||
}
|
||||
|
||||
.workbench-sidebar .nav-item {
|
||||
color: var(--ink-500);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.workbench-sidebar .nav-item-active,
|
||||
.workbench-sidebar .nav-item-active:hover:not(:disabled) {
|
||||
border-color: #acd2c9;
|
||||
color: var(--atlas-800);
|
||||
background: var(--atlas-50);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.workbench-sidebar .nav-item-active::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.workbench-sidebar .nav-item-icon,
|
||||
.workbench-sidebar .nav-item-active .nav-item-icon {
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
.workspace-notice {
|
||||
top: 0.75rem;
|
||||
right: 0.75rem;
|
||||
}
|
||||
|
||||
.status-strip-header {
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
.status-readiness {
|
||||
width: 5.8rem;
|
||||
height: 5.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 620px) {
|
||||
.workbench-main {
|
||||
padding: 1rem 0.8rem 1.6rem;
|
||||
}
|
||||
|
||||
.workspace-heading h2 {
|
||||
font-size: 1.55rem;
|
||||
}
|
||||
|
||||
.status-strip-header {
|
||||
padding: 1.15rem;
|
||||
}
|
||||
|
||||
.status-readiness {
|
||||
width: 5.2rem;
|
||||
height: 5.2rem;
|
||||
}
|
||||
|
||||
.status-readiness-copy strong {
|
||||
font-size: 1.15rem;
|
||||
}
|
||||
|
||||
.geo-explorer {
|
||||
border-radius: var(--atlas-radius-lg);
|
||||
}
|
||||
|
||||
.geo-explorer-header {
|
||||
padding: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.workbench-shell *,
|
||||
.workbench-shell *::before,
|
||||
.workbench-shell *::after {
|
||||
scroll-behavior: auto !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user