mirror of
https://github.com/infinition/Bjorn.git
synced 2026-03-19 18:20:24 +00:00
feat: enhance scheduler functionality and UI improvements
- Updated scheduler.js to improve tab switching and content display. - Refactored script fetching logic to handle new data structure. - Enhanced schedule creation and editing with updated payload structure. - Improved trigger testing and creation with consistent naming conventions. - Added new CSS styles for actions and plugins pages to enhance UI/UX. - Introduced responsive design adjustments for better mobile experience.
This commit is contained in:
infinition
@@ -1622,514 +1622,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
ACTIONS LAUNCHER (.actions-container)
|
||||
========================================================================== */
|
||||
.actions-container #actionsLauncher {
|
||||
min-height: 0;
|
||||
height: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--gap-3, 10px);
|
||||
}
|
||||
|
||||
.actions-container .panel {
|
||||
background: var(--grad-card, var(--c-panel));
|
||||
border: 1px solid var(--c-border);
|
||||
border-radius: var(--radius, 14px);
|
||||
box-shadow: var(--elev, 0 10px 30px var(--acid-1a, #00ff9a1a), inset 0 0 0 1px var(--acid-22, #00ff9a22));
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.actions-container .sideheader {
|
||||
padding: 10px 10px 6px;
|
||||
border-bottom: 1px dashed var(--c-border);
|
||||
}
|
||||
|
||||
.actions-container .al-side-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.actions-container .al-side-meta .sidetitle {
|
||||
color: var(--acid);
|
||||
font-weight: 800;
|
||||
letter-spacing: .05em;
|
||||
}
|
||||
|
||||
.actions-container .tabs-container {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.actions-container .tab-btn {
|
||||
all: unset;
|
||||
cursor: pointer;
|
||||
padding: 6px 10px;
|
||||
border-radius: 10px;
|
||||
background: var(--c-pill-bg);
|
||||
border: 1px solid var(--c-border);
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.actions-container .tab-btn.active {
|
||||
background: var(--grad-chip-selected);
|
||||
outline: 2px solid color-mix(in oklab, var(--acid) 55%, transparent);
|
||||
outline-offset: 0;
|
||||
}
|
||||
|
||||
.actions-container .al-search {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.actions-container .al-input {
|
||||
flex: 1;
|
||||
background: var(--c-panel);
|
||||
border: 1px solid var(--c-border-strong);
|
||||
color: var(--ink);
|
||||
padding: 10px 12px;
|
||||
border-radius: var(--control-r, 10px);
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.actions-container .al-input:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px color-mix(in oklab, var(--acid) 55%, transparent) inset;
|
||||
}
|
||||
|
||||
.actions-container .sidecontent {
|
||||
padding: 8px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.actions-container .al-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
padding-right: 4px;
|
||||
}
|
||||
|
||||
.actions-container .al-row {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: 84px 1fr;
|
||||
gap: 12px;
|
||||
padding: 10px;
|
||||
background: var(--c-panel-2);
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
|
||||
}
|
||||
|
||||
.actions-container .al-row:hover {
|
||||
transform: translateY(-1px);
|
||||
border-color: color-mix(in oklab, var(--accent) 25%, var(--c-border));
|
||||
box-shadow: 0 10px 26px var(--glow-weak);
|
||||
}
|
||||
|
||||
.actions-container .al-row.selected {
|
||||
outline: 2px solid color-mix(in oklab, var(--acid) 35%, transparent);
|
||||
box-shadow: 0 12px 30px color-mix(in oklab, var(--acid) 25%, transparent);
|
||||
}
|
||||
|
||||
.actions-container .al-row .ic {
|
||||
width: 84px;
|
||||
height: 84px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 12px;
|
||||
background: var(--c-panel);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.actions-container .ic-img {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.actions-container .al-row>div:nth-child(2) {
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.actions-container .name {
|
||||
font-weight: 800;
|
||||
color: var(--acid-2);
|
||||
font-size: 14px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.actions-container .desc {
|
||||
color: var(--muted);
|
||||
font-size: 13px;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.actions-container .al-row .chip {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
left: calc(84px/2 + 10px);
|
||||
transform: translateX(-50%);
|
||||
padding: 2px 8px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--c-border);
|
||||
background: var(--c-chip-bg);
|
||||
color: var(--muted);
|
||||
font-size: 11px;
|
||||
line-height: 1;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.actions-container .chip.ok {
|
||||
color: var(--ok);
|
||||
border-color: color-mix(in oklab, var(--ok) 60%, transparent);
|
||||
}
|
||||
|
||||
.actions-container .chip.err {
|
||||
color: var(--danger);
|
||||
border-color: color-mix(in oklab, var(--danger) 60%, transparent);
|
||||
}
|
||||
|
||||
.actions-container .chip.run {
|
||||
color: var(--acid);
|
||||
border-color: color-mix(in oklab, var(--acid) 60%, transparent);
|
||||
}
|
||||
|
||||
.actions-container .center {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.actions-container .toolbar2 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid var(--c-border);
|
||||
background: var(--c-panel);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.actions-container .seg {
|
||||
display: flex;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--c-border);
|
||||
}
|
||||
|
||||
.actions-container .seg button {
|
||||
background: var(--c-panel);
|
||||
color: var(--muted);
|
||||
padding: 8px 10px;
|
||||
border: none;
|
||||
border-right: 1px solid var(--c-border);
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.actions-container .seg button:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.actions-container .seg button.active {
|
||||
color: var(--ink-invert);
|
||||
background: linear-gradient(90deg, var(--acid-2), color-mix(in oklab, var(--acid-2) 60%, white));
|
||||
}
|
||||
|
||||
.actions-container .al-btn {
|
||||
background: var(--c-btn);
|
||||
color: var(--ink);
|
||||
border: 1px solid var(--c-border-strong);
|
||||
border-radius: var(--control-r, 10px);
|
||||
padding: 8px 12px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
cursor: pointer;
|
||||
transition: .18s;
|
||||
box-shadow: var(--elev);
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.actions-container .al-btn:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: var(--shadow-hover);
|
||||
}
|
||||
|
||||
.actions-container .al-btn.warn {
|
||||
background: linear-gradient(180deg, color-mix(in oklab, var(--warning) 28%, var(--c-btn)), var(--c-btn));
|
||||
color: var(--warning);
|
||||
border-color: color-mix(in oklab, var(--warning) 55%, var(--c-border));
|
||||
}
|
||||
|
||||
.actions-container .multiConsole {
|
||||
flex: 1;
|
||||
padding: 10px;
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
height: 100%;
|
||||
grid-auto-flow: row;
|
||||
grid-auto-rows: 1fr;
|
||||
grid-template-rows: repeat(var(--rows, 1), 1fr);
|
||||
}
|
||||
|
||||
.actions-container .split-1 {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.actions-container .split-2 {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.actions-container .split-3 {
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
|
||||
.actions-container .split-4 {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.actions-container .pane {
|
||||
position: relative;
|
||||
border: 1px solid var(--c-border);
|
||||
border-radius: 12px;
|
||||
background: var(--grad-console);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: inset 0 0 0 1px var(--c-border-muted);
|
||||
}
|
||||
|
||||
.actions-container .paneHeader {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 8px 10px;
|
||||
border-bottom: 1px solid var(--c-border);
|
||||
background: linear-gradient(180deg, color-mix(in oklab, var(--acid-2) 8%, transparent), transparent);
|
||||
}
|
||||
|
||||
.actions-container .paneTitle {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto 1fr;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.actions-container .paneTitle .dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.actions-container .paneIcon {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
border-radius: 6px;
|
||||
object-fit: cover;
|
||||
opacity: .95;
|
||||
}
|
||||
|
||||
.actions-container .titleBlock {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.actions-container .titleLine strong {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.actions-container .metaLine {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.actions-container .metaLine .chip {
|
||||
border: 1px solid var(--c-border-strong);
|
||||
background: var(--c-chip-bg);
|
||||
color: var(--muted);
|
||||
padding: 3px 8px;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.actions-container .paneBtns {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.actions-container .paneBtns .al-btn {
|
||||
padding: 6px 8px;
|
||||
font-size: .9rem;
|
||||
}
|
||||
|
||||
.actions-container .paneLog {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
padding: 6px 8px;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
|
||||
font-size: .92rem;
|
||||
}
|
||||
|
||||
.actions-container .logline {
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
padding: 4px 6px;
|
||||
line-height: 1.32;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.actions-container .logline.info {
|
||||
color: #bfefff;
|
||||
}
|
||||
|
||||
.actions-container .logline.ok {
|
||||
color: #9ff7c5;
|
||||
}
|
||||
|
||||
.actions-container .logline.warn {
|
||||
color: #ffd27a;
|
||||
}
|
||||
|
||||
.actions-container .logline.err {
|
||||
color: #ff99b3;
|
||||
}
|
||||
|
||||
.actions-container .logline.dim {
|
||||
color: #6a8596;
|
||||
}
|
||||
|
||||
.actions-container .paneHighlight {
|
||||
box-shadow: 0 0 0 2px var(--acid-2), 0 0 24px color-mix(in oklab, var(--acid-2) 55%, transparent) inset, 0 0 40px color-mix(in oklab, var(--acid-2) 35%, transparent);
|
||||
animation: al-hi 900ms ease-out 1;
|
||||
}
|
||||
|
||||
@keyframes al-hi {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale(1.01);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.actions-container .section {
|
||||
padding: 12px;
|
||||
border-bottom: 1px dashed var(--c-border);
|
||||
}
|
||||
|
||||
.actions-container .h {
|
||||
font-weight: 800;
|
||||
letter-spacing: .5px;
|
||||
color: var(--acid-2);
|
||||
}
|
||||
|
||||
.actions-container .sub {
|
||||
color: var(--muted);
|
||||
font-size: .9rem;
|
||||
}
|
||||
|
||||
.actions-container .builder {
|
||||
padding: 12px;
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.actions-container .field {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.actions-container .label {
|
||||
font-size: .85rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.actions-container .ctl,
|
||||
.actions-container .select,
|
||||
.actions-container .range {
|
||||
background: var(--c-panel);
|
||||
color: var(--ink);
|
||||
border: 1px solid var(--c-border-strong);
|
||||
border-radius: var(--control-r, 10px);
|
||||
padding: 10px 12px;
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.actions-container .ctl:focus,
|
||||
.actions-container .select:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px color-mix(in oklab, var(--acid) 55%, transparent) inset;
|
||||
}
|
||||
|
||||
.actions-container .chips {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.actions-container .chip2 {
|
||||
padding: 6px 10px;
|
||||
border-radius: 999px;
|
||||
background: var(--c-chip-bg);
|
||||
border: 1px solid var(--c-border-hi);
|
||||
cursor: pointer;
|
||||
transition: .18s;
|
||||
}
|
||||
|
||||
.actions-container .chip2:hover {
|
||||
box-shadow: 0 0 0 1px var(--c-border-hi) inset, 0 8px 22px var(--glow-weak);
|
||||
}
|
||||
|
||||
@media (max-width: 860px) {
|
||||
.actions-container #actionsLauncher {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.actions-container .toolbar2 {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.actions-container .paneHeader {
|
||||
grid-template-columns: 1fr;
|
||||
row-gap: 8px;
|
||||
}
|
||||
|
||||
.actions-container .paneBtns {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.actions-container .paneBtns .al-btn {
|
||||
padding: 5px 6px;
|
||||
font-size: .85rem;
|
||||
}
|
||||
}
|
||||
/* Actions launcher styles moved to actions.css */
|
||||
|
||||
/* ==========================================================================
|
||||
ACTIONS STUDIO (.studio-container)
|
||||
|
||||
Reference in New Issue
Block a user