bostame/workdock-platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

snapshot: preserve integrations controls and status UX cleanup

Browse Source
This commit is contained in:
Md Bayazid Bostame
2026-03-26 00:06:43 +01:00
parent 197bd3c226
commit e0231a6cca
15 changed files with 1591 additions and 392 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
backend/workflows/static/workflows/css/admin_tools.css
View File

@@ -11,6 +11,16 @@ label { display: block; margin-bottom: 4px; font-size: 12px; color: #334155; fon
input, select, textarea { width: 100%; box-sizing: border-box; border: 1px solid #cbd5e1; border-radius: 8px; padding: 8px 9px; background: #fff; }
textarea { min-height: 120px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }
.actions { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
.toggle-row { margin-top: 10px; display: inline-flex; align-items: center; gap: 10px; padding: 8px 10px 8px 12px; border: 1px solid #d8e3f0; border-radius: 999px; background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(246,249,255,0.94)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 6px 14px rgba(16, 32, 57, 0.05); }
.toggle-copy { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-size: 12px; font-weight: 700; color: #30445f; }
.toggle-label, .toggle-value { white-space: nowrap; }
.switch-toggle { display: inline-flex; align-items: center; justify-content: center; border: 0; background: rgba(255,255,255,0.72); padding: 3px; border-radius: 999px; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,0.95); }
.switch-track { position: relative; width: 52px; height: 28px; border-radius: 999px; border: 1px solid rgba(16, 32, 57, 0.12); background: linear-gradient(180deg, #dfe6ef, #cfd7e2); transition: background 0.18s ease, border-color 0.18s ease; box-shadow: inset 0 1px 2px rgba(16, 32, 57, 0.08), inset 0 -1px 0 rgba(255,255,255,0.4); }
.switch-thumb { position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(180deg, #ffffff, #f1f5fb); box-shadow: 0 2px 6px rgba(16, 32, 57, 0.22), inset 0 1px 0 rgba(255,255,255,0.95); transition: transform 0.18s ease; }
.switch-toggle.on .switch-track { background: linear-gradient(180deg, #2caf57, #248b44); border-color: #1f7a3b; }
.switch-toggle.on .switch-thumb { transform: translateX(24px); }
.switch-toggle.off .switch-track { background: linear-gradient(180deg, #d55252, #b83939); border-color: #9d3030; }
.switch-toggle:focus-visible .switch-track, .switch-toggle:hover .switch-track { box-shadow: 0 0 0 3px rgba(0, 0, 120, 0.12); }
.hint { margin-top: 6px; color: #64748b; font-size: 12px; }
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.switch { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }

125
backend/workflows/static/workflows/css/home.css
View File

@@ -150,6 +150,12 @@
display: flex;
gap: 8px;
flex-wrap: wrap;
align-items: center;
}
.status-switch-form {
margin: 0;
display: inline-flex;
}
.status-pill {
@@ -160,6 +166,125 @@
padding: 8px 12px;
font-size: 12px;
font-weight: 700;
min-height: 38px;
display: inline-flex;
align-items: center;
}
.status-pill-neutral {
background:
linear-gradient(180deg, rgba(255,255,255,0.98), rgba(246,249,255,0.94));
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.9),
0 6px 14px rgba(16, 32, 57, 0.05);
}
.status-pill-switch {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 8px 8px 12px;
min-height: 38px;
background:
linear-gradient(180deg, rgba(255,255,255,0.98), rgba(246,249,255,0.94));
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.9),
0 6px 14px rgba(16, 32, 57, 0.05);
}
.status-switch-copy {
display: inline-flex;
flex-direction: row;
align-items: flex-start;
gap: 4px;
min-width: 0;
line-height: 1;
}
.status-switch-label {
font-size: 12px;
font-weight: 700;
letter-spacing: normal;
text-transform: none;
opacity: 1;
}
.status-switch-value {
font-size: 12px;
font-weight: 700;
letter-spacing: normal;
}
.status-switch-label,
.status-switch-value,
.status-pill-switch .status-switch-copy {
white-space: nowrap;
}
.switch-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
background: rgba(255,255,255,0.72);
padding: 3px;
border-radius: 999px;
cursor: pointer;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.95);
}
.switch-track {
position: relative;
width: 52px;
height: 28px;
border-radius: 999px;
border: 1px solid rgba(16, 32, 57, 0.12);
background: linear-gradient(180deg, #dfe6ef, #cfd7e2);
transition: background 0.18s ease, border-color 0.18s ease;
box-shadow:
inset 0 1px 2px rgba(16, 32, 57, 0.08),
inset 0 -1px 0 rgba(255,255,255,0.4);
}
.switch-thumb {
position: absolute;
top: 2px;
left: 2px;
width: 22px;
height: 22px;
border-radius: 50%;
background: linear-gradient(180deg, #ffffff, #f1f5fb);
box-shadow:
0 2px 6px rgba(16, 32, 57, 0.22),
inset 0 1px 0 rgba(255,255,255,0.95);
transition: transform 0.18s ease;
}
.switch-toggle.on .switch-track {
background: linear-gradient(180deg, #2caf57, #248b44);
border-color: #1f7a3b;
}
.switch-toggle.on .switch-thumb {
transform: translateX(24px);
}
.switch-toggle.off .switch-track {
background: linear-gradient(180deg, #d55252, #b83939);
border-color: #9d3030;
}
.switch-toggle:focus-visible .switch-track,
.switch-toggle:hover .switch-track {
box-shadow: 0 0 0 3px rgba(0, 0, 120, 0.12);
}
.status-pill-switch.ok .status-switch-value {
color: var(--ok-ink);
}
.status-pill-switch.warn .status-switch-value {
color: var(--warn-ink);
}
.status-pill.ok {