diff --git a/campaign-tracker-client/src/workspace/WorkspaceShell.css b/campaign-tracker-client/src/workspace/WorkspaceShell.css new file mode 100644 index 0000000..d396a7f --- /dev/null +++ b/campaign-tracker-client/src/workspace/WorkspaceShell.css @@ -0,0 +1,179 @@ +.workspace-shell { + min-height: 100vh; + background: #f7f9fc; + color: #111827; +} + +.workspace-shell :where(button, a, input, textarea, select, [tabindex]):focus-visible { + outline: 2px solid var(--workspace-focus); + outline-offset: 2px; +} + +.workspace-nav { + border-right: 1px solid var(--workspace-border); + overflow: auto; +} + +.workspace-brand { + padding: 16px 16px 12px; + border-bottom: 1px solid var(--workspace-border); +} + +.workspace-brand h1, +.workspace-inspector h2, +.workspace-board h2 { + margin: 0; +} + +.workspace-brand h1 { + font-size: 22px; + line-height: 30px; +} + +.workspace-brand__eyebrow, +.workspace-kicker { + color: var(--workspace-secondary); + display: block; + font-size: 12px; + font-weight: 700; + letter-spacing: 0; + text-transform: uppercase; +} + +.workspace-main { + min-width: 0; +} + +.workspace-header { + align-items: center; + border-bottom: 1px solid var(--workspace-border); + display: flex; + height: 48px; + justify-content: space-between; + padding: 0 16px; +} + +.workspace-content { + overflow: auto; + padding: 16px; +} + +.workspace-support-notice { + margin-bottom: 12px; +} + +.workspace-board { + background: var(--workspace-surface); + border: 1px solid var(--workspace-border); + border-radius: 4px; + min-width: 0; +} + +.workspace-board__header, +.workspace-board__footer { + align-items: center; + display: flex; + gap: 16px; + justify-content: space-between; + padding: 12px 16px; +} + +.workspace-board__header { + border-bottom: 1px solid var(--workspace-border); +} + +.workspace-board__footer { + border-top: 1px solid var(--workspace-border); +} + +.workspace-table .ant-table { + border-radius: 0; +} + +.workspace-status { + align-items: center; + background: #ffffff; + display: inline-flex; + gap: 5px; + line-height: 20px; + margin-inline-end: 0; +} + +.workspace-row--blocked > td { + background: #fff7f7; +} + +.workspace-inspector { + border-left: 1px solid var(--workspace-border); + overflow: auto; + padding: 12px; +} + +.workspace-inspector--rail { + align-items: start; + display: flex; + justify-content: center; + padding: 12px 4px; +} + +.workspace-inspector__header { + align-items: start; + display: flex; + gap: 8px; + justify-content: space-between; + margin-bottom: 12px; +} + +.workspace-risk-list { + width: 100%; +} + +.workspace-risk-item { + border: 1px solid var(--workspace-border); + border-radius: 4px; + display: grid; + gap: 8px; + padding: 10px; +} + +.workspace-risk-item__id { + color: var(--workspace-text-secondary); + display: block; + font-family: 'IBM Plex Mono', Consolas, monospace; + font-size: 12px; +} + +@media (min-width: 1280px) and (max-width: 1599px) { + .workspace-inspector:not(.workspace-inspector--rail) { + max-width: 288px; + } + + .workspace-content { + padding: 12px; + } +} + +@media (max-width: 1279px) { + .workspace-nav, + .workspace-inspector { + display: none; + } + + .workspace-header { + align-items: start; + flex-direction: column; + gap: 8px; + height: auto; + padding: 12px; + } + + .workspace-content { + padding: 12px; + } + + .workspace-board__header, + .workspace-board__footer { + align-items: start; + flex-direction: column; + } +}