+
{meta}
) : null}
diff --git a/src/features/export/exportPanelShared.tsx b/src/features/export/exportPanelShared.tsx
index 77b14ef..677a8ce 100644
--- a/src/features/export/exportPanelShared.tsx
+++ b/src/features/export/exportPanelShared.tsx
@@ -28,6 +28,9 @@ export function AccordionSection({
return (
diff --git a/src/styles/index.css b/src/styles/index.css
index a8354a0..fc7576e 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -217,6 +217,9 @@
transparent
);
--ops-radio-chip-status-border: rgba(255, 255, 255, 0.18);
+ --ops-frame-calibration: rgba(183, 247, 218, 0.34);
+ --ops-frame-calibration-muted: rgba(255, 255, 255, 0.085);
+ --ops-readout-glow: rgba(110, 231, 183, 0.2);
}
html {
@@ -231,6 +234,10 @@ body {
min-height: 100dvh;
overscroll-behavior-y: contain;
background:
+ linear-gradient(90deg, rgba(56, 189, 248, 0.018) 1px, transparent 1px)
+ center / 64px 64px,
+ linear-gradient(0deg, rgba(110, 231, 183, 0.012) 1px, transparent 1px)
+ center / 64px 64px,
repeating-linear-gradient(
0deg,
transparent 0 47px,
@@ -249,6 +256,10 @@ body {
@media (min-width: 640px) {
body {
background:
+ linear-gradient(90deg, rgba(56, 189, 248, 0.018) 1px, transparent 1px)
+ center / 72px 72px,
+ linear-gradient(0deg, rgba(110, 231, 183, 0.012) 1px, transparent 1px)
+ center / 72px 72px,
repeating-linear-gradient(
0deg,
transparent 0 47px,
@@ -384,6 +395,9 @@ h3,
font-size: 2.5rem;
line-height: 1.1;
letter-spacing: 0;
+ text-shadow:
+ 0 0 28px rgba(110, 231, 183, 0.16),
+ 0 1px 0 rgba(0, 0, 0, 0.72);
}
.ops-headline-h2 {
@@ -646,6 +660,48 @@ h3,
position: relative;
}
+.ops-notch-frame-outer::before,
+.ops-notch-frame-outer::after {
+ content: '';
+ position: absolute;
+ z-index: 2;
+ pointer-events: none;
+}
+
+.ops-notch-frame-outer::before {
+ inset: 0;
+ background:
+ linear-gradient(var(--ops-frame-calibration), var(--ops-frame-calibration))
+ top left / 2.25rem 1px no-repeat,
+ linear-gradient(var(--ops-frame-calibration), var(--ops-frame-calibration))
+ top left / 1px 2.25rem no-repeat,
+ linear-gradient(
+ var(--ops-frame-calibration-muted),
+ var(--ops-frame-calibration-muted)
+ )
+ bottom right / 2.25rem 1px no-repeat,
+ linear-gradient(
+ var(--ops-frame-calibration-muted),
+ var(--ops-frame-calibration-muted)
+ )
+ bottom right / 1px 2.25rem no-repeat;
+ opacity: 0.8;
+}
+
+.ops-notch-frame-outer::after {
+ top: 0;
+ right: clamp(1.25rem, 4vw, 4rem);
+ width: clamp(2.5rem, 8vw, 7rem);
+ height: 1px;
+ background: linear-gradient(
+ 90deg,
+ transparent,
+ var(--ops-frame-calibration),
+ transparent
+ );
+ opacity: 0.62;
+}
+
.ops-section-surface {
background: var(
--ops-section-surface-background,
@@ -661,6 +717,87 @@ h3,
);
}
+.ops-section-header {
+ position: relative;
+ padding-bottom: 1rem;
+}
+
+.ops-section-header::after {
+ content: '';
+ position: absolute;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ height: 1px;
+ background: linear-gradient(
+ 90deg,
+ rgba(110, 231, 183, 0.28),
+ var(--color-ops-panel-border-strong) 42%,
+ transparent
+ );
+}
+
+.ops-section-title-block {
+ position: relative;
+ min-width: 0;
+ padding-left: 1rem;
+}
+
+.ops-section-title-block::before {
+ content: '';
+ position: absolute;
+ top: 0.15rem;
+ bottom: 0.1rem;
+ left: 0;
+ width: 3px;
+ background: linear-gradient(
+ 180deg,
+ var(--color-ops-accent-muted),
+ var(--color-ops-accent-deep)
+ );
+ opacity: 0.72;
+ box-shadow: 0 0 14px rgba(110, 231, 183, 0.14);
+}
+
+.ops-section-title {
+ text-wrap: balance;
+}
+
+.ops-section-meta-panel {
+ --notch: var(--ops-notch-chip);
+ align-self: flex-start;
+ border: 1px solid var(--color-ops-panel-border-strong);
+ background:
+ linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 38%),
+ rgba(10, 15, 13, 0.28);
+ padding: 0.75rem 0.875rem;
+ -webkit-clip-path: polygon(
+ var(--notch) 0,
+ 100% 0,
+ 100% calc(100% - var(--notch)),
+ calc(100% - var(--notch)) 100%,
+ 0 100%,
+ 0 var(--notch)
+ );
+ clip-path: polygon(
+ var(--notch) 0,
+ 100% 0,
+ 100% calc(100% - var(--notch)),
+ calc(100% - var(--notch)) 100%,
+ 0 100%,
+ 0 var(--notch)
+ );
+ box-shadow:
+ inset 0 1px 0 rgba(255, 255, 255, 0.06),
+ inset 0 -1px 0 rgba(0, 0, 0, 0.24);
+}
+
+@media (max-width: 639px) {
+ .ops-section-meta-panel {
+ width: 100%;
+ }
+}
+
.ops-section-emphasis-primary {
--ops-section-frame-background: linear-gradient(
180deg,
@@ -883,6 +1020,10 @@ h3,
line-height: 1;
letter-spacing: 0.06em;
font-variant-numeric: var(--ops-numeric);
+ transition:
+ filter var(--ops-motion-fast),
+ box-shadow var(--ops-motion-fast),
+ transform var(--ops-motion-fast);
}
.ops-grid-nominal {
@@ -936,6 +1077,9 @@ h3,
.ops-sector-spine-unmarked {
--ops-sector-spine-width: 4px;
--ops-sector-spine-color: var(--ops-status-unmarked-border);
+ position: relative;
+ overflow: hidden;
+ isolation: isolate;
box-shadow:
inset var(--ops-sector-spine-width) 0 0 var(--ops-sector-spine-color),
inset 0 1px 0 rgba(255, 255, 255, 0.08),
@@ -944,6 +1088,7 @@ h3,
0 0 0 1px rgba(255, 255, 255, 0.02);
transition:
box-shadow var(--ops-motion-fast),
+ background-color var(--ops-motion-fast),
transform var(--ops-motion-fast);
}
@@ -1011,12 +1156,14 @@ h3,
box-shadow:
var(--ops-elevation-1),
0 0 0 1px rgba(255, 255, 255, 0.025);
+ transform: translateZ(0);
transition:
box-shadow var(--ops-motion-fast),
transform var(--ops-motion-fast);
}
-.ops-domain-card > div {
+.ops-domain-card-inner {
+ --ops-domain-card-status-rail: var(--ops-status-unmarked-border);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.075), transparent 24%),
linear-gradient(0deg, rgba(4, 8, 7, 0.28), transparent 38%),
@@ -1028,8 +1175,47 @@ h3,
var(--color-ops-surface-raised);
}
+.ops-domain-card-inner::after {
+ content: '';
+ position: absolute;
+ right: 1rem;
+ bottom: 0;
+ left: 1rem;
+ height: 3px;
+ background: linear-gradient(
+ 90deg,
+ transparent,
+ var(--ops-domain-card-status-rail) 18%,
+ var(--ops-domain-card-status-rail) 82%,
+ transparent
+ );
+ opacity: 0.58;
+ box-shadow: 0 0 14px
+ color-mix(in srgb, var(--ops-domain-card-status-rail) 34%, transparent);
+ pointer-events: none;
+}
+
+.ops-domain-card[data-status='nominal'] .ops-domain-card-inner {
+ --ops-domain-card-status-rail: var(--ops-status-nominal-border);
+ background:
+ linear-gradient(180deg, rgba(110, 231, 183, 0.08), transparent 24%),
+ linear-gradient(90deg, rgba(110, 231, 183, 0.055), transparent 48%),
+ linear-gradient(0deg, rgba(4, 8, 7, 0.28), transparent 38%),
+ var(--color-ops-surface-raised);
+}
+
+.ops-domain-card[data-status='degraded'] .ops-domain-card-inner {
+ --ops-domain-card-status-rail: var(--ops-status-degraded-border);
+ background:
+ linear-gradient(180deg, rgba(245, 158, 11, 0.08), transparent 24%),
+ linear-gradient(90deg, rgba(245, 158, 11, 0.045), transparent 48%),
+ linear-gradient(0deg, rgba(4, 8, 7, 0.28), transparent 38%),
+ var(--color-ops-surface-raised);
+}
+
.ops-domain-card:hover,
.ops-domain-card:focus-within {
+ transform: translateY(-2px);
box-shadow:
var(--ops-elevation-2),
0 0 0 1px rgba(110, 231, 183, 0.08);
@@ -1145,6 +1331,7 @@ h3,
}
.ops-surface-hero {
+ position: relative;
background:
linear-gradient(90deg, rgba(110, 231, 183, 0.07), transparent 32%),
linear-gradient(
@@ -1156,6 +1343,35 @@ h3,
var(--color-ops-surface-1);
}
+.ops-surface-hero > * {
+ position: relative;
+ z-index: 1;
+}
+
+.ops-surface-hero::after {
+ content: '';
+ position: absolute;
+ inset: 0;
+ z-index: 0;
+ pointer-events: none;
+ background:
+ linear-gradient(
+ 90deg,
+ transparent 0,
+ transparent calc(100% - 1px),
+ rgba(183, 247, 218, 0.09) calc(100% - 1px)
+ )
+ left top / 5.25rem 100% repeat-x,
+ linear-gradient(
+ 180deg,
+ transparent 0,
+ transparent calc(100% - 1px),
+ rgba(255, 255, 255, 0.045) calc(100% - 1px)
+ )
+ left top / 100% 4.5rem repeat-y;
+ opacity: 0.36;
+}
+
.ops-surface-horizon-card {
background:
linear-gradient(
@@ -1371,17 +1587,26 @@ h3,
.ops-telemetry-chip {
position: relative;
overflow: hidden;
+ isolation: isolate;
background:
+ linear-gradient(90deg, var(--ops-frame-calibration-muted), transparent 24%)
+ left top / 100% 1px no-repeat,
linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent 34%),
linear-gradient(90deg, rgba(110, 231, 183, 0.045), transparent 42%),
rgba(10, 15, 13, 0.16);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.07),
- inset 0 -1px 0 rgba(0, 0, 0, 0.32);
+ inset 0 -1px 0 rgba(0, 0, 0, 0.32),
+ inset 0 0 0 1px rgba(255, 255, 255, 0.025);
+ transition:
+ background-color var(--ops-motion-fast),
+ box-shadow var(--ops-motion-fast);
}
.ops-telemetry-chip-primary {
background:
+ linear-gradient(90deg, rgba(183, 247, 218, 0.28), transparent 32%) left
+ top / 100% 1px no-repeat,
linear-gradient(180deg, rgba(110, 231, 183, 0.12), transparent 54%),
linear-gradient(90deg, rgba(110, 231, 183, 0.075), transparent 46%),
rgba(10, 15, 13, 0.18);
@@ -1390,6 +1615,13 @@ h3,
inset 0 -1px 0 rgba(0, 0, 0, 0.34);
}
+.ops-telemetry-chip[data-tone='accent'] {
+ box-shadow:
+ inset 3px 0 0 rgba(110, 231, 183, 0.44),
+ inset 0 1px 0 rgba(183, 247, 218, 0.16),
+ inset 0 -1px 0 rgba(0, 0, 0, 0.34);
+}
+
.ops-telemetry-label-row,
.ops-telemetry-value-row {
display: flex;
@@ -1405,11 +1637,28 @@ h3,
.ops-telemetry-register {
flex: 0 0 auto;
+ --notch: 4px;
border: 1px solid var(--color-ops-panel-border-strong);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 46%),
rgba(10, 15, 13, 0.42);
padding: 0.175rem 0.4rem;
+ -webkit-clip-path: polygon(
+ var(--notch) 0,
+ 100% 0,
+ 100% calc(100% - var(--notch)),
+ calc(100% - var(--notch)) 100%,
+ 0 100%,
+ 0 var(--notch)
+ );
+ clip-path: polygon(
+ var(--notch) 0,
+ 100% 0,
+ 100% calc(100% - var(--notch)),
+ calc(100% - var(--notch)) 100%,
+ 0 100%,
+ 0 var(--notch)
+ );
font-family: var(--font-mono);
font-size: 0.625rem;
font-weight: 600;
@@ -1420,6 +1669,9 @@ h3,
.ops-telemetry-value {
display: block;
+ text-shadow:
+ 0 0 18px var(--ops-readout-glow),
+ 0 1px 0 rgba(0, 0, 0, 0.72);
}
.ops-telemetry-value-primary {
@@ -1437,6 +1689,11 @@ h3,
}
.ops-telemetry-chip-attention {
+ background:
+ linear-gradient(90deg, rgba(245, 158, 11, 0.22), transparent 32%) left top /
+ 100% 1px no-repeat,
+ linear-gradient(180deg, rgba(245, 158, 11, 0.055), transparent 44%),
+ rgba(10, 15, 13, 0.18);
box-shadow:
inset 3px 0 0 var(--ops-status-degraded-border),
inset 0 1px 0 rgba(255, 255, 255, 0.06),
@@ -1581,12 +1838,18 @@ h3,
overflow: hidden;
border-radius: 2px;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.34);
+ transform: translateZ(0);
transition:
box-shadow var(--ops-motion-fast),
background-color var(--ops-motion-fast),
border-color var(--ops-motion-fast),
color var(--ops-motion-fast),
- opacity var(--ops-motion-fast);
+ opacity var(--ops-motion-fast),
+ transform var(--ops-motion-fast);
+}
+
+.ops-radio-chip:not([aria-disabled='true']):hover {
+ transform: translateY(-1px);
}
.ops-radio-chip-ghost {
@@ -1698,7 +1961,15 @@ h3,
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
+.ops-history-cell:hover .ops-grid-cell {
+ filter: brightness(1.08);
+ transform: translateY(-1px);
+}
+
.ops-history-today-header {
+ background:
+ linear-gradient(180deg, rgba(110, 231, 183, 0.105), transparent 62%),
+ var(--color-ops-surface-2);
box-shadow:
inset 0 3px 0 var(--ops-status-nominal-border),
inset 1px 0 0 var(--ops-today-rail),
@@ -1707,6 +1978,9 @@ h3,
}
.ops-history-today-cell {
+ background:
+ linear-gradient(90deg, rgba(110, 231, 183, 0.07), transparent 48%),
+ color-mix(in srgb, var(--color-ops-surface-2) 52%, transparent);
box-shadow:
inset 1px 0 0 var(--ops-today-rail),
inset -1px 0 0 rgba(110, 231, 183, 0.26),
@@ -1782,9 +2056,32 @@ h3,
}
.ops-mobile-day-button {
+ transform: translateZ(0);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.055),
inset 0 -1px 0 rgba(0, 0, 0, 0.28);
+ transition:
+ border-color var(--ops-motion-fast),
+ background-color var(--ops-motion-fast),
+ box-shadow var(--ops-motion-fast),
+ color var(--ops-motion-fast),
+ transform var(--ops-motion-fast);
+}
+
+.ops-mobile-day-button:hover {
+ transform: translateY(-1px);
+}
+
+.ops-mobile-day-button[aria-current='date'] {
+ border-color: color-mix(
+ in srgb,
+ var(--ops-status-nominal-border) 78%,
+ transparent
+ );
+ box-shadow:
+ inset 0 3px 0 var(--ops-status-nominal-border),
+ inset 0 0 0 1px rgba(110, 231, 183, 0.2),
+ inset 0 -1px 0 rgba(0, 0, 0, 0.3);
}
.ops-mobile-day-button[aria-pressed='true'] {
@@ -2261,6 +2558,8 @@ h3,
.ops-signal-card {
--ops-signal-rail: var(--color-ops-border-struct);
background:
+ linear-gradient(90deg, var(--ops-frame-calibration-muted), transparent 36%)
+ left top / 100% 1px no-repeat,
linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 34%),
linear-gradient(90deg, rgba(110, 231, 183, 0.035), transparent 44%),
var(--color-ops-surface-raised);
@@ -2272,6 +2571,15 @@ h3,
var(--ops-elevation-1);
}
+.ops-signal-frame[data-tone='safe'] .ops-signal-card {
+ background:
+ linear-gradient(90deg, rgba(110, 231, 183, 0.18), transparent 36%) left
+ top / 100% 1px no-repeat,
+ linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 34%),
+ linear-gradient(90deg, rgba(110, 231, 183, 0.055), transparent 44%),
+ var(--color-ops-surface-raised);
+}
+
.ops-signal-card-safe {
--ops-signal-rail: var(--ops-status-nominal-border);
}
@@ -2280,6 +2588,16 @@ h3,
--ops-signal-rail: var(--color-ops-border-struct);
}
+.ops-export-accordion {
+ transform: translateZ(0);
+}
+
+.ops-export-accordion[data-open='true'] {
+ box-shadow:
+ var(--ops-elevation-1),
+ 0 0 0 1px rgba(110, 231, 183, 0.04);
+}
+
.ops-export-accordion-trigger {
--ops-accordion-cap-color: rgba(110, 231, 183, 0.32);
position: relative;
@@ -2361,8 +2679,13 @@ h3,
}
.ops-action-button:hover,
+ .ops-domain-card:hover,
+ .ops-domain-card:focus-within,
.ops-export-accordion-trigger-collapsed:hover,
- .ops-history-cell:hover {
+ .ops-history-cell:hover,
+ .ops-history-cell:hover .ops-grid-cell,
+ .ops-mobile-day-button:hover,
+ .ops-radio-chip:not([aria-disabled='true']):hover {
transform: none;
}
}
@@ -2381,6 +2704,7 @@ h3,
.ops-flat-panel,
.ops-flat-panel-strong,
.ops-inline-alert,
+ .ops-section-meta-panel,
.ops-alert-inner-info,
.ops-alert-inner-warning,
.ops-alert-inner-danger,
@@ -2408,6 +2732,7 @@ h3,
.ops-mobile-day-button,
.ops-grid-cell,
.ops-history-selected-cell,
+ .ops-domain-card-inner,
.ops-crash-fallback-shell,
.ops-boot-fallback-shell {
border: 1px solid CanvasText;
@@ -2432,6 +2757,11 @@ h3,
.ops-rule-hairline,
.ops-rollup-pip-cell::before,
.ops-rollup-pip-indicator,
+ .ops-section-header::after,
+ .ops-section-title-block::before,
+ .ops-domain-card-inner::after,
+ .ops-notch-frame-outer::before,
+ .ops-notch-frame-outer::after,
.ops-telemetry-spark-today-tick::after,
.ops-history-brief-spark-selected::after,
.ops-history-sector-row-header::before,
diff --git a/tests/unit/domainCard.test.tsx b/tests/unit/domainCard.test.tsx
index 26f7b47..5d0f616 100644
--- a/tests/unit/domainCard.test.tsx
+++ b/tests/unit/domainCard.test.tsx
@@ -54,6 +54,10 @@ describe('DomainCard', () => {
);
expect(container.querySelector(`.${expectedClassName}`)).not.toBeNull();
+ expect(container.querySelector('[data-status]')).toHaveAttribute(
+ 'data-status',
+ status,
+ );
},
);