stella-ops.org/git.stella-ops.org
1
0
Fork 0
Code Issues Pull Requests Actions 2 Releases Wiki Activity

Fix pack detail dark backgrounds: surface-inverse → surface-primary

Browse Source 
All 6 pack detail components (dashboard, editor, rule-builder, yaml,
simulation, approvals) had :host background set to surface-inverse
(dark/black) or gradient variations of it. Fixed to surface-primary
(warm cream) to match the rest of the app. Also removed excessive
min-height: 100vh from all components.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
master
2026-03-29 15:50:52 +03:00
parent d7efb2a6a4
commit 01cc3f044f
7 changed files with 15 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/Web/StellaOps.Web/src/app/features/policy-studio/approvals/policy-approvals.component.ts
View File

@@ -212,9 +212,8 @@ import { PolicyApiService } from '../services/policy-api.service';
`
:host {
display: block;
background: linear-gradient(145deg, var(--color-text-heading) 0%, var(--color-surface-inverse) 60%, var(--color-surface-inverse) 100%);
background: var(--color-surface-primary);
color: var(--color-text-primary);
min-height: 100vh;
}
.approvals {

4
src/Web/StellaOps.Web/src/app/features/policy-studio/dashboard/policy-dashboard.component.ts
View File

@@ -105,7 +105,7 @@ import {
`,
styles: [
`
:host { display: block; background: var(--color-surface-inverse); color: var(--color-text-primary); min-height: 100vh; }
:host { display: block; background: var(--color-surface-primary); color: var(--color-text-primary); ; }
.dash { max-width: 1200px; margin: 0 auto; padding: 1.5rem; }
.dash__header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.dash__eyebrow { margin: 0; color: var(--color-status-info); text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.8rem; }
@@ -127,7 +127,7 @@ import {
.heatmap__value { color: rgba(212, 201, 168, 0.5); font-size: 0.85rem; }
.heatmap__latency { color: var(--color-text-muted); font-size: 0.85rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
.chip { border: 1px solid var(--color-border-primary); border-radius: var(--radius-full); padding: 0.25rem 0.6rem; background: var(--color-surface-inverse); }
.chip { border: 1px solid var(--color-border-primary); border-radius: var(--radius-full); padding: 0.25rem 0.6rem; background: var(--color-surface-primary); }
.chip--muted { opacity: 0.8; }
`,
]

9
src/Web/StellaOps.Web/src/app/features/policy-studio/editor/policy-editor.component.ts
View File

@@ -191,9 +191,8 @@ interface ChecklistItem {
`
:host {
display: block;
background: var(--color-surface-inverse);
background: var(--color-surface-primary);
color: var(--color-text-primary);
min-height: 100vh;
}
.policy-editor {
@@ -274,7 +273,7 @@ interface ChecklistItem {
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-xl);
overflow: hidden;
background: var(--color-surface-inverse);
background: var(--color-surface-primary);
}
.editor-shell__surface {
@@ -388,7 +387,7 @@ interface ChecklistItem {
.diagnostics {
margin-top: 1.25rem;
background: var(--color-surface-inverse);
background: var(--color-surface-primary);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-xl);
padding: 1rem;
@@ -497,7 +496,7 @@ interface ChecklistItem {
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-xl);
padding: 0.55rem 0.65rem;
background: var(--color-surface-inverse);
background: var(--color-surface-primary);
}
.checklist__status {

2
src/Web/StellaOps.Web/src/app/features/policy-studio/explain/policy-explain.component.ts
View File

@@ -73,7 +73,7 @@ import jsPDF from './jspdf.stub';
`,
styles: [
`
:host { display: block; background: var(--color-surface-elevated); color: var(--color-text-primary); min-height: 100vh; }
:host { display: block; background: var(--color-surface-elevated); color: var(--color-text-primary); ; }
.expl { max-width: 1200px; margin: 0 auto; padding: 1.5rem; }
.expl__header { display: flex; justify-content: space-between; align-items: center; }
.expl__eyebrow { margin: 0; color: var(--color-status-info); text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.8rem; }

6
src/Web/StellaOps.Web/src/app/features/policy-studio/rule-builder/policy-rule-builder.component.ts
View File

@@ -72,7 +72,7 @@ import { ActivatedRoute } from '@angular/router';
`,
styles: [
`
:host { display: block; background: var(--color-surface-inverse); color: var(--color-text-primary); min-height: 100vh; }
:host { display: block; background: var(--color-surface-primary); color: var(--color-text-primary); ; }
.rb { max-width: 1200px; margin: 0 auto; padding: 1.5rem; }
.rb__header { display: flex; justify-content: space-between; gap: 1rem; }
.rb__eyebrow { margin: 0; color: var(--color-status-info); text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.8rem; }
@@ -80,9 +80,9 @@ import { ActivatedRoute } from '@angular/router';
.rb__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) 1fr; gap: 1rem; margin-top: 1rem; }
.rb__form { background: var(--color-surface-elevated); border: 1px solid var(--color-border-primary); border-radius: var(--radius-xl); padding: 1rem; display: grid; gap: 0.65rem; }
label { display: grid; gap: 0.25rem; color: rgba(212, 201, 168, 0.5); }
input, select { background: var(--color-surface-inverse); color: var(--color-text-primary); border: 1px solid var(--color-border-primary); border-radius: var(--radius-lg); padding: 0.5rem; }
input, select { background: var(--color-surface-primary); color: var(--color-text-primary); border: 1px solid var(--color-border-primary); border-radius: var(--radius-lg); padding: 0.5rem; }
.rb__preview { background: var(--color-surface-elevated); border: 1px solid var(--color-border-primary); border-radius: var(--radius-xl); padding: 1rem; }
pre { margin: 0; max-height: 420px; overflow: auto; background: var(--color-surface-inverse); border: 1px solid var(--color-border-primary); border-radius: var(--radius-xl); padding: 0.75rem; }
pre { margin: 0; max-height: 420px; overflow: auto; background: var(--color-surface-primary); border: 1px solid var(--color-border-primary); border-radius: var(--radius-xl); padding: 0.75rem; }
@media (max-width: 1024px) { .rb__grid { grid-template-columns: 1fr; } }
`,
]

7
src/Web/StellaOps.Web/src/app/features/policy-studio/simulation/policy-simulation.component.ts
View File

@@ -221,10 +221,7 @@ import { PolicyApiService } from '../services/policy-api.service';
`
:host {
display: block;
background: radial-gradient(circle at 20% 20%, rgba(59, 130, 246, 0.08), transparent 25%),
radial-gradient(circle at 80% 0%, rgba(16, 185, 129, 0.08), transparent 22%),
var(--color-surface-inverse);
min-height: 100vh;
background: var(--color-surface-primary);
color: var(--color-text-primary);
}
@@ -313,7 +310,6 @@ import { PolicyApiService } from '../services/policy-api.service';
input[type='checkbox'] {
width: 100%;
border: 1px solid var(--color-border-primary);
background: var(--color-surface-inverse);
color: var(--color-text-primary);
border-radius: var(--radius-lg);
padding: 0.65rem;
@@ -445,7 +441,6 @@ import { PolicyApiService } from '../services/policy-api.service';
}
th {
background: var(--color-surface-inverse);
color: rgba(212, 201, 168, 0.5);
position: sticky;
top: 0;

6
src/Web/StellaOps.Web/src/app/features/policy-studio/yaml/policy-yaml-editor.component.ts
View File

@@ -77,7 +77,7 @@ interface YamlDiagnostic {
`,
styles: [
`
:host { display: block; background: var(--color-surface-inverse); color: var(--color-text-primary); min-height: 100vh; }
:host { display: block; background: var(--color-surface-primary); color: var(--color-text-primary); ; }
.yaml { max-width: 1200px; margin: 0 auto; padding: 1.5rem; }
.yaml__header { display: flex; justify-content: space-between; gap: 1rem; }
.yaml__eyebrow { margin: 0; color: var(--color-status-info); text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.8rem; }
@@ -86,7 +86,7 @@ interface YamlDiagnostic {
.yaml__layout { display: grid; grid-template-columns: minmax(0, 1.4fr) 1fr; gap: 1rem; margin-top: 1rem; }
.yaml__editor { background: var(--color-surface-elevated); border: 1px solid var(--color-border-primary); border-radius: var(--radius-xl); padding: 1rem; display: grid; gap: 0.5rem; }
label { color: rgba(212, 201, 168, 0.5); font-weight: var(--font-weight-semibold); }
textarea { width: 100%; background: var(--color-surface-inverse); color: var(--color-text-primary); border: 1px solid var(--color-border-primary); border-radius: var(--radius-xl); padding: 0.75rem; font-family: 'Monaco','Consolas', monospace; }
textarea { width: 100%; background: var(--color-surface-primary); color: var(--color-text-primary); border: 1px solid var(--color-border-primary); border-radius: var(--radius-xl); padding: 0.75rem; font-family: 'Monaco','Consolas', monospace; }
.toolbar { display: flex; gap: 0.5rem; align-items: center; }
button { background: var(--color-btn-primary-bg); border: 1px solid var(--color-btn-primary-bg); color: var(--color-text-primary); border-radius: var(--radius-lg); padding: 0.4rem 0.8rem; cursor: pointer; }
button:disabled { opacity: 0.6; cursor: not-allowed; }
@@ -94,7 +94,7 @@ interface YamlDiagnostic {
.pill--ok { border-color: var(--color-status-success); color: var(--color-status-success); }
.diag { list-style: none; margin: 0; padding: 0; color: var(--color-status-error-border); }
.yaml__preview { background: var(--color-surface-elevated); border: 1px solid var(--color-border-primary); border-radius: var(--radius-xl); padding: 1rem; }
pre { margin: 0; max-height: 420px; overflow: auto; background: var(--color-surface-inverse); border: 1px solid var(--color-border-primary); border-radius: var(--radius-xl); padding: 0.75rem; }
pre { margin: 0; max-height: 420px; overflow: auto; background: var(--color-surface-primary); border: 1px solid var(--color-border-primary); border-radius: var(--radius-xl); padding: 0.75rem; }
@media (max-width: 1024px) { .yaml__layout { grid-template-columns: 1fr; } }
`,
]