Calm workbench layout density
This commit is contained in:
Codex
+349
-7
@@ -1,15 +1,15 @@
|
||||
@import 'maplibre-gl/dist/maplibre-gl.css';
|
||||
|
||||
:root {
|
||||
--bg: #eef4f1;
|
||||
--bg: #f4f7f5;
|
||||
--panel: #ffffff;
|
||||
--panel-soft: #f8fbf9;
|
||||
--panel-soft: #fafcfb;
|
||||
--surface-raised: #ffffff;
|
||||
--surface-sunken: #f3f8f5;
|
||||
--surface-sunken: #f7faf8;
|
||||
--text: #132018;
|
||||
--muted: #5f6f67;
|
||||
--line: #cbd8d0;
|
||||
--line-strong: #9fb2a7;
|
||||
--line: #dbe4de;
|
||||
--line-strong: #b8c8bf;
|
||||
--accent: #0f766e;
|
||||
--accent-strong: #115e59;
|
||||
--accent-soft: #e3f4ef;
|
||||
@@ -17,8 +17,8 @@
|
||||
--focus-ring-soft: rgba(15, 118, 110, 0.2);
|
||||
--warning: #b45309;
|
||||
--danger: #991b1b;
|
||||
--shadow: 0 12px 32px rgba(33, 48, 41, 0.08);
|
||||
--shadow-soft: 0 8px 24px rgba(33, 48, 41, 0.06);
|
||||
--shadow: 0 10px 26px rgba(33, 48, 41, 0.06);
|
||||
--shadow-soft: 0 6px 18px rgba(33, 48, 41, 0.045);
|
||||
color-scheme: light;
|
||||
}
|
||||
|
||||
@@ -3780,3 +3780,345 @@ button.entity-card {
|
||||
height: 22rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Sprint 113 calm workbench UX pass: reduce repeated navigation and visual density without changing workflows. */
|
||||
body {
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
button {
|
||||
background: #ffffff;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
button:hover:not(:disabled) {
|
||||
box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.08);
|
||||
}
|
||||
|
||||
section {
|
||||
border-color: var(--line);
|
||||
background: rgba(255, 255, 255, 0.98);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.workbench-shell {
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
.workbench-topbar {
|
||||
grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr);
|
||||
min-height: 3.65rem;
|
||||
padding: 0.45rem 0.9rem;
|
||||
background: rgba(255, 255, 255, 0.96);
|
||||
box-shadow: 0 1px 0 rgba(19, 32, 24, 0.04);
|
||||
}
|
||||
|
||||
.brand-block h1 {
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
|
||||
.context-bar {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 0.45rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.context-bar > div {
|
||||
min-height: 2.38rem;
|
||||
min-width: 0;
|
||||
max-width: 13rem;
|
||||
border-color: transparent;
|
||||
border-radius: 6px;
|
||||
padding: 0.28rem 0.52rem;
|
||||
background: #f8fbf9;
|
||||
}
|
||||
|
||||
.context-bar span {
|
||||
font-size: 0.58rem;
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
|
||||
.context-bar strong {
|
||||
overflow: hidden;
|
||||
margin-top: 0.1rem;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.2;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.workbench-layout {
|
||||
grid-template-columns: 10.25rem minmax(0, 1fr) 18.5rem;
|
||||
height: calc(100vh - 3.65rem);
|
||||
}
|
||||
|
||||
.workbench-sidebar,
|
||||
.workbench-inspector {
|
||||
background: #f8faf8;
|
||||
}
|
||||
|
||||
.workbench-sidebar {
|
||||
padding: 0.58rem;
|
||||
}
|
||||
|
||||
.workbench-sidebar nav {
|
||||
gap: 0.28rem;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
min-height: 2.55rem;
|
||||
border-radius: 6px;
|
||||
padding: 0.42rem 0.52rem;
|
||||
}
|
||||
|
||||
.nav-item span {
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
.nav-item small {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-item-active {
|
||||
border-color: rgba(15, 118, 110, 0.22);
|
||||
box-shadow: inset 3px 0 0 var(--accent);
|
||||
}
|
||||
|
||||
.nav-item-active small {
|
||||
display: block;
|
||||
font-size: 0.68rem;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.workbench-main {
|
||||
padding: 0.82rem 0.95rem 1.05rem;
|
||||
}
|
||||
|
||||
.workbench-inspector {
|
||||
padding: 0.7rem;
|
||||
}
|
||||
|
||||
.workspace-heading {
|
||||
margin-bottom: 0.65rem;
|
||||
border: 0;
|
||||
border-bottom: 1px solid var(--line);
|
||||
border-radius: 0;
|
||||
padding: 0.2rem 0 0.65rem;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.workspace-heading .eyebrow {
|
||||
margin-bottom: 0.12rem;
|
||||
}
|
||||
|
||||
.workspace-heading h2 {
|
||||
font-size: 1.18rem;
|
||||
}
|
||||
|
||||
.workspace-heading p:last-child {
|
||||
max-width: 25rem;
|
||||
font-size: 0.84rem;
|
||||
}
|
||||
|
||||
.workspace-command-bar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.workspace-stack,
|
||||
.workspace-grid {
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.workspace-panel,
|
||||
.workflow-guidance-panel,
|
||||
.overview-actions,
|
||||
.workbench-status-strip,
|
||||
.quality-summary-surface,
|
||||
.quality-evidence-surface,
|
||||
.quality-control-surface,
|
||||
.quality-history-surface,
|
||||
.change-detection-input-surface,
|
||||
.change-detection-result-surface,
|
||||
.change-detection-warning-surface,
|
||||
.map-control-surface,
|
||||
.map-frame-surface,
|
||||
.map-inspection-surface,
|
||||
.inspector-card,
|
||||
.lab-block,
|
||||
.result-summary-card,
|
||||
.handoff-action-card,
|
||||
.system-provider-card {
|
||||
border-radius: 6px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.workbench-status-strip {
|
||||
padding: 0.82rem;
|
||||
}
|
||||
|
||||
.status-strip-header {
|
||||
gap: 0.65rem;
|
||||
margin-bottom: 0.7rem;
|
||||
}
|
||||
|
||||
.status-strip-header h2,
|
||||
.workflow-guidance-panel h2,
|
||||
.overview-actions h2,
|
||||
.workspace-panel h2 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.status-next-action {
|
||||
font-size: 0.86rem;
|
||||
}
|
||||
|
||||
.status-strip-grid {
|
||||
grid-template-columns: repeat(6, minmax(0, 1fr));
|
||||
gap: 0.45rem;
|
||||
}
|
||||
|
||||
.status-tile {
|
||||
min-height: auto;
|
||||
padding: 0.5rem;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.status-tile-topline {
|
||||
gap: 0.28rem;
|
||||
}
|
||||
|
||||
.status-tile strong {
|
||||
margin-top: 0.25rem;
|
||||
font-size: 0.84rem;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.status-tile p {
|
||||
margin-top: 0.18rem;
|
||||
font-size: 0.72rem;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.status-pill,
|
||||
.workflow-step-status,
|
||||
.status-badge {
|
||||
border-radius: 999px;
|
||||
padding: 0.16rem 0.38rem;
|
||||
font-size: 0.62rem;
|
||||
}
|
||||
|
||||
.workflow-guidance-panel {
|
||||
border-left: 0;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.workflow-guidance-steps {
|
||||
gap: 0.45rem;
|
||||
}
|
||||
|
||||
.workflow-guidance-step {
|
||||
min-height: 4.35rem;
|
||||
padding: 0.5rem 0.55rem;
|
||||
border-color: var(--line);
|
||||
}
|
||||
|
||||
.workflow-guidance-step small {
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.inspector-tabs {
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.inspector-tab {
|
||||
min-height: 2rem;
|
||||
padding: 0.34rem 0.45rem;
|
||||
font-size: 0.76rem;
|
||||
}
|
||||
|
||||
.inspector-card {
|
||||
padding: 0.68rem;
|
||||
}
|
||||
|
||||
.inspector-field {
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1360px) {
|
||||
.workbench-layout {
|
||||
grid-template-columns: 9.5rem minmax(0, 1fr);
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.workbench-inspector {
|
||||
max-height: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 980px) {
|
||||
.workbench-topbar {
|
||||
position: sticky;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 0.45rem;
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
.context-bar {
|
||||
justify-content: flex-start;
|
||||
overflow-x: auto;
|
||||
padding-bottom: 0.15rem;
|
||||
}
|
||||
|
||||
.context-bar > div {
|
||||
min-width: 9.25rem;
|
||||
}
|
||||
|
||||
.workbench-sidebar {
|
||||
top: 5.3rem;
|
||||
}
|
||||
|
||||
.workspace-command-bar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.status-strip-grid {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 620px) {
|
||||
.workbench-topbar,
|
||||
.workbench-main,
|
||||
.workbench-inspector,
|
||||
.workbench-sidebar {
|
||||
padding: 0.62rem;
|
||||
}
|
||||
|
||||
.context-bar > div {
|
||||
min-width: 8.5rem;
|
||||
}
|
||||
|
||||
.workbench-sidebar .nav-item {
|
||||
min-width: 7.75rem;
|
||||
min-height: 2.75rem;
|
||||
}
|
||||
|
||||
.nav-item-active small {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.workspace-heading {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.workspace-heading p:last-child {
|
||||
margin-top: 0.25rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.status-strip-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user