63 lines
5.8 KiB
CSS
63 lines
5.8 KiB
CSS
.agent-editor-tabs { padding: 12px 24px; background: #fffdf9; }
|
|
.agent-editor-tabs [role="tablist"] { max-width: 900px; margin-inline: auto; gap: 6px; padding: 5px; border: 1px solid #e7e3ee; border-radius: 17px; background: #f1eff6; }
|
|
.agent-editor-tabs [role="tab"] { min-height: 44px; padding: 10px 16px; border-radius: 12px; font-size: 15px; color: #62677b; }
|
|
.agent-editor-tabs [role="tab"][data-state="active"] { color: #b73d16; box-shadow: 0 2px 8px #2732460a; }
|
|
.agent-editor-scroll { padding: 28px 32px 40px; background: #fffdf9; color: #273246; }
|
|
.agent-config-stack { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
|
|
.agent-config-card, .agent-config-budget > section { min-width: 0; margin: 0; padding: 24px; border: 1px solid #dce5f3; border-radius: 24px; background: #f1f6ff; }
|
|
.agent-config-card[data-tone="lilac"] { border-color: #e5dcf5; background: #f6f2ff; }
|
|
.agent-config-card[data-tone="peach"] { border-color: #f0e2ce; background: #fff5e9; }
|
|
.agent-config-card[data-tone="mint"] { border-color: #dce9e1; background: #f0f7f3; }
|
|
.agent-config-card[data-tone="neutral"] { border-color: #e6e3de; background: #fff; }
|
|
.agent-config-budget > section { border-color: #e6e3de; background: #fff; }
|
|
.agent-config-heading { display: flex; min-width: 0; align-items: center; gap: 13px; margin-bottom: 20px; }
|
|
.agent-config-icon { display: grid; width: 44px; height: 44px; flex-shrink: 0; place-items: center; border: 2px solid #fff; border-radius: 15px; background: #e0eafb; color: #4a6e9c; }
|
|
.agent-config-icon svg { width: 23px; height: 23px; stroke-width: 1.8; }
|
|
[data-tone="lilac"] > .agent-config-heading .agent-config-icon, [data-tone="lilac"] > .agent-config-section-top .agent-config-icon { background: #eae2fa; color: #79629d; }
|
|
[data-tone="peach"] > .agent-config-heading .agent-config-icon, [data-tone="peach"] > .agent-config-section-top .agent-config-icon { background: #ffe6c8; color: #9e6336; }
|
|
[data-tone="mint"] > .agent-config-section-top .agent-config-icon { background: #deeee4; color: #4c7a60; }
|
|
[data-tone="neutral"] > .agent-config-section-top .agent-config-icon { background: #efedf4; color: #726a85; }
|
|
.agent-config-heading-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
|
|
.agent-config-heading h2 { font-size: 18px; font-weight: 650; line-height: 1.5; }
|
|
.agent-config-note { padding: 3px 9px; border-radius: 20px; background: #fff9; font-size: 12px; line-height: 1.5; color: #62677b; white-space: nowrap; }
|
|
.agent-config-description { margin-top: 5px; font-size: 14px; line-height: 1.8; color: #59657a; }
|
|
.agent-config-card input:not([type="checkbox"]), .agent-config-card textarea, .agent-config-card select, .agent-config-budget input {
|
|
width: 100%; min-width: 0; min-height: 48px; padding: 12px 15px; border: 1px solid #cdd5e3; border-radius: 13px; background: #fff; color: #273246; font-size: 15px; box-shadow: 0 2px 2px #27324603;
|
|
}
|
|
.agent-config-card input::placeholder, .agent-config-card textarea::placeholder { color: #6c7588; }
|
|
.agent-config-card :is(input, textarea, select):focus-visible { outline: 2px solid #9a7bb5; outline-offset: 3px; }
|
|
.agent-config-card select { cursor: pointer; }
|
|
.agent-config-card :is(input, textarea, select):disabled { cursor: not-allowed; }
|
|
.agent-config-card .agent-config-prompt-input { min-height: clamp(280px, 38vh, 420px); padding: 18px; line-height: 1.9; }
|
|
.agent-config-section-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
|
|
.agent-config-section-top .agent-config-heading { margin-bottom: 0; }
|
|
.agent-config-section-top > button { flex-shrink: 0; border-radius: 12px; }
|
|
.agent-resource-options { max-height: 280px; overflow: auto; border: 1px solid #dce2ec; border-radius: 14px; background: #fff; }
|
|
.agent-resource-option { display: flex; min-height: 48px; align-items: flex-start; gap: 12px; padding: 13px 15px; cursor: pointer; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; transition: background-color 160ms ease; }
|
|
.agent-resource-option + .agent-resource-option { border-top: 1px solid #edf0f5; }
|
|
.agent-resource-option:hover, .agent-resource-option:focus-within { background: #f5f3fa; }
|
|
.agent-resource-option:has(input:checked) { background: #f2eef9; }
|
|
.agent-resource-option input, .agent-resource-preload input { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; accent-color: #79629d; cursor: pointer; }
|
|
.agent-resource-empty { padding: 14px 16px; border-radius: 13px; background: #ffffff9c; color: #606c7e; font-size: 14px; line-height: 1.7; }
|
|
.agent-resource-preload { display: flex; min-height: 44px; align-items: center; gap: 9px; margin-top: 12px; cursor: pointer; font-size: 13px; }
|
|
.agent-config-resource-manager { margin-top: 18px; }
|
|
.agent-config-resource-manager > details { border-radius: 14px; background: #ffffffa8; }
|
|
.agent-config-stack > .agent-config-resource-manager { margin-top: 0; }
|
|
.agent-config-limit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 18px; margin-top: 20px; }
|
|
.agent-config-budget h2 { font-size: 18px; font-weight: 650; }
|
|
.agent-config-budget form > label { min-width: 0; flex: 1 1 240px; }
|
|
.agent-config-budget form > button { border-radius: 12px; }
|
|
@media (max-width: 640px) {
|
|
.agent-editor-tabs { padding: 10px 12px; }
|
|
.agent-editor-tabs [role="tab"] { gap: 6px; padding-inline: 8px; font-size: 14px; }
|
|
.agent-editor-scroll { padding: 18px 12px 28px; }
|
|
.agent-config-card, .agent-config-budget > section { padding: 18px; border-radius: 20px; }
|
|
.agent-config-stack { gap: 16px; }
|
|
.agent-config-heading { gap: 10px; }
|
|
.agent-config-heading h2 { font-size: 17px; }
|
|
.agent-config-heading-title { gap: 6px; }
|
|
.agent-config-icon { width: 38px; height: 38px; border-radius: 13px; }
|
|
.agent-config-section-top > button { margin-left: 48px; }
|
|
}
|
|
@media (prefers-reduced-motion: reduce) { .agent-resource-option { transition: none; } }
|