1006 lines
23 KiB
CSS
1006 lines
23 KiB
CSS
.thot-fleet-ledger {
|
|
position: relative;
|
|
display: flex;
|
|
flex: 1;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
color: oklch(var(--foreground));
|
|
background: oklch(var(--background));
|
|
font-family: var(--font-sans);
|
|
container-name: work-area fleet-surface;
|
|
container-type: inline-size;
|
|
}
|
|
|
|
.thot-fleet-ledger__workspace {
|
|
--fleet-summary-inset: 1.25rem;
|
|
display: flex;
|
|
flex: 1;
|
|
flex-direction: column;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
background-color: oklch(var(--sidebar));
|
|
container-name: fleet-workspace;
|
|
container-type: inline-size;
|
|
}
|
|
|
|
.thot-fleet-ledger__header {
|
|
position: relative;
|
|
z-index: 5;
|
|
display: grid;
|
|
grid-template-areas:
|
|
"heading actions"
|
|
"status status";
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
gap: 0.75rem 1.5rem;
|
|
align-items: center;
|
|
padding: 0.625rem 1.25rem;
|
|
border-bottom: 1px solid oklch(var(--border));
|
|
background: oklch(var(--muted) / 0.42);
|
|
}
|
|
|
|
.thot-fleet-ledger__heading-copy {
|
|
grid-area: heading;
|
|
min-width: 0;
|
|
}
|
|
|
|
.thot-fleet-ledger__drawer-heading {
|
|
min-width: 0;
|
|
}
|
|
|
|
.thot-fleet-ledger__section-label,
|
|
.thot-fleet-ledger__status-label,
|
|
.thot-fleet-ledger__kpi-label {
|
|
margin: 0;
|
|
color: oklch(var(--muted-foreground));
|
|
font-family: var(--font-sans);
|
|
font-size: var(--text-meta);
|
|
font-weight: 600;
|
|
letter-spacing: normal;
|
|
line-height: 1.35;
|
|
text-transform: none;
|
|
}
|
|
|
|
.thot-fleet-ledger__title,
|
|
.thot-fleet-ledger__drawer-title {
|
|
margin: 0.25rem 0 0;
|
|
color: oklch(var(--foreground));
|
|
font-family: var(--font-heading);
|
|
font-weight: 600;
|
|
letter-spacing: -0.025em;
|
|
}
|
|
|
|
.thot-fleet-ledger__title {
|
|
margin: 0;
|
|
font-family: var(--font-sans);
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
letter-spacing: -0.0125em;
|
|
line-height: 1.25;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.thot-fleet-ledger__drawer-description {
|
|
max-width: 68ch;
|
|
margin: 0.45rem 0 0;
|
|
color: oklch(var(--muted-foreground));
|
|
font-size: var(--text-control);
|
|
line-height: 1.55;
|
|
}
|
|
|
|
.thot-fleet-ledger__header-actions {
|
|
grid-area: actions;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.thot-fleet-ledger__header-status {
|
|
grid-area: status;
|
|
min-width: 0;
|
|
padding-inline: var(--fleet-summary-inset);
|
|
}
|
|
|
|
.thot-fleet-ledger__header-status > .thot-fleet-ledger__status {
|
|
display: block;
|
|
padding: 0;
|
|
border: 0;
|
|
background: transparent;
|
|
}
|
|
|
|
.thot-fleet-ledger__header-status .thot-fleet-ledger__section-label {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
clip: rect(0, 0, 0, 0);
|
|
white-space: nowrap;
|
|
border: 0;
|
|
}
|
|
|
|
.thot-fleet-ledger__header-status .thot-fleet-ledger__status-list {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 0.5rem 1.25rem;
|
|
}
|
|
|
|
.thot-fleet-ledger__header-status .thot-fleet-ledger__status-item {
|
|
min-width: 0;
|
|
}
|
|
|
|
.thot-fleet-ledger__status {
|
|
display: grid;
|
|
gap: 0.75rem;
|
|
padding: 0.75rem 1.25rem;
|
|
border-bottom: 1px solid oklch(var(--border));
|
|
background: oklch(var(--muted) / 0.42);
|
|
}
|
|
|
|
.thot-fleet-ledger__status-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem 1.5rem;
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.thot-fleet-ledger__status-item {
|
|
--fleet-status-color: oklch(var(--muted-foreground));
|
|
display: flex;
|
|
min-width: min(100%, 10rem);
|
|
gap: 0.5rem;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.thot-fleet-ledger__status-item[data-tone="success"] {
|
|
--fleet-status-color: oklch(var(--success));
|
|
}
|
|
|
|
.thot-fleet-ledger__status-item[data-tone="warning"] {
|
|
--fleet-status-color: oklch(var(--warning));
|
|
}
|
|
|
|
.thot-fleet-ledger__status-item[data-tone="danger"] {
|
|
--fleet-status-color: oklch(var(--destructive));
|
|
}
|
|
|
|
.thot-fleet-ledger__status-item[data-tone="info"] {
|
|
--fleet-status-color: oklch(var(--info));
|
|
}
|
|
|
|
.thot-fleet-ledger__status-mark {
|
|
width: 0.45rem;
|
|
height: 0.45rem;
|
|
flex: 0 0 auto;
|
|
border-radius: 999px;
|
|
background: var(--fleet-status-color);
|
|
box-shadow: 0 0 0 3px color-mix(in oklch, var(--fleet-status-color) 16%, transparent);
|
|
}
|
|
|
|
.thot-fleet-ledger__status-copy {
|
|
display: grid;
|
|
grid-template-columns: auto auto;
|
|
gap: 0.05rem 0.4rem;
|
|
min-width: 0;
|
|
}
|
|
|
|
.thot-fleet-ledger__status-label {
|
|
grid-column: 1 / -1;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
font-size: var(--text-meta);
|
|
}
|
|
|
|
.thot-fleet-ledger__status-value {
|
|
overflow: hidden;
|
|
color: oklch(var(--foreground));
|
|
font-family: var(--font-sans);
|
|
font-size: var(--text-meta);
|
|
font-weight: 600;
|
|
line-height: 1.45;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.thot-fleet-ledger__status-detail {
|
|
overflow: hidden;
|
|
color: oklch(var(--muted-foreground));
|
|
font-size: var(--text-meta);
|
|
line-height: 1.45;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.thot-fleet-ledger__kpi-section {
|
|
display: grid;
|
|
gap: 0.625rem;
|
|
padding: 0.75rem var(--fleet-summary-inset) 0;
|
|
border-bottom: 1px solid oklch(var(--border));
|
|
background: oklch(var(--card));
|
|
}
|
|
|
|
.thot-fleet-ledger__kpi-strip {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(min(100%, 6rem), 1fr));
|
|
margin: 0;
|
|
}
|
|
|
|
.thot-fleet-ledger__kpi {
|
|
min-width: 0;
|
|
padding: 0 0.75rem 0.75rem 0;
|
|
}
|
|
|
|
.thot-fleet-ledger__kpi + .thot-fleet-ledger__kpi {
|
|
padding-left: 0;
|
|
}
|
|
|
|
.thot-fleet-ledger__kpi-value,
|
|
.thot-fleet-ledger__kpi-detail {
|
|
margin: 0;
|
|
}
|
|
|
|
.thot-fleet-ledger__kpi-value {
|
|
margin-top: 0.2rem;
|
|
color: oklch(var(--foreground));
|
|
font-family: var(--font-sans);
|
|
font-size: var(--text-body);
|
|
font-variant-numeric: tabular-nums;
|
|
font-weight: 600;
|
|
letter-spacing: normal;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.thot-fleet-ledger__kpi-detail {
|
|
margin-top: 0.15rem;
|
|
color: oklch(var(--muted-foreground));
|
|
font-size: var(--text-meta);
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.thot-fleet-ledger__navigation {
|
|
position: relative;
|
|
z-index: 4;
|
|
display: flex;
|
|
min-width: 0;
|
|
min-height: 3rem;
|
|
gap: 0.5rem;
|
|
align-items: center;
|
|
padding: 0.5rem 1rem;
|
|
border-bottom: 1px solid oklch(var(--border));
|
|
background: oklch(var(--card));
|
|
}
|
|
|
|
.thot-fleet-back-action {
|
|
min-height: 2.25rem;
|
|
border: 1px solid oklch(var(--primary) / 0.28);
|
|
color: oklch(var(--primary));
|
|
background: oklch(var(--primary) / 0.08);
|
|
box-shadow: 0 1px 2px oklch(var(--primary) / 0.1);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.thot-fleet-back-action:not(:disabled):hover {
|
|
border-color: oklch(var(--primary) / 0.48);
|
|
color: oklch(var(--primary));
|
|
background: oklch(var(--primary) / 0.14);
|
|
}
|
|
|
|
.thot-fleet-ledger__breadcrumb {
|
|
min-width: 0;
|
|
overflow: visible;
|
|
}
|
|
|
|
.thot-fleet-ledger__breadcrumb-list {
|
|
display: flex;
|
|
min-width: 0;
|
|
margin: 0;
|
|
padding: 0;
|
|
align-items: center;
|
|
list-style: none;
|
|
}
|
|
|
|
.thot-fleet-ledger__breadcrumb-item {
|
|
display: flex;
|
|
min-width: 0;
|
|
align-items: center;
|
|
}
|
|
|
|
.thot-fleet-ledger__breadcrumb-separator {
|
|
width: 0.9rem;
|
|
height: 0.9rem;
|
|
margin-inline: 0.2rem;
|
|
flex: 0 0 auto;
|
|
color: oklch(var(--muted-foreground) / 0.65);
|
|
}
|
|
|
|
.thot-fleet-ledger__breadcrumb-button {
|
|
max-width: 13rem;
|
|
overflow: hidden;
|
|
padding: 0.2rem 0.25rem;
|
|
border: 0;
|
|
border-radius: calc(var(--radius) - 0.25rem);
|
|
color: oklch(var(--muted-foreground));
|
|
background: transparent;
|
|
font: inherit;
|
|
font-size: var(--text-control);
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.thot-fleet-ledger__breadcrumb-button:hover {
|
|
color: oklch(var(--foreground));
|
|
background: oklch(var(--muted));
|
|
}
|
|
|
|
.thot-fleet-ledger__breadcrumb-button:focus-visible {
|
|
outline: 2px solid oklch(var(--ring));
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.thot-fleet-ledger__breadcrumb-label {
|
|
max-width: 18rem;
|
|
overflow: hidden;
|
|
color: oklch(var(--foreground));
|
|
font-size: var(--text-control);
|
|
font-weight: 600;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.thot-fleet-ledger__navigation-trailing,
|
|
.thot-fleet-ledger__command-trailing {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
align-items: center;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.thot-fleet-ledger__command-bar {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
min-height: 3.25rem;
|
|
gap: 0.625rem;
|
|
align-items: center;
|
|
padding: 0.625rem 1rem;
|
|
border-bottom: 1px solid oklch(var(--border));
|
|
background: oklch(var(--muted) / 0.24);
|
|
}
|
|
|
|
.thot-fleet-ledger__command-picker {
|
|
display: flex;
|
|
min-width: min(100%, 12rem);
|
|
gap: 0.5rem;
|
|
align-items: center;
|
|
}
|
|
|
|
.thot-fleet-action-selector {
|
|
display: flex;
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
flex: 0 0 auto;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
align-items: center;
|
|
}
|
|
|
|
.thot-fleet-action-selector__scope {
|
|
display: grid;
|
|
min-width: 7.5rem;
|
|
color: oklch(var(--foreground));
|
|
font-family: var(--font-sans);
|
|
font-size: var(--text-meta);
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.thot-fleet-action-selector__scope span {
|
|
color: oklch(var(--muted-foreground));
|
|
font-size: var(--text-meta);
|
|
}
|
|
|
|
.thot-fleet-action-selector__select {
|
|
flex: 0 0 auto;
|
|
width: max-content;
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
height: 2rem;
|
|
padding: 0 2rem 0 0.625rem;
|
|
border: 1px solid oklch(var(--input));
|
|
border-radius: var(--radius);
|
|
color: oklch(var(--foreground));
|
|
background: oklch(var(--background));
|
|
font-size: var(--text-control);
|
|
outline: none;
|
|
}
|
|
|
|
.thot-fleet-action-selector__select:focus-visible {
|
|
border-color: oklch(var(--primary) / 0.65);
|
|
box-shadow: 0 0 0 3px oklch(var(--ring) / 0.15);
|
|
}
|
|
|
|
.thot-fleet-action-selector__select:disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.55;
|
|
}
|
|
|
|
.thot-fleet-action-selector__reason {
|
|
flex-basis: 100%;
|
|
color: oklch(var(--muted-foreground));
|
|
font-size: var(--text-meta);
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.thot-fleet-ledger__selection-summary {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
color: oklch(var(--muted-foreground));
|
|
font-family: var(--font-sans);
|
|
font-size: var(--text-meta);
|
|
letter-spacing: normal;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.thot-fleet-ledger__content {
|
|
position: relative;
|
|
display: flex;
|
|
flex: 1;
|
|
flex-direction: column;
|
|
min-width: 0;
|
|
min-height: 18rem;
|
|
margin-block-end: 30px;
|
|
margin-inline-start: 20px;
|
|
overflow: hidden;
|
|
border-inline-end: 1px solid oklch(var(--border));
|
|
background: oklch(var(--card));
|
|
}
|
|
|
|
.thot-fleet-ledger__drawer {
|
|
position: absolute;
|
|
z-index: 50;
|
|
inset-block: clamp(0.625rem, 2vh, 1rem);
|
|
inset-inline-start: 50%;
|
|
inset-inline-end: auto;
|
|
display: flex;
|
|
width: min(75rem, calc(100% - 2rem));
|
|
min-width: 0;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
border: 1px solid oklch(var(--border));
|
|
border-radius: 0.75rem;
|
|
color: oklch(var(--card-foreground));
|
|
background: oklch(var(--card));
|
|
box-shadow:
|
|
0 28px 72px oklch(0.12 0.02 20 / 0.28),
|
|
0 7px 20px oklch(0.12 0.02 20 / 0.16);
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.thot-fleet-ledger .thot-fleet-ledger__context-panel {
|
|
position: absolute;
|
|
inset-block: clamp(0.625rem, 2vh, 1rem);
|
|
inset-inline-start: 50%;
|
|
inset-inline-end: auto;
|
|
width: min(75rem, calc(100% - 2rem));
|
|
max-width: none;
|
|
min-width: 0;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.thot-fleet-drawer-form {
|
|
min-height: 0;
|
|
}
|
|
|
|
.thot-fleet-drawer-form__context {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 1rem;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
margin-bottom: 1rem;
|
|
padding-bottom: 1rem;
|
|
border-bottom: 1px solid oklch(var(--border));
|
|
}
|
|
|
|
.thot-catalog-drawer {
|
|
isolation: isolate;
|
|
background-color: oklch(var(--background));
|
|
background-image: none;
|
|
box-shadow:
|
|
0 30px 84px oklch(0.12 0.02 20 / 0.3),
|
|
0 8px 22px oklch(0.12 0.02 20 / 0.18);
|
|
}
|
|
|
|
.thot-catalog-drawer__body--empty {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.thot-catalog-drawer__body--flush {
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
padding: 0;
|
|
}
|
|
|
|
.thot-catalog-drawer__footer--split {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.thot-fleet-ledger__drawer-header,
|
|
.thot-catalog-drawer__header {
|
|
color: oklch(var(--primary-foreground));
|
|
background-color: oklch(var(--primary));
|
|
background-image: none;
|
|
border-color: oklch(var(--primary-foreground) / 0.18);
|
|
box-shadow: inset 0 -1px 0 oklch(var(--primary-foreground) / 0.18);
|
|
}
|
|
|
|
.thot-sensitive-run--success .thot-fleet-ledger__drawer-header,
|
|
.thot-sensitive-run--success .thot-catalog-drawer__header {
|
|
color: oklch(var(--primary-foreground));
|
|
background-color: oklch(var(--success));
|
|
border-color: oklch(var(--primary-foreground) / 0.18);
|
|
}
|
|
|
|
.thot-sensitive-run--failure .thot-fleet-ledger__drawer-header,
|
|
.thot-sensitive-run--failure .thot-catalog-drawer__header {
|
|
color: oklch(var(--destructive-foreground));
|
|
background-color: oklch(var(--destructive));
|
|
border-color: oklch(var(--destructive-foreground) / 0.18);
|
|
}
|
|
|
|
.thot-fleet-ledger__drawer-header .thot-fleet-ledger__drawer-title,
|
|
.thot-fleet-ledger__drawer-header .thot-fleet-ledger__drawer-description,
|
|
.thot-fleet-ledger__drawer-header .thot-fleet-ledger__eyebrow,
|
|
.thot-catalog-drawer__header .thot-label,
|
|
.thot-catalog-drawer__header .text-muted-foreground {
|
|
color: oklch(var(--primary-foreground));
|
|
}
|
|
|
|
.thot-fleet-ledger__drawer-header button,
|
|
.thot-catalog-drawer__header button {
|
|
border-color: oklch(var(--primary-foreground) / 0.22);
|
|
color: inherit;
|
|
background: oklch(var(--primary-foreground) / 0.1);
|
|
}
|
|
|
|
.thot-fleet-ledger__drawer-header button:hover,
|
|
.thot-catalog-drawer__header button:hover {
|
|
color: inherit;
|
|
background: oklch(var(--primary-foreground) / 0.18);
|
|
}
|
|
|
|
.thot-catalog-drawer__history button[aria-current="true"] {
|
|
color: oklch(var(--foreground));
|
|
background: oklch(var(--primary) / 0.09);
|
|
box-shadow: inset 3px 0 0 oklch(var(--primary));
|
|
}
|
|
|
|
.thot-catalog-drawer__history button[data-status="completed"],
|
|
.thot-catalog-drawer__history button[data-status="succeeded"] {
|
|
background: oklch(var(--success) / 0.1);
|
|
}
|
|
|
|
.thot-catalog-drawer__history button[aria-current="true"][data-status="completed"],
|
|
.thot-catalog-drawer__history button[aria-current="true"][data-status="succeeded"] {
|
|
background: oklch(var(--success) / 0.1);
|
|
box-shadow: inset 0 0 0 1px oklch(var(--success) / 0.5);
|
|
}
|
|
|
|
.thot-catalog-drawer__event-log {
|
|
min-height: 8rem;
|
|
max-height: 18rem;
|
|
}
|
|
|
|
.thot-catalog-drawer__history-list {
|
|
max-height: 14rem;
|
|
}
|
|
|
|
.thot-catalog-drawer__run-layout > .thot-catalog-drawer__history {
|
|
margin-top: 1.25rem;
|
|
}
|
|
|
|
.thot-fleet-grid-surface {
|
|
position: relative;
|
|
}
|
|
|
|
.thot-fleet-grid-toolbar {
|
|
background: oklch(var(--muted) / 0.32);
|
|
}
|
|
|
|
@media (min-width: 48rem) {
|
|
.thot-fleet-grid-toolbar > .thot-fleet-action-selector {
|
|
flex: 0 0 auto;
|
|
min-width: 0;
|
|
}
|
|
}
|
|
|
|
.thot-fleet-ledger-grid {
|
|
--ag-header-background-color: oklch(var(--muted) / 0.84);
|
|
--ag-odd-row-background-color: oklch(var(--card));
|
|
--ag-row-hover-color: oklch(var(--primary) / 0.045);
|
|
--ag-selected-row-background-color: oklch(var(--primary) / 0.085);
|
|
}
|
|
|
|
.thot-fleet-ledger-grid .ag-header-cell-text {
|
|
font-family: var(--font-sans);
|
|
font-size: var(--text-meta);
|
|
letter-spacing: normal;
|
|
text-transform: none;
|
|
}
|
|
|
|
.thot-fleet-ledger-grid .ag-row {
|
|
background: oklch(var(--card));
|
|
}
|
|
|
|
.thot-fleet-ledger-grid .ag-row-even {
|
|
background: oklch(var(--muted) / 0.12);
|
|
}
|
|
|
|
/* Keep selected rows readable without overpowering the status indicators. */
|
|
.thot-fleet-ledger-grid .ag-row.ag-row-selected,
|
|
.thot-fleet-ledger-grid .ag-row.ag-row-selected .ag-cell,
|
|
.thot-fleet-ledger-grid .ag-row.ag-row-selected .ag-grid-pinned-left-cells,
|
|
.thot-fleet-ledger-grid .ag-row.ag-row-selected .ag-grid-pinned-right-cells {
|
|
background-color: oklch(var(--nav-active)) !important;
|
|
color: oklch(var(--nav-active-foreground));
|
|
}
|
|
|
|
.thot-fleet-icon-action {
|
|
position: relative;
|
|
}
|
|
|
|
.thot-fleet-nav-action {
|
|
position: relative;
|
|
}
|
|
|
|
.thot-fleet-icon-action::after {
|
|
position: absolute;
|
|
z-index: 80;
|
|
inset-inline-end: 0;
|
|
inset-block-start: calc(100% + 3px);
|
|
width: max-content;
|
|
max-width: 12rem;
|
|
padding: 5px 8px;
|
|
border: 1px solid oklch(42% 0.018 258);
|
|
border-radius: 6px;
|
|
color: oklch(96% 0.006 258);
|
|
background: oklch(24% 0.014 258);
|
|
box-shadow: 0 8px 20px -10px oklch(12% 0.02 258 / 0.72);
|
|
content: attr(data-tooltip);
|
|
font-size: var(--text-meta);
|
|
font-weight: 600;
|
|
line-height: 1.25;
|
|
text-align: center;
|
|
white-space: normal;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transform: translateY(-2px);
|
|
transition:
|
|
opacity 90ms linear,
|
|
transform 120ms cubic-bezier(0.25, 1, 0.5, 1),
|
|
visibility 0ms linear 120ms;
|
|
visibility: hidden;
|
|
}
|
|
|
|
.thot-fleet-nav-action::after {
|
|
position: absolute;
|
|
z-index: 90;
|
|
inset-inline-start: 50%;
|
|
inset-block-end: calc(100% + 5px);
|
|
width: max-content;
|
|
max-width: 12rem;
|
|
padding: 0.3rem 0.45rem;
|
|
border: 1px solid oklch(var(--border));
|
|
border-radius: calc(var(--radius) - 0.125rem);
|
|
color: oklch(var(--popover-foreground));
|
|
background: oklch(var(--popover));
|
|
box-shadow: var(--shadow-sm);
|
|
content: attr(data-tooltip);
|
|
font-size: var(--text-meta);
|
|
font-weight: 600;
|
|
line-height: 1.2;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transform: translate(-50%, 2px);
|
|
transition: opacity 60ms cubic-bezier(0.22, 1, 0.36, 1), transform 60ms cubic-bezier(0.22, 1, 0.36, 1);
|
|
visibility: hidden;
|
|
}
|
|
|
|
.thot-fleet-nav-action--below::after {
|
|
inset-block: calc(100% + 5px) auto;
|
|
transform: translate(-50%, -2px);
|
|
}
|
|
|
|
.thot-fleet-icon-action:hover::after,
|
|
.thot-fleet-icon-action:focus-visible::after,
|
|
.thot-fleet-icon-action:focus-within::after {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
transition-delay: 60ms;
|
|
visibility: visible;
|
|
}
|
|
|
|
.thot-fleet-nav-action:hover,
|
|
.thot-fleet-nav-action:focus-visible {
|
|
z-index: 90;
|
|
}
|
|
|
|
.thot-fleet-nav-action:hover::after,
|
|
.thot-fleet-nav-action:focus-visible::after {
|
|
opacity: 1;
|
|
transform: translate(-50%, 0);
|
|
visibility: visible;
|
|
}
|
|
|
|
.thot-fleet-ledger-grid .ag-row:has(.thot-fleet-icon-action:hover),
|
|
.thot-fleet-ledger-grid .ag-row:has(.thot-fleet-icon-action:focus-visible),
|
|
.thot-fleet-ledger-grid .ag-row:has(.thot-fleet-icon-action:focus-within),
|
|
.thot-fleet-ledger-grid .ag-grid-pinned-right-cells:has(.thot-fleet-icon-action:hover),
|
|
.thot-fleet-ledger-grid .ag-grid-pinned-right-cells:has(.thot-fleet-icon-action:focus-visible),
|
|
.thot-fleet-ledger-grid .ag-grid-pinned-right-cells:has(.thot-fleet-icon-action:focus-within),
|
|
.thot-fleet-ledger-grid .ag-cell:has(.thot-fleet-icon-action:hover),
|
|
.thot-fleet-ledger-grid .ag-cell:has(.thot-fleet-icon-action:focus-visible),
|
|
.thot-fleet-ledger-grid .ag-cell:has(.thot-fleet-icon-action:focus-within) {
|
|
z-index: 8;
|
|
overflow: visible;
|
|
}
|
|
|
|
.thot-fleet-ledger__drawer:focus-visible {
|
|
outline: 2px solid oklch(var(--ring));
|
|
outline-offset: -2px;
|
|
}
|
|
|
|
.thot-fleet-ledger__drawer-header {
|
|
display: flex;
|
|
gap: 1rem;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
padding: 1rem 1rem 0.875rem 1.25rem;
|
|
border-bottom: 1px solid oklch(var(--primary-foreground) / 0.18);
|
|
}
|
|
|
|
.thot-fleet-ledger__drawer-title {
|
|
font-size: var(--text-section);
|
|
line-height: 1.18;
|
|
}
|
|
|
|
.thot-fleet-ledger__drawer-body {
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow-y: auto;
|
|
padding: 1.25rem;
|
|
overscroll-behavior: contain;
|
|
}
|
|
|
|
.thot-fleet-ledger__drawer-body.thot-catalog-drawer__body--empty {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.thot-fleet-ledger__drawer-body.thot-catalog-drawer__body--flush {
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
padding: 0;
|
|
}
|
|
|
|
.thot-fleet-ledger__drawer-body.thot-catalog-drawer__run-layout {
|
|
padding: clamp(0.75rem, 1.5cqi, 1.25rem);
|
|
}
|
|
|
|
.thot-fleet-ledger__drawer-footer {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
padding: 0.875rem 1.25rem;
|
|
border-top: 1px solid oklch(var(--border));
|
|
background: oklch(var(--muted) / 0.32);
|
|
}
|
|
|
|
.thot-fleet-ledger__drawer-footer.thot-catalog-drawer__footer--split {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
@media (min-width: 64rem) {
|
|
.thot-fleet-ledger__workspace {
|
|
--fleet-summary-inset: 1.5rem;
|
|
}
|
|
.thot-fleet-ledger__header {
|
|
padding-inline: 1.5rem;
|
|
}
|
|
|
|
.thot-fleet-ledger__status {
|
|
grid-template-columns: 9rem minmax(0, 1fr);
|
|
align-items: start;
|
|
padding-inline: 1.5rem;
|
|
}
|
|
|
|
.thot-fleet-ledger__navigation,
|
|
.thot-fleet-ledger__command-bar {
|
|
padding-inline: 1.25rem;
|
|
}
|
|
|
|
}
|
|
|
|
/* Share the KPI grid's first, middle and last column anchors on wide work areas. */
|
|
@container fleet-workspace (min-width: 48rem) {
|
|
.thot-fleet-ledger__header-status .thot-fleet-ledger__status-list {
|
|
grid-template-columns: repeat(5, minmax(0, 1fr));
|
|
column-gap: 0;
|
|
}
|
|
|
|
.thot-fleet-ledger__header-status .thot-fleet-ledger__status-item:nth-child(-n + 2) {
|
|
grid-column: span 2;
|
|
}
|
|
}
|
|
|
|
@container fleet-surface (max-width: 47.999rem) {
|
|
.thot-fleet-ledger__drawer,
|
|
.thot-fleet-ledger .thot-fleet-ledger__context-panel {
|
|
inset-block: 0.625rem;
|
|
width: calc(100% - 1.5rem);
|
|
}
|
|
}
|
|
|
|
@container fleet-workspace (max-width: 47.999rem) {
|
|
.thot-fleet-ledger__header {
|
|
grid-template-areas:
|
|
"heading"
|
|
"actions"
|
|
"status";
|
|
grid-template-columns: minmax(0, 1fr);
|
|
padding-inline: 1rem;
|
|
}
|
|
|
|
.thot-fleet-ledger__header-actions {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.thot-fleet-ledger__header-status .thot-fleet-ledger__status-list {
|
|
grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
|
|
}
|
|
}
|
|
|
|
@container work-area-panel (min-width: 48rem) {
|
|
.thot-catalog-drawer__history-layout {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) clamp(12.5rem, 25cqi, 15rem);
|
|
gap: 0 clamp(0.75rem, 2cqi, 1.25rem);
|
|
align-content: start;
|
|
}
|
|
|
|
.thot-catalog-drawer__history-layout > * {
|
|
grid-column: 1;
|
|
}
|
|
|
|
.thot-catalog-drawer__history-layout > .thot-catalog-drawer__history {
|
|
position: sticky;
|
|
top: 0;
|
|
grid-column: 2;
|
|
grid-row: 1 / span 40;
|
|
align-self: start;
|
|
margin-top: 0;
|
|
}
|
|
|
|
.thot-catalog-drawer__run-layout {
|
|
height: 100%;
|
|
min-height: 0;
|
|
grid-template-rows: minmax(0, 1fr);
|
|
align-content: stretch;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.thot-catalog-drawer__run-layout > .thot-catalog-drawer__run-main {
|
|
display: flex;
|
|
min-height: 0;
|
|
flex-direction: column;
|
|
grid-column: 1;
|
|
grid-row: 1;
|
|
}
|
|
|
|
.thot-catalog-drawer__run-layout > .thot-catalog-drawer__history {
|
|
position: static;
|
|
display: flex;
|
|
min-height: 0;
|
|
flex-direction: column;
|
|
align-self: stretch;
|
|
grid-row: 1;
|
|
}
|
|
|
|
.thot-catalog-drawer__run-layout .thot-catalog-drawer__events {
|
|
display: flex;
|
|
min-height: 10rem;
|
|
flex: 1;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.thot-catalog-drawer__run-layout .thot-catalog-drawer__event-log,
|
|
.thot-catalog-drawer__run-layout .thot-catalog-drawer__history-list {
|
|
min-height: 0;
|
|
max-height: none;
|
|
flex: 1;
|
|
}
|
|
|
|
.thot-fleet-ledger__drawer-body.thot-column-metadata-drawer-body {
|
|
display: flex;
|
|
min-height: 0;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.thot-column-metadata-matrix {
|
|
flex: 1;
|
|
grid-template-rows: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.thot-column-metadata-field textarea {
|
|
min-height: 0;
|
|
}
|
|
}
|
|
|
|
.thot-column-metadata-matrix textarea {
|
|
overflow-y: auto;
|
|
}
|
|
|
|
@media (max-width: 47.999rem) {
|
|
.thot-fleet-ledger__workspace {
|
|
overflow-y: auto;
|
|
overscroll-behavior: contain;
|
|
}
|
|
|
|
.thot-fleet-ledger__content {
|
|
flex: 0 0 28rem;
|
|
min-height: 28rem;
|
|
}
|
|
|
|
|
|
.thot-fleet-ledger__navigation {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.thot-fleet-ledger__breadcrumb {
|
|
order: 2;
|
|
width: 100%;
|
|
}
|
|
|
|
.thot-fleet-ledger__command-picker,
|
|
.thot-fleet-ledger__selection-summary {
|
|
width: 100%;
|
|
}
|
|
|
|
}
|
|
|
|
@media (max-height: 44rem) and (min-width: 48rem) {
|
|
.thot-fleet-ledger__workspace {
|
|
overflow-y: auto;
|
|
overscroll-behavior: contain;
|
|
}
|
|
|
|
.thot-fleet-ledger__status,
|
|
.thot-fleet-ledger__kpi-strip {
|
|
padding-block: 0.5rem;
|
|
}
|
|
|
|
.thot-fleet-ledger__content {
|
|
flex: 0 0 24rem;
|
|
min-height: 24rem;
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.thot-fleet-ledger__breadcrumb-button {
|
|
transition: none;
|
|
}
|
|
}
|