html,
body {
margin: 0;
min-height: 100%;
font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
scroll-behavior: smooth;
}
body {
min-height: 100vh;
}
/* Tooltips Mud suelen renderizarse en portal bajo ; las variables van en (sync en App.razor). */
html.bp-app--light {
--bp-tooltip-bg: #ffffff;
--bp-tooltip-fg: #111827;
}
html.bp-app--dark {
--bp-tooltip-bg: #161616;
--bp-tooltip-fg: #e8e8e8;
}
#app,
.bp-app {
min-height: 100vh;
}
.bp-app--light {
--bp-bg: #f3f6fa;
--bp-surface: rgba(255, 255, 255, 0.9);
--bp-surface-strong: rgba(255, 255, 255, 0.96);
--bp-surface-soft: #f8fafc;
--bp-surface-elevated: #ffffff;
--bp-border: rgba(148, 163, 184, 0.24);
--bp-border-strong: rgba(100, 116, 139, 0.34);
--bp-text-primary: #111827;
--bp-text-secondary: #475569;
--bp-text-muted: #64748b;
--bp-empty-surface: rgba(255, 255, 255, 0.72);
--bp-empty-text: #4a5872;
--bp-shadow-sm: 0 10px 26px rgba(15, 23, 42, 0.06);
--bp-shadow-md: 0 18px 44px rgba(15, 23, 42, 0.08);
--bp-shadow-lg: 0 28px 70px rgba(15, 23, 42, 0.12);
--bp-accent-primary: #2563eb;
--bp-accent-secondary: #0f766e;
--bp-accent-info: #4f46e5;
--bp-accent-success: #059669;
--bp-accent-warning: #d97706;
--bp-accent-danger: #dc2626;
--bp-accent-primary-hover: #1d4ed8;
--bp-accent-primary-soft: rgba(37, 99, 235, 0.1);
--bp-accent-secondary-soft: rgba(15, 118, 110, 0.1);
--bp-accent-info-soft: rgba(79, 70, 229, 0.1);
--bp-accent-neutral-soft: rgba(71, 85, 105, 0.1);
color-scheme: light;
}
.bp-app--dark {
--bp-bg: #030303;
--bp-surface: rgba(8, 8, 8, 0.94);
--bp-surface-strong: rgba(10, 10, 10, 0.97);
--bp-surface-soft: #0c0c0c;
--bp-surface-elevated: #111111;
--bp-border: rgba(64, 64, 64, 0.55);
--bp-border-strong: rgba(115, 115, 115, 0.65);
--bp-text-primary: #ededed;
--bp-text-secondary: #c4c4c4;
--bp-text-muted: #a3a3a3;
--bp-empty-surface: rgba(12, 12, 12, 0.94);
--bp-empty-text: #e5e5e5;
--bp-shadow-sm: 0 10px 28px rgba(0, 0, 0, 0.45);
--bp-shadow-md: 0 16px 40px rgba(0, 0, 0, 0.5);
--bp-shadow-lg: 0 22px 56px rgba(0, 0, 0, 0.58);
--bp-accent-primary: #5c8f86;
--bp-accent-secondary: #9a8b6e;
--bp-accent-info: #7a6f90;
--bp-accent-success: #4d8068;
--bp-accent-warning: #b0893c;
--bp-accent-danger: #b85c5c;
--bp-accent-primary-hover: #6d9e96;
--bp-accent-primary-soft: rgba(92, 143, 134, 0.14);
--bp-accent-secondary-soft: rgba(154, 139, 110, 0.12);
--bp-accent-info-soft: rgba(122, 111, 144, 0.12);
--bp-accent-neutral-soft: rgba(163, 163, 163, 0.1);
color-scheme: dark;
}
.bp-app {
--bp-radius-sm: 10px;
--bp-radius-md: 12px;
--bp-radius-lg: 18px;
background: var(--bp-bg);
color: var(--bp-text-primary);
transition: background 0.35s ease, color 0.25s ease;
}
a {
color: inherit;
}
h1:focus,
h2:focus,
h3:focus {
outline: none;
}
.bp-page {
margin: 0 auto;
}
.bp-dashboard {
padding-bottom: 0.25rem;
--bp-card-min-height: 250px;
}
.bp-panel {
padding: 0.85rem;
border: 1px solid var(--bp-border);
border-radius: var(--bp-radius-lg);
background: var(--bp-surface);
box-shadow: var(--bp-shadow-sm);
transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease;
overflow: hidden;
position: relative;
}
.bp-panel:hover {
transform: translateY(-2px);
box-shadow: var(--bp-shadow-md);
border-color: var(--bp-border-strong);
}
.bp-panel--hero,
.bp-panel--fullheight {
min-height: 100%;
}
.bp-panel--hero {
padding: 1rem;
background: var(--bp-surface);
}
.bp-panel--controls {
--bp-panel-accent: #2563eb;
--bp-panel-accent-soft: var(--bp-accent-primary-soft);
background: var(--bp-surface);
}
.bp-panel--running,
.bp-panel--batch,
.bp-panel--queue,
.bp-panel--log {
--bp-panel-accent: #64748b;
--bp-panel-accent-soft: rgba(100, 116, 139, 0.12);
background: var(--bp-surface);
}
.bp-panel--running {
--bp-panel-accent: var(--bp-accent-success);
--bp-panel-accent-soft: rgba(5, 150, 105, 0.12);
}
.bp-panel--batch {
--bp-panel-accent: var(--bp-accent-secondary);
--bp-panel-accent-soft: var(--bp-accent-secondary-soft);
}
.bp-panel--queue {
--bp-panel-accent: var(--bp-accent-info);
--bp-panel-accent-soft: var(--bp-accent-info-soft);
}
.bp-panel--log {
--bp-panel-accent: #475569;
--bp-panel-accent-soft: var(--bp-accent-neutral-soft);
}
.bp-app--dark .bp-panel--controls {
--bp-panel-accent: var(--bp-accent-primary);
--bp-panel-accent-soft: var(--bp-accent-primary-soft);
}
.bp-app--dark .bp-panel--running {
--bp-panel-accent: var(--bp-accent-success);
--bp-panel-accent-soft: rgba(77, 128, 104, 0.16);
}
.bp-app--dark .bp-panel--batch {
--bp-panel-accent: var(--bp-accent-secondary);
--bp-panel-accent-soft: var(--bp-accent-secondary-soft);
}
.bp-app--dark .bp-panel--queue {
--bp-panel-accent: var(--bp-accent-info);
--bp-panel-accent-soft: var(--bp-accent-info-soft);
}
.bp-app--dark .bp-panel--log {
--bp-panel-accent: #a8a8a8;
--bp-panel-accent-soft: var(--bp-accent-neutral-soft);
}
.bp-main-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-areas:
"controls running batch"
"queue log log";
grid-template-rows: repeat(2, minmax(var(--bp-card-min-height), auto));
gap: 1rem;
align-items: stretch;
}
.bp-grid-slot {
min-width: 0;
display: flex;
}
.bp-grid-slot > * {
flex: 1 1 auto;
}
.bp-grid-slot--controls {
grid-area: controls;
}
.bp-grid-slot--running {
grid-area: running;
}
.bp-grid-slot--batch {
grid-area: batch;
}
.bp-grid-slot--queue {
grid-area: queue;
}
.bp-grid-slot--log {
grid-area: log;
}
.bp-panel--fullheight,
.bp-panel--controls,
.bp-panel--queue,
.bp-panel--running,
.bp-panel--batch,
.bp-panel--log {
display: flex;
flex-direction: column;
height: 100%;
min-height: 0;
}
.bp-panel--fullheight .bp-running-card,
.bp-panel--fullheight > .bp-scroll-area,
.bp-panel--fullheight > .bp-empty-state,
.bp-panel--controls > .mud-stack-root,
.bp-panel--queue > .bp-scroll-area,
.bp-panel--queue > .bp-empty-state,
.bp-panel--log > .bp-log,
.bp-panel--log > .bp-empty-state {
flex: 1 1 auto;
}
.bp-panel--fullheight > .bp-scroll-area,
.bp-panel--queue > .bp-scroll-area,
.bp-panel--log > .bp-log {
max-height: none;
}
.bp-hero {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.85rem;
flex-wrap: wrap;
margin-bottom: 0.85rem;
}
.bp-hero--compact {
justify-content: flex-end;
margin-bottom: 0.65rem;
}
.bp-status-chip {
border-radius: 999px;
font-weight: 700;
box-shadow: var(--bp-shadow-sm);
}
.bp-kpi-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 0.6rem;
}
.bp-kpi-card {
padding: 0.65rem;
border: 1px dashed var(--bp-border);
border-radius: var(--bp-radius-md);
background: var(--bp-surface-soft);
position: relative;
overflow: hidden;
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.bp-kpi-card:hover {
transform: translateY(-2px);
box-shadow: var(--bp-shadow-sm);
border-color: var(--bp-border-strong);
}
.bp-kpi-card--counter {
--bp-kpi-accent: var(--bp-accent-primary);
}
.bp-kpi-card--pending {
--bp-kpi-accent: var(--bp-accent-info);
}
.bp-kpi-card--total {
--bp-kpi-accent: var(--bp-accent-secondary);
}
.bp-kpi-card--completed {
--bp-kpi-accent: var(--bp-accent-success);
}
.bp-kpi-label {
display: block;
margin-bottom: 0.25rem;
font-size: 0.8rem;
color: var(--bp-text-muted);
}
.bp-kpi-value {
font-size: 1.05rem;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--bp-text-primary);
}
.bp-panel-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.75rem;
margin-bottom: 0.6rem;
}
.bp-panel-header > div:first-child {
flex: 1 1 auto;
min-width: 0;
min-height: 3.8rem;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.bp-panel-header--tight {
margin-bottom: 0.5rem;
}
.bp-panel-header h3,
.bp-panel-header h4 {
margin: 0;
font-size: 1rem;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--bp-text-primary);
}
.bp-panel--controls .bp-panel-header h3,
.bp-panel--running .bp-panel-header h3,
.bp-panel--batch .bp-panel-header h3,
.bp-panel--queue .bp-panel-header h3,
.bp-panel--log .bp-panel-header h3 {
display: flex;
align-items: center;
gap: 0.55rem;
}
.bp-panel--controls .bp-panel-header h3::before,
.bp-panel--running .bp-panel-header h3::before,
.bp-panel--batch .bp-panel-header h3::before,
.bp-panel--queue .bp-panel-header h3::before,
.bp-panel--log .bp-panel-header h3::before {
content: "";
width: 0.62rem;
height: 0.62rem;
border-radius: 999px;
flex: 0 0 auto;
background: var(--bp-panel-accent);
box-shadow: 0 0 0 3px var(--bp-panel-accent-soft);
}
.bp-panel-header p {
margin: 0.2rem 0 0;
font-size: 0.84rem;
line-height: 1.45;
text-wrap: balance;
color: var(--bp-text-secondary);
}
.bp-section-divider {
height: 1px;
margin: 0.85rem 0;
background: var(--bp-border);
}
.bp-validation-list {
margin: 0;
padding-left: 1rem;
}
.bp-empty-state {
padding: 1rem 1.1rem;
min-height: 6.8rem;
display: grid;
place-items: center;
text-align: center;
line-height: 1.5;
font-weight: 500;
text-wrap: balance;
color: var(--bp-empty-text);
border: 1px dashed var(--bp-border);
border-radius: var(--bp-radius-md);
background: var(--bp-empty-surface);
}
.bp-panel--running .bp-empty-state,
.bp-panel--batch .bp-empty-state {
min-height: 7.6rem;
}
.bp-scroll-area,
.bp-log {
display: flex;
flex-direction: column;
gap: 0.55rem;
max-height: 20rem;
overflow: auto;
padding-right: 0.15rem;
}
.bp-list-item,
.bp-log-card,
.bp-running-field,
.bp-running-metric {
padding: 0.65rem 0.75rem;
border: 1px dashed var(--bp-border);
border-radius: var(--bp-radius-md);
background: var(--bp-surface-soft);
transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.bp-list-item,
.bp-log-card__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.75rem;
}
.bp-list-item:hover,
.bp-log-card:hover,
.bp-running-field:hover,
.bp-running-metric:hover {
transform: translateY(-1px);
border-color: var(--bp-border-strong);
background: var(--bp-surface-elevated);
}
.bp-list-meta {
margin-top: 0.2rem;
font-size: 0.8rem;
color: var(--bp-text-muted);
}
.bp-list-item strong,
.bp-log-card strong {
color: var(--bp-text-primary);
}
.bp-running-card {
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.bp-running-grid,
.bp-running-metrics {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 0.55rem;
}
.bp-running-field span,
.bp-running-metric span {
display: block;
margin-bottom: 0.25rem;
font-size: 0.76rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--bp-text-muted);
}
.bp-running-field strong,
.bp-running-metric strong,
.bp-log-card__body strong {
color: var(--bp-text-primary);
}
.bp-progress-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
margin-top: 0.1rem;
font-size: 0.82rem;
color: var(--bp-text-muted);
}
.bp-progress-meta strong {
color: var(--bp-text-primary);
}
.bp-log-card__body {
margin-top: 0.4rem;
display: flex;
flex-direction: column;
gap: 0.25rem;
font-size: 0.88rem;
color: var(--bp-text-secondary);
}
.bp-log-card__meta {
margin-top: 0.15rem;
font-size: 0.8rem;
font-weight: 600;
color: var(--bp-text-muted);
}
.bp-section-chip,
.bp-list-chip {
border-radius: 999px;
font-weight: 600;
border-width: 1px;
}
.bp-status-alert,
.bp-success-alert,
.bp-log-alert--event {
border-radius: var(--bp-radius-md);
}
.bp-block-alert {
margin-bottom: 0.75rem;
}
.bp-log-alert {
margin: 0;
}
.bp-progress {
margin-top: 0.5rem;
height: 10px;
border-radius: 999px;
overflow: hidden;
box-shadow: 0 0 0 1px var(--bp-border), var(--bp-shadow-sm);
}
.bp-progress-track {
position: relative;
background: var(--bp-surface-soft);
}
.bp-progress-track__fill {
height: 100%;
border-radius: inherit;
background: var(--bp-accent-success);
transition: width 0.2s ease;
}
.bp-actions-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.5rem;
}
.bp-action-button {
min-height: 42px;
border-radius: var(--bp-radius-md);
font-weight: 700;
letter-spacing: 0.01em;
transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
.bp-action-button:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: var(--bp-shadow-sm);
}
.bp-action-button--capture {
background: var(--bp-surface-soft);
}
.bp-action-button--start {
box-shadow: var(--bp-shadow-sm);
}
.bp-dialog-copy {
margin: 0;
color: var(--bp-text-secondary);
line-height: 1.55;
}
.bp-dialog-stack {
padding-top: 0.2rem;
}
.bp-dialog-intro {
padding: 0.6rem 0.75rem;
border: 1px dashed var(--bp-border);
border-radius: var(--bp-radius-md);
background: var(--bp-surface-soft);
}
.bp-dialog-form {
margin-top: 0;
}
.bp-app .mud-dialog {
border: 1px solid var(--bp-border);
border-radius: var(--bp-radius-lg);
background: var(--bp-surface-strong);
box-shadow: var(--bp-shadow-lg);
}
.bp-app .mud-dialog-title {
font-weight: 800;
letter-spacing: -0.02em;
color: var(--bp-text-primary);
}
.bp-app .mud-dialog-content {
padding: 0.35rem 1rem 0.8rem;
color: var(--bp-text-primary);
}
.bp-app .mud-dialog-actions {
padding: 0.65rem 1rem 0.9rem;
border-top: 1px solid var(--bp-border);
gap: 0.5rem;
}
.bp-app .mud-input-control {
border-radius: var(--bp-radius-md);
}
.bp-app .mud-input-outlined {
background: var(--bp-surface-elevated);
border-radius: var(--bp-radius-md);
transition: background-color 0.18s ease, border-color 0.18s ease;
}
.bp-app .mud-input > input,
.bp-app .mud-input-slot,
.bp-app .mud-input-label,
.bp-app .mud-input-helper-text {
color: var(--bp-text-primary);
}
.bp-app .mud-input-control .mud-input-outlined-border {
border-width: 1px;
border-color: var(--bp-border-strong);
border-radius: inherit;
}
.bp-app .mud-input-control:hover .mud-input-outlined-border {
border-color: var(--bp-accent-primary);
}
.bp-app .mud-input-control.mud-input-focused .mud-input-outlined-border {
border-color: var(--bp-accent-primary);
}
.bp-app .mud-input-control.mud-input-focused .mud-input-outlined {
box-shadow: 0 0 0 2px var(--bp-accent-primary-soft);
}
.bp-app .mud-select .mud-input-outlined,
.bp-app .mud-select .mud-input-slot {
border-radius: var(--bp-radius-md);
}
.bp-app .mud-popover {
border: 1px solid var(--bp-border);
border-radius: var(--bp-radius-md);
background: var(--bp-surface-elevated);
box-shadow: var(--bp-shadow-md);
}
.mud-tooltip.mud-tooltip-default {
background-color: var(--bp-tooltip-bg, #ffffff) !important;
color: var(--bp-tooltip-fg, #111827) !important;
}
html.bp-app--dark .mud-tooltip.mud-tooltip-default {
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.55);
}
.bp-app .mud-list {
background: transparent;
color: var(--bp-text-primary);
}
.bp-app .mud-list-item {
border-radius: var(--bp-radius-sm);
}
.bp-app .bp-topbar__chip.mud-chip {
border: 1px solid var(--bp-border);
box-shadow: none;
}
.bp-app .mud-alert-message {
color: inherit;
}
.bp-app .mud-button-root {
text-transform: none;
}
.bp-app .mud-button-filled {
background-image: none;
}
.bp-app .mud-chip {
font-weight: 700;
background-image: none;
}
.bp-app .mud-button-filled-primary {
background-color: var(--bp-accent-primary);
color: #ffffff;
}
.bp-app .mud-button-filled-primary:hover {
background-color: var(--bp-accent-primary-hover);
}
.bp-app .mud-button-outlined-primary {
color: var(--bp-accent-primary);
border-color: color-mix(in srgb, var(--bp-accent-primary) 42%, var(--bp-border-strong));
background: var(--bp-accent-primary-soft);
}
.bp-app .mud-button-outlined-primary:hover {
background: color-mix(in srgb, var(--bp-accent-primary) 20%, var(--bp-surface-soft));
}
.bp-app .mud-button-outlined-secondary {
color: var(--bp-accent-secondary);
border-color: color-mix(in srgb, var(--bp-accent-secondary) 42%, var(--bp-border-strong));
background: var(--bp-accent-secondary-soft);
}
.bp-app .mud-button-outlined-secondary:hover {
background: color-mix(in srgb, var(--bp-accent-secondary) 20%, var(--bp-surface-soft));
}
.bp-app .mud-switch .mud-switch-button {
color: var(--bp-accent-primary);
}
.bp-app .mud-switch.mud-checked .mud-switch-button {
color: var(--bp-accent-primary);
}
.bp-app .mud-switch .mud-switch-track {
background: rgba(100, 116, 139, 0.28);
}
.bp-app .mud-switch.mud-checked .mud-switch-track {
background: color-mix(in srgb, var(--bp-accent-primary) 42%, rgba(100, 116, 139, 0.2));
}
.bp-app .bp-topbar-lang-select .mud-input-root {
font-size: 0.8125rem;
}
.bp-app .bp-topbar__slot--lang .mud-input-control {
margin: 0;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
.bp-app .bp-topbar__slot--lang .mud-input-outlined {
min-height: 44px;
border-radius: var(--bp-radius-md);
background: var(--bp-surface-soft);
box-shadow: none;
}
.bp-app .bp-topbar__slot--lang .mud-input-control .mud-input-outlined-border {
border-width: 1px;
border-radius: var(--bp-radius-md);
border-color: var(--bp-border);
}
.bp-app .bp-topbar__slot--lang .mud-input-control:hover .mud-input-outlined-border,
.bp-app .bp-topbar__slot--lang .mud-input-control.mud-input-focused .mud-input-outlined-border {
border-color: var(--bp-accent-primary);
}
.bp-app .bp-topbar__slot--lang .mud-input-control.mud-input-focused .mud-input-outlined {
box-shadow: 0 0 0 2px var(--bp-accent-primary-soft);
}
.bp-app .bp-topbar__slot--lang .mud-input-slot,
.bp-app .bp-topbar__slot--lang .mud-select-input {
min-height: 36px;
}
.bp-dialog-submit,
.bp-dialog-cancel {
min-width: 132px;
min-height: 42px;
border-radius: var(--bp-radius-md);
font-weight: 700;
}
.bp-dialog-submit {
box-shadow: var(--bp-shadow-sm);
}
.bp-scroll-area::-webkit-scrollbar,
.bp-log::-webkit-scrollbar {
width: 9px;
}
.bp-scroll-area::-webkit-scrollbar-track,
.bp-log::-webkit-scrollbar-track {
background: transparent;
}
.bp-scroll-area::-webkit-scrollbar-thumb,
.bp-log::-webkit-scrollbar-thumb {
border: 2px solid transparent;
border-radius: 999px;
background: var(--bp-border-strong);
background-clip: padding-box;
}
.bp-scroll-area::-webkit-scrollbar-thumb:hover,
.bp-log::-webkit-scrollbar-thumb:hover {
background: var(--bp-text-muted);
background-clip: padding-box;
}
.bp-panel,
.bp-kpi-card,
.bp-list-item,
.bp-log-card,
.bp-running-field,
.bp-running-metric,
.bp-status-chip,
.bp-section-chip,
.bp-list-chip,
.bp-action-button {
animation: bp-fade-up 0.45s ease both;
}
@keyframes bp-fade-up {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
#blazor-error-ui {
color-scheme: light only;
background: lightyellow;
bottom: 0;
box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
box-sizing: border-box;
display: none;
left: 0;
padding: 0.6rem 1.25rem 0.7rem 1.25rem;
position: fixed;
width: 100%;
z-index: 1000;
}
#blazor-error-ui .dismiss {
cursor: pointer;
position: absolute;
right: 0.75rem;
top: 0.5rem;
}
.blazor-error-boundary {
background: #b32121;
padding: 1rem 1rem 1rem 1.25rem;
color: white;
}
.blazor-error-boundary::after {
content: "An error has occurred.";
}
.loading-progress {
position: absolute;
display: block;
width: 8rem;
height: 8rem;
inset: 20vh 0 auto 0;
margin: 0 auto;
}
.loading-progress circle {
fill: none;
stroke: #22304a;
stroke-width: 0.6rem;
transform-origin: 50% 50%;
transform: rotate(-90deg);
}
.loading-progress circle:last-child {
stroke: #60a5fa;
stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
transition: stroke-dasharray 0.05s ease-in-out;
}
.loading-progress-text {
position: absolute;
text-align: center;
font-weight: 700;
color: #334155;
inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}
.loading-progress-text:after {
content: var(--blazor-load-percentage-text, "Loading");
}
@media (max-width: 760px) {
.bp-hero {
align-items: flex-start;
}
.bp-actions-grid,
.bp-running-grid,
.bp-running-metrics,
.bp-kpi-grid {
grid-template-columns: 1fr;
}
.bp-list-item,
.bp-log-card__header,
.bp-panel-header {
flex-direction: column;
align-items: flex-start;
}
.bp-panel,
.bp-panel--hero {
padding: 0.85rem;
}
.bp-panel-header > div:first-child {
min-height: 0;
}
.bp-dialog-submit,
.bp-dialog-cancel {
min-width: 0;
flex: 1 1 0;
}
}
@media (max-width: 1100px) {
.bp-main-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-areas:
"controls running"
"queue batch"
"log log";
grid-template-rows: repeat(3, minmax(0, auto));
}
}
@media (max-width: 760px) {
.bp-main-grid {
grid-template-columns: 1fr;
grid-template-areas:
"controls"
"queue"
"running"
"batch"
"log";
grid-template-rows: none;
}
}
@media (prefers-reduced-motion: reduce) {
html,
body {
scroll-behavior: auto;
}
.bp-panel,
.bp-kpi-card,
.bp-list-item,
.bp-log-card,
.bp-running-field,
.bp-running-metric,
.bp-status-chip,
.bp-section-chip,
.bp-list-chip,
.bp-action-button {
animation: none;
transition: none;
}
}