dashboard-nanobot/frontend/src/modules/onboarding/BotWizardModule.css

175 lines
3.1 KiB
CSS

.bot-wizard-shell {
background:
linear-gradient(160deg, color-mix(in oklab, var(--panel) 88%, var(--brand-soft) 12%) 0%, var(--panel) 100%);
min-height: 100%;
display: flex;
flex-direction: column;
}
.bot-wizard-drawer-body {
padding: 20px 24px 18px;
overflow: hidden;
}
.bot-wizard-content {
flex: 1 1 auto;
min-height: 0;
overflow: auto;
padding-right: 4px;
}
.bot-wizard-head {
padding: 2px 2px 4px;
}
.bot-wizard-head-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.bot-wizard-steps {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px;
margin-bottom: 12px;
}
.bot-wizard-step {
border: 1px solid var(--line);
border-radius: 10px;
padding: 8px;
font-size: 12px;
color: var(--muted);
background: color-mix(in oklab, var(--panel-soft) 80%, black 20%);
}
.bot-wizard-step.is-active {
color: var(--text);
border-color: color-mix(in oklab, var(--brand) 65%, var(--line) 35%);
background: color-mix(in oklab, var(--brand-soft) 56%, var(--panel-soft) 44%);
box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brand) 45%, transparent);
}
.bot-wizard-image-list {
display: grid;
gap: 10px;
}
.bot-wizard-image-list .card {
margin: 0;
}
.bot-wizard-base-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
.bot-wizard-step-card {
gap: 8px;
border-radius: 14px;
padding: 12px;
background: color-mix(in oklab, var(--panel-soft) 86%, var(--panel) 14%);
}
.bot-wizard-note-card {
border-style: dashed;
}
.bot-wizard-channel-summary {
display: grid;
gap: 8px;
}
.bot-wizard-summary-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.bot-wizard-agent-layout {
display: grid;
grid-template-columns: 170px 1fr;
gap: 10px;
min-height: 420px;
}
.bot-wizard-agent-tabs {
display: flex;
flex-direction: column;
gap: 8px;
min-width: 150px;
}
.bot-wizard-agent-tab {
border: 1px solid var(--line);
background: var(--panel-soft);
color: var(--text);
border-radius: 8px;
padding: 6px 10px;
cursor: pointer;
font-size: 12px;
}
.bot-wizard-agent-tab.is-active {
border-color: var(--brand);
background: color-mix(in oklab, var(--brand-soft) 54%, var(--panel-soft) 46%);
}
.bot-wizard-channel-list {
display: grid;
gap: 8px;
}
.bot-wizard-channel-card {
min-width: 0;
display: grid;
gap: 6px;
}
.bot-wizard-channel-compact {
padding: 10px;
border-radius: 10px;
}
.bot-wizard-switches {
display: flex;
flex-wrap: wrap;
gap: 14px;
align-items: center;
}
.bot-wizard-icon-btn {
display: inline-flex;
align-items: center;
gap: 6px;
}
.bot-wizard-footer {
position: sticky;
bottom: 0;
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid color-mix(in oklab, var(--line) 82%, transparent);
background: inherit;
}
@media (max-width: 1160px) {
.bot-wizard-steps,
.bot-wizard-base-grid,
.bot-wizard-summary-grid,
.bot-wizard-agent-layout {
grid-template-columns: 1fr;
}
.bot-wizard-shell {
min-height: 640px;
}
.bot-wizard-drawer-body {
padding-inline: 18px;
}
}