456 行
11 KiB
CSS
456 行
11 KiB
CSS
/*
|
|
Design tokens source:
|
|
- aligned to R29 semantic workbench system
|
|
*/
|
|
|
|
@import "@material-symbols/font-400/outlined.css";
|
|
@import "./styles/mobile-touch.css";
|
|
@import "./design/theme.css";
|
|
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
html {
|
|
min-height: 100%;
|
|
-webkit-text-size-adjust: 100%;
|
|
text-size-adjust: 100%;
|
|
color-scheme: light;
|
|
background: var(--color-bg-canvas);
|
|
}
|
|
|
|
body {
|
|
min-height: 100vh;
|
|
min-height: -webkit-fill-available;
|
|
background: linear-gradient(180deg, #ffffff 0%, var(--color-bg-canvas) 16rem, #eef2f6 100%);
|
|
background-attachment: fixed;
|
|
color: var(--color-text-primary);
|
|
@apply font-sans antialiased selection:bg-primary selection:text-white;
|
|
}
|
|
|
|
#root {
|
|
min-height: -webkit-fill-available;
|
|
@apply min-h-screen flex flex-col;
|
|
}
|
|
|
|
summary::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
.layout-container {
|
|
@apply mx-auto w-full px-0 sm:px-1 lg:px-2;
|
|
}
|
|
|
|
.page-scaffold {
|
|
animation: page-reveal 320ms ease-out both;
|
|
@apply space-y-5;
|
|
}
|
|
|
|
.workbench-hero {
|
|
position: relative;
|
|
overflow: hidden;
|
|
background: rgba(255, 255, 255, 0.96);
|
|
border: 1px solid rgba(226, 232, 240, 0.92);
|
|
border-radius: var(--radius-panel);
|
|
box-shadow: var(--shadow-xs);
|
|
@apply flex flex-col gap-4 px-5 py-5 md:flex-row md:items-end md:justify-between md:px-6;
|
|
}
|
|
|
|
.workbench-hero::after {
|
|
display: none;
|
|
}
|
|
|
|
.workbench-hero > * {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.workbench-hero__eyebrow {
|
|
color: var(--color-accent-primary);
|
|
@apply text-xs font-bold uppercase;
|
|
}
|
|
|
|
.workbench-hero__title {
|
|
color: var(--color-text-primary);
|
|
@apply mt-1 text-2xl font-semibold md:text-3xl;
|
|
}
|
|
|
|
.workbench-hero__subtitle {
|
|
color: var(--color-text-secondary);
|
|
@apply mt-2 max-w-3xl text-sm leading-6;
|
|
}
|
|
|
|
.workbench-hero--compact {
|
|
@apply gap-4 px-5 py-5 md:px-6 md:py-6;
|
|
}
|
|
|
|
.workbench-hero--compact .workbench-hero__title {
|
|
@apply text-2xl md:text-3xl;
|
|
}
|
|
|
|
.workbench-hero--compact .workbench-hero__subtitle {
|
|
@apply mt-2 max-w-2xl text-sm leading-6;
|
|
}
|
|
|
|
.card-std {
|
|
background: var(--color-bg-surface-raised);
|
|
border: 1px solid rgba(226, 232, 240, 0.92);
|
|
border-radius: var(--radius-panel);
|
|
box-shadow: var(--shadow-xs);
|
|
backdrop-filter: none;
|
|
}
|
|
|
|
.card-title {
|
|
color: var(--color-text-tertiary);
|
|
@apply text-xs font-semibold uppercase tracking-[0.18em];
|
|
}
|
|
|
|
.card-desc {
|
|
color: var(--color-text-secondary);
|
|
@apply mt-2 text-sm leading-6;
|
|
}
|
|
|
|
.card-value {
|
|
color: var(--color-text-primary);
|
|
@apply text-3xl font-semibold tracking-tight;
|
|
}
|
|
|
|
.section-panel {
|
|
position: relative;
|
|
overflow: hidden;
|
|
@apply p-4 md:p-5;
|
|
}
|
|
|
|
.section-panel::before {
|
|
display: none;
|
|
}
|
|
|
|
.section-panel__header {
|
|
position: relative;
|
|
z-index: 1;
|
|
@apply flex flex-wrap items-start justify-between gap-3;
|
|
}
|
|
|
|
.section-panel__title {
|
|
color: var(--color-text-primary);
|
|
@apply text-base font-semibold;
|
|
}
|
|
|
|
.section-panel__desc {
|
|
color: var(--color-text-secondary);
|
|
@apply mt-1 text-sm leading-6;
|
|
}
|
|
|
|
.section-panel__body {
|
|
position: relative;
|
|
z-index: 1;
|
|
@apply mt-4;
|
|
}
|
|
|
|
.metric-card {
|
|
position: relative;
|
|
overflow: hidden;
|
|
background: rgba(255, 255, 255, 0.96);
|
|
border: 1px solid rgba(226, 232, 240, 0.96);
|
|
border-radius: var(--radius-panel);
|
|
box-shadow: var(--shadow-xs);
|
|
@apply block px-4 py-4 transition duration-150 hover:border-slate-300 hover:bg-white;
|
|
}
|
|
|
|
.metric-card::before {
|
|
position: absolute;
|
|
inset: 0 auto 0 0;
|
|
width: 3px;
|
|
content: "";
|
|
background: linear-gradient(180deg, var(--color-accent-primary), rgba(19, 168, 184, 0.72));
|
|
opacity: 0.82;
|
|
}
|
|
|
|
.metric-card--warning {
|
|
background: rgba(255, 251, 235, 0.92);
|
|
@apply border-amber-200;
|
|
}
|
|
|
|
.metric-card--warning::before {
|
|
@apply bg-amber-500;
|
|
}
|
|
|
|
.metric-card--danger {
|
|
background: rgba(254, 242, 242, 0.94);
|
|
@apply border-red-200;
|
|
}
|
|
|
|
.metric-card--danger::before {
|
|
@apply bg-red-500;
|
|
}
|
|
|
|
.metric-card__title {
|
|
color: var(--color-text-secondary);
|
|
@apply text-sm font-medium;
|
|
}
|
|
|
|
.metric-card__value {
|
|
color: var(--color-text-primary);
|
|
@apply mt-2 text-xl font-semibold tracking-tight;
|
|
}
|
|
|
|
.metric-card__note {
|
|
color: var(--color-text-secondary);
|
|
@apply mt-2 text-sm leading-6;
|
|
}
|
|
|
|
.info-chip {
|
|
border-color: rgba(203, 213, 225, 0.86);
|
|
background: rgba(255, 255, 255, 0.82);
|
|
color: var(--color-text-secondary);
|
|
@apply inline-flex items-center rounded-full border px-3 py-1 text-xs font-medium;
|
|
}
|
|
|
|
.surface-muted {
|
|
border-color: rgba(226, 232, 240, 0.92);
|
|
background: rgba(248, 250, 252, 0.86);
|
|
@apply rounded-2xl border;
|
|
}
|
|
|
|
.input-std {
|
|
border-color: rgba(203, 213, 225, 0.92);
|
|
background: rgba(255, 255, 255, 0.96);
|
|
color: var(--color-text-primary);
|
|
@apply h-11 w-full rounded-xl border px-3 py-2 text-sm shadow-sm outline-none transition placeholder:text-zinc-400 focus:border-primary focus:ring-2 focus:ring-primary/15;
|
|
}
|
|
|
|
.select-std {
|
|
border-color: rgba(203, 213, 225, 0.92);
|
|
background: rgba(255, 255, 255, 0.96);
|
|
color: var(--color-text-primary);
|
|
@apply h-11 w-full rounded-xl border px-3 py-2 text-sm shadow-sm outline-none transition focus:border-primary focus:ring-2 focus:ring-primary/15;
|
|
}
|
|
|
|
.select-sm {
|
|
border-color: rgba(203, 213, 225, 0.92);
|
|
background: rgba(255, 255, 255, 0.96);
|
|
color: var(--color-text-secondary);
|
|
@apply h-8 rounded-lg border px-2 py-1 text-xs font-medium shadow-sm outline-none transition focus:border-primary focus:ring-2 focus:ring-primary/15;
|
|
}
|
|
|
|
.table-container {
|
|
border-color: rgba(226, 232, 240, 0.92);
|
|
background: var(--color-bg-surface-raised);
|
|
@apply overflow-hidden rounded-2xl border shadow-sm backdrop-blur;
|
|
}
|
|
|
|
.table-header {
|
|
border-color: rgba(226, 232, 240, 0.82);
|
|
background: rgba(248, 250, 252, 0.9);
|
|
@apply border-b;
|
|
}
|
|
|
|
.table-th {
|
|
color: var(--color-text-tertiary);
|
|
@apply px-6 py-4 text-left text-xs font-semibold uppercase tracking-wide;
|
|
}
|
|
|
|
.table-row {
|
|
@apply transition-colors hover:bg-slate-50/90;
|
|
}
|
|
|
|
.table-td {
|
|
color: var(--color-text-secondary);
|
|
@apply px-6 py-4 text-sm;
|
|
}
|
|
|
|
.table-td-strong {
|
|
color: var(--color-text-primary);
|
|
@apply px-6 py-4 text-sm font-semibold;
|
|
}
|
|
|
|
.page-shell-grid {
|
|
@apply grid gap-6 xl:grid-cols-[minmax(0,1fr),360px];
|
|
}
|
|
|
|
.detail-shell-grid {
|
|
@apply grid gap-6 xl:grid-cols-[minmax(0,1.4fr),minmax(320px,0.8fr)];
|
|
}
|
|
|
|
.badge-success {
|
|
@apply inline-flex items-center rounded-full bg-emerald-50 px-2.5 py-0.5 text-xs font-semibold text-emerald-700 ring-1 ring-inset ring-emerald-600/15;
|
|
}
|
|
|
|
.badge-warning {
|
|
@apply inline-flex items-center rounded-full bg-amber-50 px-2.5 py-0.5 text-xs font-semibold text-amber-700 ring-1 ring-inset ring-amber-600/10;
|
|
}
|
|
|
|
.badge-error {
|
|
@apply inline-flex items-center rounded-full bg-red-50 px-2.5 py-0.5 text-xs font-semibold text-red-700 ring-1 ring-inset ring-red-600/10;
|
|
}
|
|
|
|
.badge-neutral {
|
|
background: rgba(241, 245, 249, 0.92);
|
|
color: var(--color-text-secondary);
|
|
@apply inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold ring-1 ring-inset ring-slate-300/55;
|
|
}
|
|
|
|
.portal-metric-strip {
|
|
@apply grid gap-3 md:grid-cols-2 xl:grid-cols-4;
|
|
}
|
|
|
|
.portal-home-grid {
|
|
@apply grid gap-5 xl:grid-cols-[minmax(0,2fr),minmax(320px,0.92fr)] xl:items-stretch;
|
|
}
|
|
|
|
.portal-home-grid--collaboration {
|
|
@apply xl:grid-cols-[minmax(0,1.55fr),minmax(320px,0.9fr)];
|
|
}
|
|
|
|
.portal-panel-fill {
|
|
@apply h-full;
|
|
}
|
|
|
|
.portal-list-card {
|
|
background: rgba(255, 255, 255, 0.92);
|
|
border: 1px solid rgba(226, 232, 240, 0.94);
|
|
border-radius: var(--radius-lg);
|
|
box-shadow: var(--shadow-xs);
|
|
@apply block px-3.5 py-3.5 transition duration-150;
|
|
}
|
|
|
|
.portal-list-card:hover {
|
|
background: #ffffff;
|
|
border-color: rgba(203, 213, 225, 0.96);
|
|
}
|
|
|
|
.portal-list-card--warning {
|
|
background: rgba(255, 251, 235, 0.9);
|
|
border-color: rgba(245, 158, 11, 0.36);
|
|
}
|
|
|
|
.portal-list-card--compact {
|
|
border-radius: var(--radius-lg);
|
|
@apply px-3.5 py-3.5;
|
|
}
|
|
|
|
.portal-action-stack {
|
|
@apply grid gap-3 sm:grid-cols-2 xl:grid-cols-1;
|
|
}
|
|
|
|
.portal-action-tile {
|
|
min-height: 100%;
|
|
background: rgba(255, 255, 255, 0.96);
|
|
border: 1px solid rgba(226, 232, 240, 0.94);
|
|
border-radius: var(--radius-lg);
|
|
box-shadow: var(--shadow-xs);
|
|
@apply px-3.5 py-3.5 text-left transition duration-150;
|
|
}
|
|
|
|
.portal-action-tile:hover {
|
|
border-color: rgba(203, 213, 225, 0.96);
|
|
background: #ffffff;
|
|
}
|
|
|
|
.portal-action-tile--disabled {
|
|
background: rgba(241, 245, 249, 0.86);
|
|
color: var(--color-text-tertiary);
|
|
cursor: not-allowed;
|
|
transform: none;
|
|
}
|
|
|
|
.portal-action-tile--compact {
|
|
@apply px-3.5 py-3.5;
|
|
}
|
|
|
|
.portal-action-icon {
|
|
background: rgba(0, 57, 138, 0.08);
|
|
color: var(--color-accent-primary);
|
|
@apply flex size-10 items-center justify-center rounded-xl;
|
|
}
|
|
|
|
.portal-action-icon--muted {
|
|
background: rgba(226, 232, 240, 0.72);
|
|
color: var(--color-text-tertiary);
|
|
}
|
|
|
|
.portal-status-card {
|
|
background: rgba(255, 255, 255, 0.92);
|
|
border: 1px solid rgba(226, 232, 240, 0.94);
|
|
border-radius: var(--radius-panel);
|
|
@apply px-4 py-4;
|
|
}
|
|
|
|
.portal-team-list {
|
|
border: 1px solid rgba(226, 232, 240, 0.94);
|
|
background: rgba(255, 255, 255, 0.64);
|
|
@apply overflow-hidden rounded-2xl divide-y divide-slate-200/80;
|
|
}
|
|
|
|
.portal-team-row {
|
|
background: rgba(255, 255, 255, 0.84);
|
|
@apply flex min-h-[64px] items-center gap-3 px-4 py-3;
|
|
}
|
|
|
|
.portal-panel-footer {
|
|
color: var(--color-text-secondary);
|
|
@apply mt-4 flex flex-wrap items-center justify-between gap-3 text-xs leading-5;
|
|
}
|
|
|
|
.portal-insight-tabs__list {
|
|
@apply h-10 rounded-full border-slate-200 bg-slate-50 p-1;
|
|
}
|
|
|
|
.portal-insight-tabs__content {
|
|
@apply mt-4;
|
|
}
|
|
|
|
.portal-secondary-drawer {
|
|
@apply p-4 md:p-5;
|
|
}
|
|
|
|
.portal-secondary-summary {
|
|
@apply flex cursor-pointer list-none items-center justify-between gap-4 text-left;
|
|
}
|
|
|
|
.portal-secondary-summary__toggle {
|
|
color: var(--color-text-tertiary);
|
|
@apply shrink-0 text-xs font-semibold uppercase tracking-[0.18em];
|
|
}
|
|
|
|
.portal-secondary-drawer__body {
|
|
@apply mt-4 space-y-5;
|
|
}
|
|
|
|
.portal-secondary-compact-grid {
|
|
@apply grid gap-4 xl:grid-cols-2;
|
|
}
|
|
|
|
.portal-compact-group {
|
|
@apply rounded-xl border border-slate-200 bg-white/80 px-3.5 py-3.5;
|
|
}
|
|
|
|
.portal-compact-group__title {
|
|
color: var(--color-text-primary);
|
|
@apply text-sm font-semibold;
|
|
}
|
|
|
|
.portal-compact-group__body {
|
|
@apply mt-3 space-y-2;
|
|
}
|
|
|
|
.portal-compact-row {
|
|
@apply flex min-h-9 items-center justify-between gap-3 rounded-lg px-2 py-1.5 text-sm text-slate-700 transition-colors hover:bg-slate-50 hover:text-slate-950;
|
|
}
|
|
}
|
|
|
|
@keyframes page-reveal {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(8px);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|