Files
model-platform/frontend/app/styles/schedule.css
T

1831 lines
32 KiB
CSS

.schedule-page {
position: relative;
display: flex;
min-height: 0;
flex: 1;
flex-direction: column;
gap: 10px;
padding: 10px;
overflow: hidden;
}
.schedule-toolbar {
display: flex;
min-height: 56px;
align-items: center;
justify-content: space-between;
padding: 0 14px;
border: 1px solid #dce4ec;
border-radius: 7px;
background: #fff;
box-shadow: 0 2px 7px rgb(25 46 73 / 3%);
}
.schedule-toolbar > div:first-child {
display: flex;
align-items: baseline;
gap: 10px;
}
.schedule-toolbar strong {
color: #1c2d42;
font-size: 16px;
}
.schedule-toolbar > div:first-child span {
color: #8b99a9;
font-size: 11px;
}
.schedule-toolbar__actions {
display: flex;
align-items: center;
gap: 8px;
}
.schedule-toolbar__actions button,
.schedule-canvas-title button,
.schedule-canvas-status button {
display: inline-flex;
min-height: 32px;
align-items: center;
justify-content: center;
gap: 5px;
padding: 0 12px;
border: 1px solid #dce5ee;
border-radius: 6px;
color: #526477;
background: #fff;
cursor: pointer;
font-size: 12px;
font-weight: 600;
}
.schedule-toolbar__actions button:hover:not(:disabled),
.schedule-canvas-title button:hover,
.schedule-canvas-status button:hover {
border-color: #aac6e5;
color: #126aca;
background: #f6faff;
}
.schedule-toolbar__actions button:disabled {
cursor: not-allowed;
opacity: .5;
}
.schedule-toolbar__actions .schedule-action--primary {
border-color: #126fd4;
color: #fff;
background: #126fd4;
}
.schedule-toolbar__actions .schedule-action--primary:hover:not(:disabled) {
border-color: #0e5fb9;
color: #fff;
background: #0e5fb9;
}
.schedule-toolbar__actions .schedule-action--danger {
border-color: #f1cccc;
color: #c14c4c;
}
.schedule-toolbar__actions .schedule-action--run {
border-color: #159466;
color: #fff;
background: #159466;
}
.schedule-toolbar__actions .schedule-action--run:hover:not(:disabled) {
border-color: #0f7d55;
color: #fff;
background: #0f7d55;
}
.schedule-workbench {
display: grid;
min-height: 0;
flex: 1;
grid-template-columns: 278px minmax(420px, 1fr) 316px;
gap: 10px;
}
.schedule-left,
.schedule-center,
.schedule-right {
min-height: 0;
border: 1px solid #dce4ec;
border-radius: 7px;
background: #fff;
box-shadow: 0 2px 7px rgb(25 46 73 / 3%);
}
.schedule-left {
display: grid;
overflow: hidden;
grid-template-rows: minmax(210px, 42%) minmax(260px, 58%);
}
.schedule-panel {
display: flex;
min-height: 0;
flex-direction: column;
overflow: hidden;
}
.schedule-list-panel {
border-bottom: 1px solid #e3e9ef;
}
.schedule-panel__title {
display: flex;
min-height: 48px;
align-items: center;
justify-content: space-between;
padding: 0 12px;
}
.schedule-panel__title > div {
display: flex;
align-items: center;
gap: 7px;
}
.schedule-panel__title strong {
color: #223247;
font-size: 14px;
}
.schedule-panel__title span {
display: inline-grid;
min-width: 20px;
height: 20px;
place-items: center;
padding: 0 5px;
border-radius: 10px;
color: #718195;
background: #eef3f8;
font-size: 10px;
}
.schedule-search {
display: flex;
min-height: 35px;
align-items: center;
gap: 7px;
margin: 0 10px 7px;
padding: 0 9px;
border: 1px solid #dce5ed;
border-radius: 6px;
color: #95a3b2;
background: #fff;
}
.schedule-search:focus-within {
border-color: #8db9e8;
box-shadow: 0 0 0 3px rgb(38 124 216 / 8%);
}
.schedule-search input {
min-width: 0;
flex: 1;
border: 0;
outline: 0;
color: #33475d;
background: transparent;
font-size: 12px;
}
.schedule-search input::placeholder {
color: #a6b2be;
}
.schedule-list,
.artifact-list {
min-height: 0;
padding: 0 8px 9px;
overflow: auto;
}
.schedule-card {
position: relative;
display: flex;
width: 100%;
min-height: 62px;
align-items: center;
gap: 9px;
margin-bottom: 6px;
padding: 8px 10px;
border: 1px solid #e1e8ef;
border-radius: 6px;
color: #526276;
background: #fff;
cursor: pointer;
text-align: left;
}
.schedule-card:hover {
border-color: #b9cfe7;
background: #f8fbff;
}
.schedule-card--active {
border-color: #89b8ec;
color: #1c64b1;
background: #edf6ff;
box-shadow: inset 3px 0 #247fdc;
}
.schedule-card > span:last-child {
display: flex;
min-width: 0;
flex-direction: column;
gap: 4px;
}
.schedule-card strong {
max-width: 205px;
overflow: hidden;
color: #283b50;
font-size: 12px;
text-overflow: ellipsis;
white-space: nowrap;
}
.schedule-card small {
color: #8d9aab;
font-size: 10px;
}
.schedule-status {
width: 8px;
height: 8px;
flex: 0 0 auto;
border-radius: 50%;
background: #aeb9c5;
box-shadow: 0 0 0 3px rgb(142 156 171 / 11%);
}
.schedule-status.is-enabled {
background: #18b979;
box-shadow: 0 0 0 3px rgb(24 185 121 / 12%);
}
/* =========================================================
* Artifact List
* 稳定版本脚本 / Notebook 资源列表
* ========================================================= */
.artifact-list {
min-height: 0;
padding: 0 8px 9px;
overflow: auto;
}
.artifact-list::-webkit-scrollbar {
width: 5px;
}
.artifact-list::-webkit-scrollbar-track {
background: transparent;
}
.artifact-list::-webkit-scrollbar-thumb {
border-radius: 999px;
background: #d9e1e9;
}
.artifact-list::-webkit-scrollbar-thumb:hover {
background: #c4d0dc;
}
/* ---------------------------------------------------------
* Artifact Group
* --------------------------------------------------------- */
.artifact-group {
margin-bottom: 6px;
overflow: hidden;
border: 1px solid #edf1f5;
border-radius: 8px;
background: #fff;
transition:
border-color .16s ease,
box-shadow .16s ease;
}
.artifact-group:hover {
border-color: #e1e8ef;
}
/* ---------------------------------------------------------
* Group Header
* --------------------------------------------------------- */
.artifact-group__header {
display: flex;
width: 100%;
min-height: 42px;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 7px 8px;
border: 0;
background: transparent;
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
user-select: none;
}
.artifact-group__header:hover {
background: #f8fafc;
}
.artifact-group__main {
display: flex;
min-width: 0;
align-items: center;
gap: 7px;
}
.artifact-group__chevron {
width: 14px;
height: 14px;
flex: 0 0 auto;
color: #9aa7b5;
transition: transform .18s ease;
}
.artifact-group__chevron.is-open {
transform: rotate(90deg);
}
/* ---------------------------------------------------------
* File Type Icon
* --------------------------------------------------------- */
.artifact-group__icon {
display: grid;
width: 27px;
height: 27px;
flex: 0 0 auto;
place-items: center;
border-radius: 6px;
}
.artifact-group__icon svg {
width: 14px;
height: 14px;
}
.artifact-group__icon--notebook {
color: #dc5c52;
background: #fff0ee;
}
.artifact-group__icon--python {
color: #326fc1;
background: #eaf3ff;
}
.artifact-group__name {
min-width: 0;
overflow: hidden;
color: #33465a;
font-size: 11px;
font-weight: 600;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ---------------------------------------------------------
* Version Count
* --------------------------------------------------------- */
.artifact-group__count {
display: inline-flex;
min-width: 0;
flex: 0 0 auto;
align-items: center;
padding: 2px 6px;
border: 1px solid #e5eaf0;
border-radius: 999px;
color: #8794a3;
background: #f5f7fa;
font-size: 9px;
line-height: 1.3;
white-space: nowrap;
}
/* ---------------------------------------------------------
* Version List
* --------------------------------------------------------- */
.artifact-versions {
display: flex;
flex-direction: column;
gap: 5px;
padding: 7px 7px 7px 29px;
border-top: 1px solid #edf1f5;
background: #f8fafc;
}
/* ---------------------------------------------------------
* Version Item
* --------------------------------------------------------- */
.artifact-version {
display: flex;
min-height: 34px;
align-items: center;
justify-content: space-between;
gap: 7px;
padding: 6px 7px;
border: 1px solid #e4e9ee;
border-radius: 6px;
background: #fff;
cursor: grab;
user-select: none;
transition:
border-color .14s ease,
background-color .14s ease;
}
.artifact-version:hover {
border-color: #a8c8e9;
background: #fbfdff;
}
.artifact-version:active {
cursor: grabbing;
}
.artifact-version__main {
display: flex;
min-width: 0;
align-items: center;
gap: 5px;
}
/* ---------------------------------------------------------
* Drag Handle
* --------------------------------------------------------- */
.artifact-version__handle {
width: 13px;
height: 13px;
flex: 0 0 auto;
color: #c4cdd6;
}
.artifact-version:hover .artifact-version__handle {
color: #7e8d9d;
}
/* ---------------------------------------------------------
* Version
* --------------------------------------------------------- */
.artifact-version__name {
flex: 0 0 auto;
color: #526477;
font-family:
Inter,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
sans-serif;
font-size: 10px;
font-weight: 600;
}
/* ---------------------------------------------------------
* Commit Hash
* --------------------------------------------------------- */
.artifact-version__commit {
min-width: 0;
overflow: hidden;
color: #9aa5b1;
font-family:
ui-monospace,
SFMono-Regular,
Menlo,
Monaco,
Consolas,
monospace;
font-size: 8px;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ---------------------------------------------------------
* Open / Bind Icon
* --------------------------------------------------------- */
.artifact-version__action {
display: grid;
width: 18px;
height: 18px;
flex: 0 0 auto;
place-items: center;
border-radius: 4px;
color: #c1cad3;
}
.artifact-version:hover .artifact-version__action {
color: #287ac5;
background: #eef6ff;
}
.artifact-version__action svg {
width: 12px;
height: 12px;
}
/* ---------------------------------------------------------
* Artifact Tip
* --------------------------------------------------------- */
.artifact-tip {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
margin: 3px 10px 9px;
padding: 7px 8px;
border: 1px solid #edf1f5;
border-radius: 6px;
color: #8795a4;
background: #f8fafc;
font-size: 9px;
line-height: 1.45;
text-align: center;
}
.artifact-tip svg {
width: 12px;
height: 12px;
flex: 0 0 auto;
color: #9eabb8;
}
.artifact-tip__grip {
display: inline-flex;
align-items: center;
justify-content: center;
}
/* ---------------------------------------------------------
* Empty (artifact-list 内的)
* --------------------------------------------------------- */
.artifact-list .schedule-empty {
margin: 18px 10px;
color: #9aa6b3;
font-size: 10px;
line-height: 1.6;
text-align: center;
}
/* ---------------------------------------------------------
* Responsive
* --------------------------------------------------------- */
@media (max-width: 1280px) {
.artifact-group__header {
padding-right: 7px;
padding-left: 7px;
}
.artifact-group__name {
max-width: 125px;
}
.artifact-versions {
padding-left: 27px;
}
.artifact-version {
padding-right: 6px;
padding-left: 6px;
}
}
/* ---------------------------------------------------------
* Shared
* artifact-card__icon* 也被 NodeInspector 复用(节点 inspector
* 头部图标),保留原 .artifact-card__icon 形状/大小。
* --------------------------------------------------------- */
.artifact-card__icon {
display: grid;
width: 31px;
height: 31px;
flex: 0 0 auto;
place-items: center;
border-radius: 6px;
}
.artifact-card__icon--notebook {
color: #e05e53;
background: #fff0ee;
}
.artifact-card__icon--python {
color: #326fc1;
background: #eaf3ff;
}
.schedule-empty {
margin: 18px 10px;
color: #95a2b0;
font-size: 11px;
line-height: 1.6;
text-align: center;
}
.schedule-center {
display: flex;
overflow: hidden;
flex-direction: column;
}
.schedule-canvas-title {
display: flex;
min-height: 53px;
align-items: center;
justify-content: space-between;
padding: 0 12px;
border-bottom: 1px solid #e4eaf0;
}
.schedule-canvas-title > div {
display: flex;
min-width: 0;
flex-direction: column;
gap: 3px;
}
.schedule-canvas-title strong {
color: #27394d;
font-size: 14px;
}
.schedule-canvas-title span {
overflow: hidden;
color: #93a0ae;
font-size: 10px;
text-overflow: ellipsis;
white-space: nowrap;
}
.schedule-canvas-title button {
min-height: 28px;
color: #b25a4f;
}
.schedule-canvas {
position: relative;
min-height: 0;
flex: 1;
overflow: auto;
background-color: #f9fbfd;
background-image:
linear-gradient(#e7edf3 1px, transparent 1px),
linear-gradient(90deg, #e7edf3 1px, transparent 1px),
linear-gradient(#f1f4f7 1px, transparent 1px),
linear-gradient(90deg, #f1f4f7 1px, transparent 1px);
background-position: -1px -1px;
background-size: 80px 80px, 80px 80px, 16px 16px, 16px 16px;
}
.schedule-canvas.is-linking {
cursor: crosshair;
}
.schedule-canvas__surface {
position: relative;
}
.schedule-edges {
position: absolute;
z-index: 1;
inset: 0;
width: 100%;
height: 100%;
overflow: visible;
}
.schedule-edge-line {
fill: none;
stroke: #4e92db;
stroke-width: 2.2;
}
.schedule-edge-hit {
fill: none;
stroke: transparent;
stroke-width: 14;
cursor: pointer;
pointer-events: stroke;
}
.schedule-edges g.is-selected .schedule-edge-line {
stroke: #df8142;
stroke-width: 3.4;
}
.schedule-node {
position: absolute;
z-index: 2;
display: flex;
flex-direction: column;
padding: 11px 12px 9px;
border: 1px solid #91b7de;
border-radius: 8px;
color: #34516f;
background: #fff;
box-shadow: 0 7px 18px rgb(36 75 117 / 11%);
cursor: grab;
touch-action: none;
user-select: none;
}
.schedule-context-menu {
position: fixed;
z-index: 60;
min-width: 168px;
padding: 5px;
border: 1px solid #d9e3ec;
border-radius: 8px;
background: #fff;
box-shadow: 0 14px 36px rgb(14 35 57 / 22%);
}
.schedule-context-menu button {
display: flex;
width: 100%;
align-items: center;
gap: 9px;
padding: 9px 10px;
border: 0;
border-radius: 5px;
color: #c23b3b;
background: transparent;
font: inherit;
font-size: 12px;
text-align: left;
cursor: pointer;
}
.schedule-context-menu button:hover {
background: #fff0f0;
}
.schedule-context-menu button.schedule-context-menu__action {
color: #173a5e;
}
.schedule-context-menu button.schedule-context-menu__action:hover {
background: #eef6ff;
}
.schedule-node:active {
cursor: grabbing;
}
.schedule-node.is-selected {
border-color: #1978d4;
box-shadow:
0 0 0 3px rgb(25 120 212 / 11%),
0 8px 22px rgb(36 75 117 / 13%);
}
.schedule-node__heading {
display: flex;
align-items: center;
gap: 7px;
}
.schedule-node__heading strong {
min-width: 0;
flex: 1;
overflow: hidden;
color: #243b53;
font-size: 12px;
text-overflow: ellipsis;
white-space: nowrap;
}
.schedule-node__heading > button {
display: grid;
width: 23px;
height: 23px;
place-items: center;
padding: 0;
border: 0;
border-radius: 4px;
color: #8b99a7;
background: transparent;
cursor: pointer;
}
.schedule-node__heading > button:hover {
color: #1978d4;
background: #edf5fd;
}
.schedule-node__type {
display: grid;
width: 25px;
height: 25px;
flex: 0 0 auto;
place-items: center;
border-radius: 5px;
}
.schedule-node__type--notebook {
color: #da5c52;
background: #fff0ef;
}
.schedule-node__type--python {
color: #316fbf;
background: #eaf3ff;
}
.schedule-node > p {
margin: 8px 0 6px;
overflow: hidden;
color: #7e8d9d;
font-size: 10px;
text-overflow: ellipsis;
white-space: nowrap;
}
.schedule-node footer {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 6px;
border-top: 1px solid #edf1f5;
}
.schedule-node footer span {
max-width: 145px;
overflow: hidden;
color: #8d9baa;
font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
font-size: 9px;
text-overflow: ellipsis;
white-space: nowrap;
}
.schedule-node footer b {
color: #1978d4;
font-size: 10px;
}
.schedule-node__port {
position: absolute;
z-index: 4;
top: calc(50% - 7px);
width: 14px;
height: 14px;
padding: 0;
border: 2px solid #4e92db;
border-radius: 50%;
background: #fff;
cursor: crosshair;
}
.schedule-node__port:hover,
.schedule-node__port.is-active {
border-color: #176ec5;
background: #4e92db;
box-shadow: 0 0 0 4px rgb(45 124 207 / 16%);
}
.schedule-node__port--in {
left: -8px;
}
.schedule-node__port--out {
right: -8px;
}
.schedule-canvas-empty {
position: sticky;
z-index: 0;
left: 50%;
top: 46%;
display: flex;
width: 350px;
margin: 190px auto 0;
flex-direction: column;
align-items: center;
color: #9aa8b6;
text-align: center;
}
.schedule-canvas-empty > svg {
margin-bottom: 12px;
color: #8cb4de;
}
.schedule-canvas-empty strong {
color: #567089;
font-size: 14px;
}
.schedule-canvas-empty p {
margin: 7px 0 13px;
font-size: 11px;
}
.schedule-canvas-empty button {
display: inline-flex;
min-height: 32px;
align-items: center;
gap: 4px;
padding: 0 12px;
border: 1px solid #2580da;
border-radius: 6px;
color: #fff;
background: #2580da;
cursor: pointer;
font-size: 11px;
}
.schedule-canvas-status {
display: flex;
min-height: 35px;
align-items: center;
gap: 14px;
padding: 0 12px;
border-top: 1px solid #e4eaf0;
color: #8b99a9;
background: #fff;
font-size: 10px;
}
.schedule-canvas-status span:first-child {
color: #b17a48;
}
.schedule-canvas-status span.is-valid {
color: #16875b;
}
.schedule-canvas-status button {
min-height: 24px;
margin-left: auto;
padding: 0 8px;
color: #bd504b;
font-size: 10px;
}
.schedule-right {
display: grid;
overflow: hidden;
grid-template-rows: repeat(2, minmax(0, 1fr));
}
.schedule-inspector-scroll {
min-height: 0;
overflow: auto;
}
.schedule-inspector {
display: flex;
min-height: 100%;
flex-direction: column;
}
.schedule-inspector > section {
display: flex;
flex-direction: column;
gap: 10px;
padding: 14px;
border-bottom: 1px solid #e7ecf1;
}
.schedule-inspector h3 {
margin: 0 0 2px;
color: #273b50;
font-size: 13px;
}
.schedule-inspector label {
display: flex;
flex-direction: column;
gap: 5px;
}
.schedule-inspector label > span {
color: #758497;
font-size: 10px;
font-weight: 600;
}
.schedule-inspector input:not([type="checkbox"]),
.schedule-inspector select,
.schedule-inspector textarea {
width: 100%;
border: 1px solid #dce4ec;
border-radius: 5px;
outline: 0;
color: #32475d;
background: #fff;
font-size: 11px;
}
.schedule-inspector input:not([type="checkbox"]),
.schedule-inspector select {
height: 33px;
padding: 0 8px;
}
.schedule-inspector textarea {
padding: 7px 8px;
line-height: 1.5;
resize: vertical;
}
.schedule-inspector input:focus,
.schedule-inspector select:focus,
.schedule-inspector textarea:focus {
border-color: #81b2e7;
box-shadow: 0 0 0 3px rgb(38 124 216 / 8%);
}
.schedule-switch-row {
flex-direction: row !important;
align-items: center;
justify-content: space-between;
padding: 8px 9px;
border-radius: 6px;
background: #f5f8fb;
}
.schedule-switch-row > span {
display: flex;
flex-direction: column;
gap: 2px;
}
.schedule-switch-row b {
color: #45596f;
font-size: 11px;
}
.schedule-switch-row small {
color: #94a1ae;
font-size: 9px;
font-weight: 400;
}
.schedule-switch-row input {
width: 34px;
height: 18px;
accent-color: #1978d4;
}
.inspector-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.inspector-secondary-button,
.inspector-primary-button,
.inspector-danger-button {
display: flex;
min-height: 34px;
align-items: center;
justify-content: center;
border-radius: 6px;
cursor: pointer;
font-size: 11px;
font-weight: 650;
}
.inspector-secondary-button {
border: 1px solid #bcd2e9;
color: #2871bb;
background: #f7fbff;
}
.inspector-primary-button {
margin: 14px;
border: 1px solid #1978d4;
color: #fff;
background: #1978d4;
}
.inspector-danger-button {
border: 1px solid #efc6c6;
color: #bd4f4f;
background: #fff7f7;
}
.inspector-primary-button:disabled,
.inspector-secondary-button:disabled,
.inspector-danger-button:disabled {
cursor: not-allowed;
opacity: .55;
}
.cron-preview-list {
margin: 0;
padding: 8px 8px 8px 28px;
border-radius: 5px;
color: #5d7186;
background: #f5f8fb;
font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
font-size: 9px;
line-height: 1.7;
}
.schedule-next-run {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 9px;
border-radius: 5px;
color: #8b99a8;
background: #f5f8fb;
font-size: 10px;
}
.schedule-next-run strong {
color: #425970;
font-size: 10px;
}
.schedule-inspector-empty {
display: flex;
min-height: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 30px;
color: #9aa8b6;
text-align: center;
}
.schedule-inspector-empty svg {
margin-bottom: 10px;
color: #93b4d6;
}
.schedule-inspector-empty strong {
color: #516a82;
font-size: 14px;
}
.schedule-inspector-empty p {
font-size: 11px;
line-height: 1.6;
}
.schedule-run-history {
display: flex;
min-height: 0;
flex-direction: column;
border-top: 1px solid #e0e7ee;
background: #fbfcfe;
}
.schedule-run-history > header {
display: flex;
min-height: 44px;
align-items: center;
justify-content: space-between;
padding: 0 12px;
border-bottom: 1px solid #e8edf2;
background: #fff;
}
.schedule-run-history > header > div {
display: flex;
align-items: center;
gap: 7px;
}
.schedule-run-history > header strong {
color: #2b4056;
font-size: 12px;
}
.schedule-run-history > header span {
display: inline-grid;
min-width: 18px;
height: 18px;
place-items: center;
border-radius: 9px;
color: #71849a;
background: #edf2f7;
font-size: 9px;
}
.schedule-run-history > header button {
display: grid;
width: 27px;
height: 27px;
place-items: center;
border: 1px solid #dce5ee;
border-radius: 5px;
color: #66809a;
background: #fff;
cursor: pointer;
}
.schedule-run-history > header button:disabled {
cursor: not-allowed;
opacity: .45;
}
.schedule-run-list {
display: flex;
min-height: 0;
flex: 1;
flex-direction: column;
gap: 7px;
padding: 9px;
overflow: auto;
}
.schedule-run-list > p {
margin: auto;
padding: 12px;
color: #929fac;
font-size: 10px;
line-height: 1.6;
text-align: center;
}
.schedule-run-card {
flex: 0 0 auto;
overflow: hidden;
border: 1px solid #e1e8ef;
border-radius: 6px;
background: #fff;
}
.schedule-run-card.is-expanded {
border-color: #b9d6f1;
box-shadow: 0 3px 10px rgb(38 117 185 / 8%);
}
.schedule-run-summary {
display: grid;
width: 100%;
align-items: center;
gap: 7px;
padding: 8px;
border: 0;
color: inherit;
background: #fff;
grid-template-columns: 8px minmax(0, 1fr) auto auto;
text-align: left;
}
.schedule-run-summary:hover {
background: #f7fbff;
}
.schedule-run-summary-copy {
display: flex;
min-width: 0;
flex-direction: column;
gap: 2px;
}
.schedule-run-summary-copy strong {
color: #425970;
font-size: 10px;
}
.schedule-run-summary-copy small {
color: #8b99a8;
font-size: 8px;
}
.schedule-run-summary-copy > span {
overflow: hidden;
color: #b65353;
font-size: 8px;
line-height: 1.4;
text-overflow: ellipsis;
white-space: nowrap;
}
.schedule-run-summary code {
color: #8b9bad;
font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
font-size: 8px;
}
.schedule-run-result-button {
min-height: 27px;
padding: 0 9px;
border: 1px solid #bcd4e9;
border-radius: 5px;
color: #2374ba;
background: #f5faff;
cursor: pointer;
font-size: 9px;
font-weight: 650;
white-space: nowrap;
}
.schedule-run-result-button:hover {
border-color: #7eafe0;
background: #eaf5ff;
}
.schedule-run-chevron {
display: grid;
margin-top: 1px;
place-items: center;
color: #8092a5;
transition: transform .16s ease;
}
.schedule-run-chevron.is-open {
transform: rotate(90deg);
}
.schedule-run-detail {
min-height: 0;
padding: 18px;
overflow: auto;
background: #f8fbfe;
}
.schedule-run-result-backdrop {
position: fixed;
z-index: 40;
inset: 0;
border: 0;
background: rgb(10 27 45 / 46%);
cursor: default;
}
.schedule-run-result-modal {
position: fixed;
z-index: 41;
top: 50%;
left: 50%;
display: grid;
width: min(780px, calc(100vw - 48px));
max-height: min(760px, calc(100vh - 64px));
overflow: hidden;
border: 1px solid #d8e2eb;
border-radius: 12px;
background: #fff;
box-shadow: 0 24px 80px rgb(8 27 48 / 30%);
grid-template-rows: auto minmax(0, 1fr);
transform: translate(-50%, -50%);
}
.schedule-run-result-modal__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
padding: 17px 20px;
border-bottom: 1px solid #e3eaf0;
background: #fff;
}
.schedule-run-result-modal__header > div {
display: grid;
min-width: 0;
align-items: center;
gap: 5px 10px;
grid-template-columns: auto auto;
}
.schedule-run-result-modal__header span {
color: #1f344a;
font-size: 17px;
font-weight: 700;
}
.schedule-run-result-modal__header strong {
justify-self: start;
padding: 3px 8px;
border-radius: 11px;
color: #17805a;
background: #e8f7f1;
font-size: 10px;
}
.schedule-run-result-modal__header code {
overflow: hidden;
color: #8291a1;
font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
font-size: 10px;
grid-column: 1 / -1;
text-overflow: ellipsis;
white-space: nowrap;
}
.schedule-run-result-modal .schedule-run-meta {
margin-bottom: 14px;
gap: 10px 18px;
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.schedule-run-result-modal .schedule-run-meta dt {
margin-bottom: 4px;
font-size: 10px;
}
.schedule-run-result-modal .schedule-run-meta dd {
font-size: 12px;
}
.schedule-run-result-modal .schedule-node-run-list {
gap: 10px;
}
.schedule-run-result-modal .schedule-node-run {
padding: 12px;
border-radius: 7px;
}
.schedule-run-result-modal .schedule-node-run > header strong {
font-size: 13px;
}
.schedule-run-result-modal .schedule-node-run > header > span:last-child,
.schedule-run-result-modal .schedule-node-run-meta,
.schedule-run-result-modal .schedule-node-run > p {
font-size: 10px;
}
.schedule-run-result-modal .schedule-node-run-actions button {
padding: 6px 10px;
font-size: 10px;
}
.schedule-run-result-modal .schedule-node-log > header {
padding: 8px 10px;
font-size: 10px;
}
.schedule-run-result-modal .schedule-node-log pre,
.schedule-run-result-modal .schedule-node-log > p {
max-height: 260px;
padding: 11px;
font-size: 11px;
}
.run-detail-message {
margin: 0;
padding: 8px 4px;
color: #8796a6;
font-size: 9px;
line-height: 1.5;
text-align: center;
}
.run-detail-message.is-error {
color: #bf5656;
}
.schedule-run-meta {
display: grid;
margin: 0 0 8px;
gap: 6px 10px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.schedule-run-meta > div {
min-width: 0;
}
.schedule-run-meta dt {
margin-bottom: 1px;
color: #95a2af;
font-size: 8px;
}
.schedule-run-meta dd {
margin: 0;
overflow: hidden;
color: #41566c;
font-size: 9px;
text-overflow: ellipsis;
white-space: nowrap;
}
.schedule-run-error {
margin-bottom: 8px;
padding: 7px;
border: 1px solid #f0cece;
border-radius: 5px;
color: #a94f4f;
background: #fff6f6;
}
.schedule-run-error code {
font-size: 8px;
font-weight: 700;
}
.schedule-run-error p {
margin: 3px 0 0;
font-size: 8px;
line-height: 1.45;
}
.schedule-node-run-list {
display: flex;
flex-direction: column;
gap: 7px;
}
.schedule-node-run {
padding: 7px;
border: 1px solid #dde7f0;
border-radius: 5px;
background: #fff;
}
.schedule-node-run > header {
display: grid;
align-items: start;
gap: 6px;
grid-template-columns: 8px minmax(0, 1fr) auto;
}
.schedule-node-run > header strong {
overflow: hidden;
color: #40566c;
font-size: 9px;
text-overflow: ellipsis;
white-space: nowrap;
}
.schedule-node-run > header > span:last-child {
color: #71869a;
font-size: 8px;
}
.schedule-node-run-meta {
display: flex;
flex-wrap: wrap;
gap: 3px 8px;
margin: 5px 0 0 14px;
color: #8a98a7;
font-size: 8px;
}
.schedule-node-run > p {
margin: 5px 0 0 14px;
color: #6c7e90;
font-size: 8px;
line-height: 1.45;
}
.schedule-node-run-actions {
display: flex;
gap: 6px;
margin: 7px 0 0 14px;
}
.schedule-node-run-actions button {
padding: 4px 7px;
border: 1px solid #cbddeb;
border-radius: 4px;
color: #2878bd;
background: #f5faff;
cursor: pointer;
font-size: 8px;
}
.schedule-node-run-actions button:disabled {
cursor: not-allowed;
opacity: .45;
}
.schedule-artifact-error {
color: #b65353 !important;
}
.schedule-node-log {
margin: 7px 0 0 14px;
overflow: hidden;
border: 1px solid #dce5ed;
border-radius: 4px;
background: #17212b;
}
.schedule-node-log > header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 5px 7px;
border-bottom: 1px solid #33414e;
color: #c8d2dc;
font-size: 8px;
}
.schedule-node-log > header small {
color: #8292a1;
}
.schedule-node-log pre,
.schedule-node-log > p {
max-height: 210px;
margin: 0;
padding: 7px;
overflow: auto;
color: #d9e2ea;
font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
font-size: 8px;
line-height: 1.55;
white-space: pre-wrap;
word-break: break-word;
}
.run-status-dot {
width: 7px;
height: 7px;
margin-top: 3px;
border-radius: 50%;
background: #9aa8b6;
}
.run-status-dot.is-queued {
background: #e6a33c;
}
.run-status-dot.is-running {
background: #2788dc;
box-shadow: 0 0 0 3px rgb(39 136 220 / 12%);
}
.run-status-dot.is-succeeded {
background: #25a46f;
}
.run-status-dot.is-failed,
.run-status-dot.is-cancelled,
.run-status-dot.is-timed_out {
background: #d75b5b;
}
.run-status-dot.is-skipped {
background: #a9b4bf;
}
.node-inspector-title {
flex-direction: row !important;
align-items: center;
}
.node-inspector-title > div {
display: flex;
min-width: 0;
flex-direction: column;
gap: 3px;
}
.node-inspector-title small {
color: #96a2af;
font-size: 9px;
}
.node-inspector-title strong {
overflow: hidden;
color: #30465d;
font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
font-size: 11px;
text-overflow: ellipsis;
white-space: nowrap;
}
.version-readonly {
display: flex;
flex-direction: column;
gap: 5px;
padding: 9px;
border: 1px solid #dae6f2;
border-radius: 6px;
background: #f6faff;
}
.version-readonly strong {
color: #35516e;
font-size: 11px;
}
.version-readonly span {
width: fit-content;
padding: 2px 6px;
border-radius: 8px;
color: #176ec5;
background: #e3f0fd;
font-size: 9px;
font-weight: 700;
}
.version-readonly small {
overflow: hidden;
color: #8190a0;
font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
font-size: 8px;
text-overflow: ellipsis;
white-space: nowrap;
}
.json-editor {
color: #37516a !important;
background: #f8fafc !important;
font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
font-size: 10px !important;
}
.node-inspector-actions {
display: grid;
grid-template-columns: 1fr 90px;
gap: 7px;
margin-top: auto;
padding: 14px;
}
.node-inspector-actions .inspector-primary-button {
margin: 0;
}
.schedule-busy {
position: absolute;
z-index: 20;
right: 22px;
bottom: 22px;
display: flex;
min-height: 38px;
align-items: center;
gap: 8px;
padding: 0 13px;
border: 1px solid #c9dcee;
border-radius: 7px;
color: #4e657d;
background: #fff;
box-shadow: 0 8px 25px rgb(28 56 86 / 15%);
font-size: 11px;
}
.schedule-busy span {
width: 15px;
height: 15px;
border: 2px solid #b9d4ef;
border-top-color: #1978d4;
border-radius: 50%;
}
@media (max-width: 1500px) {
.schedule-workbench {
grid-template-columns: 250px minmax(380px, 1fr) 292px;
}
.schedule-toolbar > div:first-child span,
.schedule-canvas-title span {
display: none;
}
}
@media (max-width: 1280px) {
.schedule-workbench {
grid-template-columns: 225px minmax(360px, 1fr) 270px;
}
.schedule-toolbar__actions button {
padding: 0 8px;
}
}