| @import './styles/variables.css'; |
|
|
| :root { |
| color-scheme: dark; |
| } |
|
|
| #root { |
| min-height: 100vh; |
| display: flex; |
| flex-direction: column; |
| } |
|
|
| |
| .glass-panel { |
| background: var(--glass-bg); |
| backdrop-filter: var(--blur); |
| -webkit-backdrop-filter: var(--blur); |
| border: 1px solid var(--glass-border); |
| border-radius: var(--radius-md); |
| box-shadow: var(--glass-shadow); |
| } |
|
|
| .btn { |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| padding: 0.6rem 1.2rem; |
| border-radius: var(--radius-sm); |
| font-weight: 500; |
| gap: var(--space-sm); |
| transition: var(--transition); |
| } |
|
|
| .btn-primary { |
| background: var(--primary); |
| color: white; |
| } |
|
|
| .btn-primary:hover { |
| background: var(--primary-hover); |
| transform: translateY(-2px); |
| box-shadow: 0 4px 12px hsla(250, 85%, 65%, 0.4); |
| } |
|
|
| .btn-glass { |
| background: var(--glass-bg); |
| border: 1px solid var(--glass-border); |
| color: var(--text-main); |
| backdrop-filter: var(--blur); |
| } |
|
|
| .btn-glass:hover { |
| background: rgba(255, 255, 255, 0.1); |
| border-color: rgba(255, 255, 255, 0.2); |
| } |
|
|
| |
| @keyframes fadeIn { |
| from { opacity: 0; transform: translateY(10px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
|
|
| .animate-fade-in { |
| animation: fadeIn 0.5s ease-out forwards; |
| } |
|
|
| .app-container { |
| display: flex; |
| height: 100dvh; |
| overflow: hidden; |
| position: relative; |
| } |
|
|
| .app-sidebar { |
| flex: 0 0 280px; |
| } |
|
|
| .sidebar-brand { |
| padding: var(--space-lg); |
| display: flex; |
| align-items: center; |
| gap: var(--space-sm); |
| } |
|
|
| .sidebar-nav { |
| flex: 1; |
| padding: var(--space-md); |
| } |
|
|
| .sidebar-user { |
| padding: var(--space-lg); |
| border-top: 1px solid var(--glass-border); |
| } |
|
|
| .sidebar-backdrop { |
| display: none; |
| } |
|
|
| .app-main { |
| flex: 1; |
| min-width: 0; |
| overflow-y: auto; |
| padding: var(--space-md); |
| display: flex; |
| flex-direction: column; |
| gap: var(--space-lg); |
| } |
|
|
| .app-header { position: sticky; top: 0; background: var(--bg-deep); z-index: 80; border-bottom: 1px solid var(--glass-border); backdrop-filter: blur(8px); |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| padding: var(--space-sm) var(--space-md); |
| gap: var(--space-md); |
| } |
|
|
| .api-status { |
| padding: 0.4rem 1rem; |
| display: flex; |
| align-items: center; |
| gap: var(--space-sm); |
| font-size: 0.9rem; |
| white-space: nowrap; |
| } |
|
|
| .app-content { |
| width: 100%; |
| } |
|
|
| .page-heading { |
| margin-bottom: var(--space-xl); |
| } |
|
|
| .page-heading h2, |
| .marketplace-header h2 { |
| font-size: clamp(1.65rem, 4vw, 2.5rem); |
| margin-bottom: var(--space-xs); |
| line-height: 1.1; |
| } |
|
|
| .dashboard-grid, |
| .marketplace-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); |
| gap: var(--space-lg); |
| align-items: stretch; |
| } |
|
|
| .dashboard-heading { |
| display: flex; |
| align-items: flex-end; |
| justify-content: space-between; |
| gap: var(--space-lg); |
| } |
|
|
| .dashboard-controls { |
| display: grid; |
| grid-template-columns: minmax(260px, 1fr) auto auto; |
| align-items: center; |
| gap: var(--space-md); |
| padding: var(--space-md); |
| margin-bottom: var(--space-lg); |
| } |
|
|
| .dashboard-search, |
| .dashboard-filter-group, |
| .dashboard-results { |
| display: flex; |
| align-items: center; |
| gap: var(--space-sm); |
| } |
|
|
| .dashboard-search { |
| min-width: 0; |
| padding: 0 0.85rem; |
| border: 1px solid var(--glass-border); |
| border-radius: var(--radius-md); |
| background: rgba(255,255,255,0.05); |
| color: var(--text-dim); |
| } |
|
|
| .dashboard-search input, |
| .dashboard-filter-group select { |
| min-width: 0; |
| color: var(--text-main); |
| background: transparent; |
| border: 0; |
| outline: 0; |
| font: inherit; |
| } |
|
|
| .dashboard-search input { |
| width: 100%; |
| padding: 0.8rem 0; |
| } |
|
|
| .dashboard-search input::placeholder { |
| color: var(--text-muted); |
| } |
|
|
| .dashboard-filter-group select { |
| min-height: 42px; |
| padding: 0 0.75rem; |
| border: 1px solid var(--glass-border); |
| border-radius: var(--radius-md); |
| background: rgba(255,255,255,0.05); |
| color-scheme: dark; |
| } |
|
|
| .dashboard-results { |
| justify-content: flex-end; |
| color: var(--text-dim); |
| font-size: 0.85rem; |
| white-space: nowrap; |
| } |
|
|
| .empty-state { |
| padding: var(--space-xl); |
| display: grid; |
| justify-items: start; |
| gap: var(--space-md); |
| margin-bottom: var(--space-lg); |
| } |
|
|
| .empty-state p { |
| color: var(--text-dim); |
| } |
|
|
| .project-card-header, |
| .marketplace-card-footer { |
| display: flex; |
| justify-content: space-between; |
| gap: var(--space-md); |
| } |
|
|
| .project-card-header { |
| align-items: flex-start; |
| margin-bottom: var(--space-md); |
| } |
|
|
| .project-card { |
| min-height: 265px; |
| padding: var(--space-lg); |
| position: relative; |
| overflow: hidden; |
| display: grid; |
| grid-template-rows: minmax(92px, auto) 1fr auto auto; |
| } |
|
|
| .project-card h3 { |
| min-width: 0; |
| margin: 0; |
| font-size: 1.18rem; |
| line-height: 1.22; |
| overflow-wrap: anywhere; |
| } |
|
|
| .project-card-actions { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| flex-shrink: 0; |
| } |
|
|
| .project-card-actions .btn-icon { |
| width: 28px; |
| height: 28px; |
| padding: 4px; |
| } |
|
|
| .project-card-progress { |
| align-self: end; |
| margin-bottom: var(--space-lg); |
| } |
|
|
| .project-card-progress-label { |
| display: flex; |
| justify-content: space-between; |
| gap: var(--space-sm); |
| min-height: 20px; |
| margin-bottom: var(--space-xs); |
| font-size: 0.85rem; |
| } |
|
|
| .project-card-progress-label span:first-child { |
| color: var(--text-dim); |
| } |
|
|
| .project-card-progress-track { |
| height: 6px; |
| width: 100%; |
| overflow: hidden; |
| background: rgba(255,255,255,0.1); |
| border-radius: 3px; |
| } |
|
|
| .project-card-progress-fill { |
| height: 100%; |
| background: var(--accent); |
| border-radius: 3px; |
| box-shadow: 0 0 10px var(--accent); |
| } |
|
|
| .project-card-open { |
| width: 100%; |
| } |
|
|
| .marketplace-card-footer { |
| align-items: center; |
| margin-top: var(--space-md); |
| } |
|
|
| .app-console { |
| margin-top: auto; |
| background: hsl(230, 25%, 5%); |
| } |
|
|
| .login-screen { |
| min-height: 100dvh; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| padding: var(--space-lg); |
| background: radial-gradient(circle at center, var(--bg-main) 0%, var(--bg-deep) 100%); |
| } |
|
|
| .login-panel { |
| width: min(100%, 400px); |
| padding: var(--space-xl); |
| text-align: center; |
| } |
|
|
| .auth-provider-grid, |
| .responsive-two-col { |
| display: grid; |
| grid-template-columns: 1fr 1fr; |
| gap: var(--space-md); |
| } |
|
|
| .marketplace-header { |
| margin-bottom: var(--space-xl); |
| display: flex; |
| justify-content: space-between; |
| align-items: flex-end; |
| gap: var(--space-lg); |
| } |
|
|
| .marketplace-search { |
| position: relative; |
| width: min(100%, 320px); |
| flex: 0 0 320px; |
| } |
|
|
| .form-panel { |
| padding: var(--space-lg); |
| max-width: 600px; |
| margin: 0 auto; |
| } |
|
|
| .form-panel-wide { |
| max-width: 720px; |
| } |
|
|
| .panel-heading { |
| display: flex; |
| align-items: center; |
| gap: var(--space-md); |
| margin-bottom: var(--space-lg); |
| } |
|
|
| .panel-heading-split { |
| justify-content: space-between; |
| } |
|
|
| .button-row { |
| display: flex; |
| gap: var(--space-md); |
| flex-wrap: wrap; |
| } |
|
|
| .task-editor-panel { |
| width: min(100%, 800px); |
| } |
|
|
| .task-editor-textarea { |
| min-height: 260px; |
| } |
|
|
| .spatial-page { |
| display: grid; |
| gap: var(--space-lg); |
| } |
|
|
| .spatial-toolbar { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| gap: var(--space-lg); |
| } |
|
|
| .spatial-toolbar h2 { |
| font-size: clamp(1.5rem, 3vw, 2.25rem); |
| line-height: 1.1; |
| } |
|
|
| .spatial-actions { |
| display: flex; |
| gap: var(--space-md); |
| flex-wrap: wrap; |
| } |
|
|
| .spatial-grid { |
| display: grid; |
| grid-template-columns: minmax(0, 1fr) 320px; |
| gap: var(--space-lg); |
| align-items: stretch; |
| } |
|
|
| .spatial-stage-panel, |
| .spatial-inspector { |
| padding: var(--space-lg); |
| } |
|
|
| .spatial-stage-header { |
| display: flex; |
| justify-content: space-between; |
| gap: var(--space-md); |
| align-items: center; |
| margin-bottom: var(--space-lg); |
| } |
|
|
| .spatial-stage-header h3 { |
| font-size: 1.35rem; |
| } |
|
|
| .spatial-depth-control { |
| display: flex; |
| align-items: center; |
| gap: var(--space-sm); |
| color: var(--text-dim); |
| min-width: 160px; |
| } |
|
|
| .spatial-depth-control input { |
| width: 100%; |
| accent-color: var(--accent); |
| } |
|
|
| .spatial-stage { |
| min-height: 430px; |
| overflow-x: auto; |
| overflow-y: hidden; |
| border: 1px solid var(--glass-border); |
| border-radius: var(--radius-md); |
| background: |
| linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), |
| linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px), |
| radial-gradient(circle at 50% 35%, rgba(0, 255, 255, 0.14), transparent 45%); |
| background-size: 42px 42px, 42px 42px, 100% 100%; |
| perspective: 1200px; |
| } |
|
|
| .spatial-plane { |
| position: relative; |
| min-width: 900px; |
| min-height: 430px; |
| padding: var(--space-lg); |
| display: grid; |
| grid-template-columns: repeat(5, minmax(150px, 1fr)); |
| gap: var(--space-md); |
| transform-style: preserve-3d; |
| } |
|
|
| .spatial-edge-layer { |
| position: absolute; |
| inset: 0; |
| width: 100%; |
| height: 100%; |
| pointer-events: none; |
| overflow: visible; |
| } |
|
|
| .spatial-edge-line { |
| stroke: rgba(0, 255, 255, 0.55); |
| stroke-width: 2; |
| stroke-dasharray: 7 5; |
| } |
|
|
| .spatial-edge-dot { |
| fill: rgba(0, 255, 255, 0.9); |
| } |
|
|
| .spatial-stage.is-compact .spatial-plane { |
| min-width: 760px; |
| grid-template-columns: repeat(5, minmax(130px, 1fr)); |
| } |
|
|
| .spatial-lane { |
| position: relative; |
| min-height: 360px; |
| padding: var(--space-md); |
| border: 1px solid rgba(255,255,255,0.08); |
| border-radius: var(--radius-md); |
| background: rgba(255,255,255,0.035); |
| } |
|
|
| .spatial-lane:not(:last-child)::after { |
| content: ''; |
| position: absolute; |
| top: 50%; |
| right: calc(var(--space-md) * -1); |
| width: var(--space-md); |
| height: 2px; |
| background: linear-gradient(90deg, var(--accent), transparent); |
| opacity: 0.65; |
| } |
|
|
| .spatial-lane-header { |
| display: flex; |
| align-items: center; |
| gap: var(--space-sm); |
| margin-bottom: var(--space-md); |
| color: var(--text-dim); |
| font-size: 0.75rem; |
| text-transform: uppercase; |
| font-weight: 800; |
| } |
|
|
| .spatial-lane-header strong { |
| margin-left: auto; |
| color: var(--text-main); |
| } |
|
|
| .spatial-lane-stack { |
| display: grid; |
| gap: var(--space-sm); |
| } |
|
|
| .spatial-empty { |
| padding: var(--space-md); |
| color: var(--text-muted); |
| border: 1px dashed var(--glass-border); |
| border-radius: var(--radius-md); |
| text-align: center; |
| font-size: 0.85rem; |
| } |
|
|
| .spatial-node { |
| position: relative; |
| width: 100%; |
| min-height: 76px; |
| padding: 0.75rem; |
| display: flex; |
| flex-direction: column; |
| justify-content: center; |
| gap: 0.35rem; |
| text-align: left; |
| color: white; |
| background: rgba(12, 18, 34, 0.92); |
| border: 1px solid var(--glass-border); |
| border-radius: var(--radius-md); |
| box-shadow: 0 18px 36px rgba(0, 0, 0, 0.35); |
| transform-style: preserve-3d; |
| transform: translateZ(8px); |
| } |
|
|
| .spatial-node span { |
| font-size: 0.68rem; |
| text-transform: uppercase; |
| font-weight: 800; |
| color: var(--text-dim); |
| } |
|
|
| .spatial-node strong { |
| font-size: 0.9rem; |
| line-height: 1.2; |
| } |
|
|
| .spatial-node small, |
| .spatial-node em { |
| font-style: normal; |
| font-size: 0.76rem; |
| color: var(--text-dim); |
| } |
|
|
| .spatial-node.is-selected { |
| border-color: var(--accent); |
| box-shadow: 0 0 0 1px var(--accent), 0 0 24px rgba(0, 255, 255, 0.26); |
| } |
|
|
| .status-todo { |
| --status-color: var(--text-muted); |
| } |
|
|
| .status-in_progress { |
| --status-color: var(--info); |
| } |
|
|
| .status-awaiting_approval { |
| --status-color: var(--warning); |
| } |
|
|
| .status-done { |
| --status-color: var(--success); |
| } |
|
|
| .status-failed { |
| --status-color: var(--danger); |
| } |
|
|
| .spatial-node.status-todo, |
| .spatial-node.status-in_progress, |
| .spatial-node.status-awaiting_approval, |
| .spatial-node.status-done, |
| .spatial-node.status-failed { |
| border-color: color-mix(in srgb, var(--status-color), transparent 35%); |
| } |
|
|
| .spatial-node::before { |
| content: ''; |
| position: absolute; |
| inset: 0 auto 0 0; |
| width: 4px; |
| border-radius: var(--radius-md) 0 0 var(--radius-md); |
| background: var(--status-color, var(--accent)); |
| } |
|
|
| .spatial-inspector { |
| display: flex; |
| flex-direction: column; |
| gap: var(--space-lg); |
| } |
|
|
| .spatial-metrics { |
| display: grid; |
| grid-template-columns: 1fr 1fr; |
| gap: var(--space-md); |
| } |
|
|
| .spatial-metrics div { |
| padding: var(--space-md); |
| border: 1px solid var(--glass-border); |
| border-radius: var(--radius-md); |
| background: rgba(255,255,255,0.04); |
| } |
|
|
| .spatial-metrics strong { |
| display: block; |
| font-size: 1.6rem; |
| line-height: 1; |
| } |
|
|
| .spatial-metrics span { |
| color: var(--text-dim); |
| font-size: 0.82rem; |
| } |
|
|
| .spatial-selected { |
| display: flex; |
| gap: var(--space-md); |
| padding: var(--space-md); |
| border: 1px solid var(--glass-border); |
| border-radius: var(--radius-md); |
| background: rgba(255,255,255,0.04); |
| } |
|
|
| .spatial-selected span { |
| color: var(--text-dim); |
| font-size: 0.75rem; |
| text-transform: uppercase; |
| font-weight: 800; |
| } |
|
|
| .spatial-selected p { |
| color: var(--text-dim); |
| margin-top: 0.25rem; |
| } |
|
|
| .spatial-legend { |
| display: grid; |
| gap: var(--space-sm); |
| } |
|
|
| .spatial-legend div { |
| display: flex; |
| align-items: center; |
| gap: var(--space-sm); |
| color: var(--text-dim); |
| } |
|
|
| .spatial-project-select { |
| width: 100%; |
| padding: 0.85rem 1rem; |
| color: var(--text-main); |
| background: rgba(255,255,255,0.05); |
| border: 1px solid var(--glass-border); |
| border-radius: var(--radius-md); |
| outline: none; |
| font: inherit; |
| color-scheme: dark; |
| } |
|
|
| .spatial-inspector-row { |
| display: flex; |
| align-items: center; |
| gap: var(--space-sm); |
| color: var(--text-dim); |
| font-size: 0.85rem; |
| } |
|
|
| .status-dot { |
| width: 10px; |
| height: 10px; |
| border-radius: 999px; |
| background: var(--status-color, var(--accent)); |
| } |
|
|
| .monitoring-page { |
| display: grid; |
| gap: var(--space-lg); |
| } |
|
|
| .monitoring-header { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: var(--space-lg); |
| } |
|
|
| .monitoring-header h2 { |
| font-size: clamp(1.5rem, 3vw, 2.25rem); |
| line-height: 1.1; |
| } |
|
|
| .monitoring-status { |
| padding: var(--space-lg); |
| display: flex; |
| align-items: center; |
| gap: var(--space-md); |
| border-color: color-mix(in srgb, var(--status-color), transparent 50%); |
| } |
|
|
| .monitoring-status.is-ok { |
| --status-color: var(--success); |
| } |
|
|
| .monitoring-status.is-degraded { |
| --status-color: var(--warning); |
| } |
|
|
| .monitoring-status > svg { |
| color: var(--status-color); |
| } |
|
|
| .monitoring-status span { |
| color: var(--text-dim); |
| font-size: 0.75rem; |
| text-transform: uppercase; |
| font-weight: 800; |
| } |
|
|
| .monitoring-status strong { |
| display: block; |
| font-size: 1.35rem; |
| line-height: 1.1; |
| } |
|
|
| .monitoring-status p { |
| color: var(--text-dim); |
| margin-top: var(--space-xs); |
| } |
|
|
| .monitoring-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); |
| gap: var(--space-lg); |
| } |
|
|
| .monitoring-card { |
| padding: var(--space-lg); |
| display: flex; |
| align-items: center; |
| gap: var(--space-md); |
| } |
|
|
| .monitoring-card > svg { |
| color: var(--accent); |
| } |
|
|
| .monitoring-card.is-danger > svg { |
| color: var(--danger); |
| } |
|
|
| .monitoring-card strong { |
| display: block; |
| font-size: 1.7rem; |
| line-height: 1; |
| } |
|
|
| .monitoring-card span { |
| color: var(--text-dim); |
| font-size: 0.85rem; |
| } |
|
|
| .monitoring-checks { |
| padding: var(--space-lg); |
| display: grid; |
| gap: var(--space-md); |
| } |
|
|
| .monitoring-checks div { |
| display: flex; |
| justify-content: space-between; |
| gap: var(--space-md); |
| padding-bottom: var(--space-sm); |
| border-bottom: 1px solid var(--glass-border); |
| } |
|
|
| .monitoring-checks span { |
| color: var(--text-dim); |
| text-transform: capitalize; |
| } |
|
|
| .monitoring-checks small { |
| color: var(--text-muted); |
| } |
|
|
| .check-ok { |
| color: var(--success); |
| } |
|
|
| .check-error { |
| color: var(--danger); |
| } |
|
|
| .check-warning, |
| .check-unavailable, |
| .check-unreachable, |
| .check-checking { |
| color: var(--warning); |
| } |
|
|
| .project-form { |
| padding: var(--space-lg); |
| display: grid; |
| gap: var(--space-lg); |
| } |
|
|
| .field-with-help { |
| display: grid; |
| grid-template-columns: minmax(0, 1fr) minmax(220px, 280px); |
| gap: var(--space-md); |
| align-items: start; |
| } |
|
|
| .field-with-help-compact { |
| grid-template-columns: minmax(0, 1fr) minmax(190px, 240px); |
| } |
|
|
| .field-with-help-action { |
| align-items: center; |
| } |
|
|
| .field-help { |
| padding: 0.1rem 0 0.1rem var(--space-md); |
| color: var(--text-dim); |
| border-left: 1px solid rgba(0, 240, 255, 0.45); |
| } |
|
|
| .field-help strong { |
| display: block; |
| margin-bottom: 0.35rem; |
| color: var(--text-main); |
| font-size: 0.85rem; |
| } |
|
|
| .field-help p { |
| margin: 0; |
| color: var(--text-muted); |
| font-size: 0.82rem; |
| line-height: 1.55; |
| } |
|
|
| .wizard-panel { |
| display: grid; |
| gap: var(--space-md); |
| } |
|
|
| .wizard-steps { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); |
| gap: var(--space-sm); |
| } |
|
|
| .wizard-step { |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| gap: 0.45rem; |
| min-height: 42px; |
| padding: 0.55rem 0.7rem; |
| color: var(--text-dim); |
| background: rgba(255, 255, 255, 0.04); |
| border: 1px solid var(--glass-border); |
| border-radius: var(--radius-md); |
| font: inherit; |
| font-size: 0.82rem; |
| font-weight: 700; |
| cursor: pointer; |
| } |
|
|
| .wizard-step span { |
| display: inline-grid; |
| place-items: center; |
| width: 22px; |
| height: 22px; |
| color: var(--text-main); |
| background: rgba(255, 255, 255, 0.08); |
| border-radius: var(--radius-full); |
| font-size: 0.72rem; |
| } |
|
|
| .wizard-step.active { |
| color: var(--text-main); |
| border-color: rgba(0, 240, 255, 0.7); |
| background: rgba(0, 240, 255, 0.08); |
| } |
|
|
| .wizard-step.complete span { |
| color: var(--bg-deep); |
| background: var(--accent); |
| } |
|
|
| .wizard-explanation, |
| .wizard-review { |
| padding: var(--space-md); |
| border: 1px solid var(--glass-border); |
| border-radius: var(--radius-md); |
| background: rgba(255, 255, 255, 0.04); |
| } |
|
|
| .wizard-explanation p { |
| margin: var(--space-xs) 0 0; |
| color: var(--text-dim); |
| line-height: 1.5; |
| } |
|
|
| .wizard-review { |
| display: grid; |
| gap: var(--space-md); |
| } |
|
|
| .wizard-review div { |
| display: grid; |
| gap: 0.3rem; |
| } |
|
|
| .wizard-review span { |
| color: var(--text-dim); |
| font-size: 0.78rem; |
| font-weight: 800; |
| text-transform: uppercase; |
| } |
|
|
| .wizard-review strong, |
| .wizard-review p { |
| margin: 0; |
| color: var(--text-main); |
| overflow-wrap: anywhere; |
| } |
|
|
| .wizard-actions { |
| display: flex; |
| gap: var(--space-md); |
| flex-wrap: wrap; |
| } |
|
|
| .project-form label { |
| display: grid; |
| gap: var(--space-sm); |
| } |
|
|
| .project-form label span { |
| color: var(--text-dim); |
| font-size: 0.85rem; |
| font-weight: 700; |
| } |
|
|
| .project-form input, |
| .project-form textarea, |
| .project-form select { |
| width: 100%; |
| padding: 0.85rem 1rem; |
| color: var(--text-main); |
| background: rgba(255,255,255,0.05); |
| border: 1px solid var(--glass-border); |
| border-radius: var(--radius-md); |
| outline: none; |
| font: inherit; |
| resize: vertical; |
| } |
|
|
| .project-form select { |
| color-scheme: dark; |
| appearance: auto; |
| } |
|
|
| .project-form select option, |
| .settings-section select option, |
| select option { |
| color: white; |
| background: #111827; |
| } |
|
|
| .project-form input:focus, |
| .project-form textarea:focus, |
| .project-form select:focus { |
| border-color: var(--accent); |
| box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent), transparent 35%); |
| } |
|
|
| .toggle-row { |
| display: flex !important; |
| align-items: center; |
| grid-template-columns: auto 1fr; |
| gap: var(--space-md) !important; |
| } |
|
|
| .toggle-row input { |
| width: 18px; |
| height: 18px; |
| accent-color: var(--accent); |
| } |
|
|
| .inline-status { |
| display: inline-flex; |
| align-items: center; |
| gap: var(--space-sm); |
| padding: 0.6rem 1rem; |
| background: rgba(110, 89, 255, 0.08); |
| border: 1px solid rgba(110, 89, 255, 0.2); |
| border-radius: var(--radius-md); |
| margin-bottom: var(--space-md); |
| color: var(--text-h); |
| font-size: 0.85rem; |
| font-weight: 500; |
| animation: slideDown 0.3s ease; |
| } |
|
|
| .project-locked-notice { |
| align-items: flex-start; |
| border-color: rgba(46, 204, 113, 0.28); |
| background: rgba(46, 204, 113, 0.08); |
| } |
|
|
| .read-only-note { |
| padding: 0.75rem 0.9rem; |
| color: var(--text-dim); |
| border: 1px solid rgba(255, 255, 255, 0.12); |
| border-radius: var(--radius-md); |
| background: rgba(255, 255, 255, 0.04); |
| font-size: 0.9rem; |
| line-height: 1.45; |
| } |
|
|
| @keyframes slideDown { |
| from { opacity: 0; transform: translateY(-10px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
|
|
| .settings-page { |
| display: grid; |
| gap: var(--space-lg); |
| } |
|
|
| .settings-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); |
| gap: var(--space-lg); |
| } |
|
|
| .settings-section { |
| padding: var(--space-lg); |
| display: grid; |
| align-content: start; |
| gap: var(--space-md); |
| } |
|
|
| .settings-section label { |
| display: grid; |
| gap: var(--space-sm); |
| } |
|
|
| .settings-section label span { |
| color: var(--text-dim); |
| font-size: 0.85rem; |
| font-weight: 700; |
| } |
|
|
| .settings-section input, |
| .settings-section select { |
| width: 100%; |
| padding: 0.85rem 1rem; |
| color: var(--text-main); |
| background: rgba(255,255,255,0.05); |
| border: 1px solid var(--glass-border); |
| border-radius: var(--radius-md); |
| outline: none; |
| font: inherit; |
| color-scheme: dark; |
| } |
|
|
| .settings-section input:focus, |
| .settings-section select:focus { |
| border-color: var(--accent); |
| box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent), transparent 35%); |
| } |
|
|
|
|
| .settings-section-title { |
| display: flex; |
| align-items: center; |
| gap: var(--space-sm); |
| } |
|
|
| .setting-row { |
| display: grid; |
| gap: var(--space-xs); |
| padding-bottom: var(--space-sm); |
| border-bottom: 1px solid var(--glass-border); |
| } |
|
|
| .setting-row span { |
| color: var(--text-dim); |
| font-size: 0.78rem; |
| text-transform: uppercase; |
| font-weight: 800; |
| } |
|
|
| .setting-row strong { |
| min-width: 0; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| font-size: 0.95rem; |
| } |
|
|
| .project-detail-page { |
| display: grid; |
| gap: var(--space-lg); |
| } |
|
|
| .project-detail-grid { |
| display: grid; |
| grid-template-columns: minmax(280px, 420px) minmax(0, 1fr); |
| gap: var(--space-lg); |
| align-items: start; |
| } |
|
|
| .task-list-panel { |
| padding: var(--space-lg); |
| display: grid; |
| gap: var(--space-md); |
| } |
|
|
| .default-agent-panel { |
| display: grid; |
| gap: var(--space-md); |
| padding: var(--space-md); |
| border: 1px solid var(--glass-border); |
| border-radius: var(--radius-md); |
| background: rgba(255,255,255,0.04); |
| } |
|
|
| .task-list { |
| display: grid; |
| gap: var(--space-md); |
| } |
|
|
| .task-row { |
| display: flex; |
| align-items: flex-start; |
| justify-content: space-between; |
| gap: var(--space-md); |
| padding: var(--space-md); |
| border: 1px solid var(--glass-border); |
| border-radius: var(--radius-md); |
| background: rgba(255,255,255,0.04); |
| } |
|
|
| .task-row.clickable { |
| cursor: pointer; |
| } |
|
|
| .task-row.clickable:hover { |
| background: rgba(255, 255, 255, 0.07); |
| border-color: var(--accent); |
| transform: translateX(4px); |
| transition: all 0.2s ease; |
| } |
|
|
| .task-row p { |
| color: var(--text-dim); |
| margin-top: var(--space-xs); |
| } |
|
|
| .task-meta-chip { |
| display: inline-flex; |
| align-items: center; |
| padding: 4px 8px; |
| border-radius: 999px; |
| background: rgba(255,255,255,0.06); |
| border: 1px solid rgba(255,255,255,0.12); |
| color: var(--text-dim); |
| font-size: 0.72rem; |
| font-weight: 700; |
| text-transform: uppercase; |
| } |
|
|
| .modal-title-row { |
| display: flex; |
| justify-content: space-between; |
| gap: var(--space-md); |
| align-items: flex-start; |
| margin-bottom: var(--space-md); |
| } |
|
|
| .modal-title-row p { |
| margin-top: var(--space-xs); |
| color: var(--text-dim); |
| } |
|
|
| .roadmap-modal { |
| width: min(100%, 980px); |
| } |
|
|
| .roadmap-timeline { |
| display: grid; |
| gap: var(--space-lg); |
| max-height: 66vh; |
| overflow-y: auto; |
| padding-right: var(--space-sm); |
| } |
|
|
| .roadmap-phase { |
| display: grid; |
| grid-template-columns: 42px minmax(0, 1fr); |
| gap: var(--space-md); |
| } |
|
|
| .roadmap-phase-marker { |
| position: relative; |
| display: flex; |
| justify-content: center; |
| } |
|
|
| .roadmap-phase-marker::after { |
| content: ""; |
| position: absolute; |
| top: 38px; |
| bottom: -24px; |
| width: 1px; |
| background: var(--glass-border); |
| } |
|
|
| .roadmap-phase:last-child .roadmap-phase-marker::after { |
| display: none; |
| } |
|
|
| .roadmap-phase-marker span { |
| z-index: 1; |
| display: grid; |
| place-items: center; |
| width: 34px; |
| height: 34px; |
| color: var(--bg-deep); |
| background: var(--accent); |
| border-radius: var(--radius-full); |
| font-size: 0.82rem; |
| font-weight: 900; |
| box-shadow: 0 0 14px rgba(0, 240, 255, 0.35); |
| } |
|
|
| .roadmap-phase-content { |
| display: grid; |
| gap: var(--space-md); |
| min-width: 0; |
| } |
|
|
| .roadmap-phase-header, |
| .roadmap-task { |
| display: flex; |
| justify-content: space-between; |
| gap: var(--space-md); |
| } |
|
|
| .roadmap-phase-header { |
| align-items: center; |
| } |
|
|
| .roadmap-phase-header h4 { |
| margin: 0; |
| font-size: 1rem; |
| } |
|
|
| .roadmap-phase-header span, |
| .roadmap-task small, |
| .roadmap-task-meta span:last-child { |
| color: var(--text-dim); |
| font-size: 0.8rem; |
| } |
|
|
| .roadmap-task-list { |
| display: grid; |
| gap: var(--space-sm); |
| } |
|
|
| .roadmap-task { |
| align-items: flex-start; |
| padding: var(--space-md); |
| border: 1px solid var(--glass-border); |
| border-radius: var(--radius-md); |
| background: rgba(255, 255, 255, 0.04); |
| } |
|
|
| .roadmap-task > div:first-child { |
| min-width: 0; |
| } |
|
|
| .roadmap-task p { |
| margin: var(--space-xs) 0; |
| color: var(--text-dim); |
| line-height: 1.45; |
| } |
|
|
| .roadmap-task-meta { |
| display: grid; |
| justify-items: end; |
| align-content: start; |
| gap: var(--space-sm); |
| white-space: nowrap; |
| } |
|
|
| .task-row span { |
| flex: 0 0 auto; |
| color: var(--accent); |
| font-size: 0.75rem; |
| text-transform: uppercase; |
| font-weight: 800; |
| } |
|
|
| @media (max-width: 900px) { |
| .app-container { |
| display: block; |
| height: auto; |
| overflow: visible; |
| } |
|
|
| .app-sidebar { |
| position: fixed; |
| inset: 0 auto 0 0; |
| width: 280px !important; max-width: 85vw; height: 100dvh; border-radius: 0; |
| max-height: calc(100dvh - 1rem); |
| overflow-y: auto; |
| margin: 0 !important; |
| z-index: 100; |
| } |
|
|
| .sidebar-backdrop { |
| display: block; |
| position: fixed; |
| inset: 0; |
| z-index: 90; |
| background: rgba(0, 0, 0, 0.55); |
| backdrop-filter: blur(4px); |
| } |
|
|
| .app-main { |
| min-height: 100dvh; |
| padding: var(--space-md); |
| overflow: visible; |
| } |
|
|
| .marketplace-header { |
| align-items: stretch; |
| flex-direction: column; |
| } |
|
|
| .dashboard-heading { |
| align-items: flex-start; |
| flex-direction: column; |
| } |
|
|
| .dashboard-controls { |
| grid-template-columns: 1fr; |
| } |
|
|
| .dashboard-filter-group, |
| .dashboard-results { |
| width: 100%; |
| flex-wrap: wrap; |
| justify-content: flex-start; |
| } |
|
|
| .dashboard-filter-group select { |
| flex: 1 1 150px; |
| } |
|
|
| .marketplace-search { |
| width: 100%; |
| flex-basis: auto; |
| } |
|
|
| .form-panel, |
| .form-panel-wide { |
| max-width: 100%; |
| } |
|
|
| .spatial-toolbar, |
| .spatial-stage-header { |
| align-items: flex-start; |
| flex-direction: column; |
| } |
|
|
| .spatial-grid { |
| grid-template-columns: 1fr; |
| } |
|
|
| .spatial-inspector { |
| order: -1; |
| } |
|
|
| .monitoring-header { |
| align-items: flex-start; |
| flex-direction: column; |
| } |
|
|
| .project-detail-grid { |
| grid-template-columns: 1fr; |
| } |
|
|
| .modal-title-row, |
| .roadmap-task { |
| flex-direction: column; |
| } |
|
|
| .roadmap-task-meta { |
| justify-items: start; |
| } |
| } |
|
|
| @media (max-width: 640px) { |
| :root { |
| --space-md: 0.85rem; |
| --space-lg: 1rem; |
| --space-xl: 1.5rem; |
| } |
|
|
| .app-main { |
| padding: var(--space-sm); |
| gap: var(--space-md); |
| } |
|
|
| .app-header { position: sticky; top: 0; background: var(--bg-deep); z-index: 80; border-bottom: 1px solid var(--glass-border); backdrop-filter: blur(8px); |
| padding: var(--space-sm); |
| } |
|
|
| .api-status { |
| font-size: 0.8rem; |
| padding: 0.35rem 0.7rem; |
| } |
|
|
| .page-heading { |
| margin-bottom: var(--space-lg); |
| } |
|
|
| .project-card-header, |
| .marketplace-card-footer, |
| .panel-heading, |
| .panel-heading-split { |
| align-items: flex-start; |
| flex-direction: column; |
| } |
|
|
| .auth-provider-grid, |
| .responsive-two-col { |
| grid-template-columns: 1fr; |
| } |
|
|
| .login-screen { |
| align-items: flex-start; |
| padding: var(--space-md); |
| } |
|
|
| .login-panel { |
| padding: var(--space-lg); |
| margin-top: 5dvh; |
| } |
|
|
| .button-row .btn, |
| .marketplace-card-footer .btn { |
| width: 100%; |
| } |
|
|
| .app-console > div:last-child { |
| height: 120px !important; |
| font-size: 0.78rem !important; |
| } |
|
|
| .spatial-actions, |
| .spatial-actions .btn, |
| .spatial-depth-control { |
| width: 100%; |
| } |
|
|
| .spatial-stage { |
| min-height: 360px; |
| } |
|
|
| .spatial-plane { |
| min-width: 720px; |
| min-height: 360px; |
| padding: var(--space-md); |
| } |
|
|
| .spatial-node { |
| min-height: 70px; |
| padding: 0.65rem; |
| } |
|
|
| .spatial-metrics { |
| grid-template-columns: 1fr 1fr; |
| } |
|
|
| .monitoring-header .btn, |
| .monitoring-status { |
| width: 100%; |
| } |
|
|
| .monitoring-status, |
| .monitoring-card { |
| align-items: flex-start; |
| } |
|
|
| .project-form .btn, |
| .settings-section .btn { |
| width: 100%; |
| } |
|
|
| .field-with-help, |
| .field-with-help-compact { |
| grid-template-columns: 1fr; |
| } |
|
|
| .field-help { |
| padding: 0 0 0 var(--space-md); |
| } |
|
|
| .task-row { |
| flex-direction: column; |
| } |
| } |
|
|
| |
| .status-badge { |
| padding: 4px 10px; |
| border-radius: 20px; |
| font-size: 0.75rem; |
| font-weight: 600; |
| text-transform: uppercase; |
| letter-spacing: 0.5px; |
| } |
| .status-todo { background: rgba(100, 100, 100, 0.2); color: #aaa; } |
| .status-queued { background: rgba(155, 89, 182, 0.2); color: #c084fc; border: 1px solid rgba(155, 89, 182, 0.3); } |
| .status-running { background: rgba(52, 152, 219, 0.2); color: #3498db; border: 1px solid rgba(52, 152, 219, 0.3); } |
| .status-in_progress { background: rgba(52, 152, 219, 0.2); color: #3498db; border: 1px solid rgba(52, 152, 219, 0.3); } |
| .status-awaiting_approval { background: rgba(241, 196, 15, 0.2); color: #f1c40f; border: 1px solid rgba(241, 196, 15, 0.3); } |
| .status-done { background: rgba(46, 204, 113, 0.2); color: #2ecc71; } |
| .status-failed { background: rgba(231, 76, 60, 0.2); color: #e74c3c; } |
|
|
| |
| .modal-overlay { |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100vw; |
| height: 100vh; |
| background: rgba(10, 15, 30, 0.95); |
| backdrop-filter: blur(12px); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| z-index: 9999; |
| padding: var(--space-md); |
| } |
|
|
| .modal-content { |
| width: min(95%, 900px); |
| max-height: 90vh; |
| background: var(--bg-deep); |
| border: 1px solid var(--accent); |
| border-radius: var(--radius-lg); |
| padding: var(--space-xl); |
| box-shadow: 0 0 50px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 255, 255, 0.1); |
| overflow-y: auto; |
| position: relative; |
| z-index: 10000; |
| } |
|
|
| .task-review-modal { |
| display: flex; |
| flex-direction: column; |
| overflow: hidden; |
| } |
|
|
| .task-review-modal h3 { |
| flex: 0 0 auto; |
| } |
|
|
| @keyframes modalAppear { |
| from { opacity: 0; transform: scale(0.95) translateY(20px); } |
| to { opacity: 1; transform: scale(1) translateY(0); } |
| } |
|
|
| .task-output-preview { |
| background: rgba(0, 0, 0, 0.3); |
| padding: var(--space-md); |
| border-radius: var(--radius-md); |
| margin-top: var(--space-md); |
| font-family: 'Fira Code', monospace; |
| font-size: 0.9rem; |
| color: #ddd; |
| min-height: 0; |
| overflow: auto; |
| border: 1px solid rgba(255, 255, 255, 0.05); |
| } |
|
|
| .task-review-modal .task-output-preview { |
| flex: 1 1 auto; |
| } |
|
|
| .task-output-preview pre { |
| white-space: pre-wrap; |
| overflow-wrap: anywhere; |
| word-break: normal; |
| margin: 0; |
| } |
|
|
| .modal-actions { |
| flex: 0 0 auto; |
| margin-top: var(--space-lg); |
| } |
|
|
| .modal-error { |
| flex: 0 0 auto; |
| margin-top: var(--space-md); |
| } |
|
|
| .report-charts { |
| display: grid; |
| grid-template-columns: repeat(3, minmax(0, 1fr)); |
| gap: var(--space-md); |
| margin-top: var(--space-md); |
| flex: 0 0 auto; |
| } |
|
|
| .report-chart { |
| border: 1px solid rgba(255, 255, 255, 0.08); |
| border-radius: var(--radius-md); |
| background: rgba(255, 255, 255, 0.04); |
| padding: var(--space-md); |
| min-width: 0; |
| } |
|
|
| .report-chart h4 { |
| margin: 0 0 var(--space-sm); |
| font-size: 0.85rem; |
| } |
|
|
| .report-chart-row { |
| display: grid; |
| grid-template-columns: minmax(70px, 1fr) 2fr auto; |
| align-items: center; |
| gap: var(--space-sm); |
| font-size: 0.78rem; |
| margin-bottom: 8px; |
| } |
|
|
| .report-chart-row span, |
| .report-score span { |
| color: var(--text-dim); |
| } |
|
|
| .report-chart-track { |
| height: 8px; |
| border-radius: 999px; |
| background: rgba(255, 255, 255, 0.08); |
| overflow: hidden; |
| } |
|
|
| .report-chart-fill { |
| height: 100%; |
| border-radius: 999px; |
| background: linear-gradient(90deg, var(--accent), #7c3aed); |
| box-shadow: 0 0 10px rgba(0, 255, 255, 0.25); |
| } |
|
|
| .report-score-grid { |
| display: grid; |
| gap: var(--space-sm); |
| } |
|
|
| .report-score { |
| display: grid; |
| grid-template-columns: 1fr auto; |
| align-items: center; |
| gap: var(--space-sm); |
| font-size: 0.78rem; |
| } |
|
|
| .report-score .report-chart-track { |
| grid-column: 1 / -1; |
| } |
|
|
| @media (max-width: 900px) { |
| .report-charts { |
| grid-template-columns: 1fr; |
| } |
| } |
|
|
| .btn-sm { |
| padding: 6px 12px; |
| font-size: 0.8rem; |
| } |
|
|
| .mobile-only { |
| display: none !important; |
| } |
|
|
| @media (max-width: 900px) { |
| .mobile-only { |
| display: flex !important; |
| } |
| } |
|
|
| .sidebar-close { |
| background: rgba(255, 255, 255, 0.05); |
| border: 1px solid var(--glass-border); |
| border-radius: var(--radius-sm); |
| padding: var(--space-xs); |
| transition: var(--transition); |
| } |
|
|
| .sidebar-close:hover { |
| background: rgba(255, 255, 255, 0.1); |
| } |
|
|
| @media (max-width: 640px) { |
| .app-console { |
| position: fixed; |
| bottom: 0; |
| left: 0; |
| right: 0; |
| margin: 0; |
| border-radius: var(--radius-lg) var(--radius-lg) 0 0; |
| z-index: 900; |
| } |
| |
| .app-console > div:last-child { |
| height: 80px !important; |
| } |
| } |
|
|
| |
| input, select, textarea { |
| background: rgba(255, 255, 255, 0.05) !important; |
| border: 1px solid rgba(255, 255, 255, 0.1) !important; |
| border-radius: var(--radius-md) !important; |
| color: var(--text) !important; |
| padding: 0.6rem 1rem !important; |
| font-family: inherit !important; |
| font-size: 0.9rem !important; |
| transition: all 0.2s ease !important; |
| outline: none !important; |
| } |
|
|
| select { |
| appearance: none !important; |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important; |
| background-repeat: no-repeat !important; |
| background-position: right 0.7rem center !important; |
| background-size: 1rem !important; |
| padding-right: 2.5rem !important; |
| cursor: pointer !important; |
| } |
|
|
| input:focus, select:focus, textarea:focus { |
| border-color: var(--accent) !important; |
| background: rgba(255, 255, 255, 0.08) !important; |
| box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2) !important; |
| } |
|
|
| option { |
| background-color: #1a1a1a !important; |
| color: var(--text) !important; |
| } |
|
|
| textarea { |
| resize: vertical !important; |
| min-height: 80px !important; |
| } |
|
|
