| 1 | .provider-connections { display: grid; grid-template-columns: minmax(180px, 250px) minmax(0, 1fr); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; } |
| 2 | .provider-connections[hidden], .provider-connections [hidden] { display: none !important; } |
| 3 | .provider-connections__nav { padding: 14px; border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 14px; min-width: 0; } |
| 4 | .provider-connections__nav > input { width: 100%; min-width: 0; flex: none; box-sizing: border-box; } |
| 5 | .provider-connections__list { max-height: 620px; overflow-y: auto; } |
| 6 | .provider-connections__brand { display: flex; align-items: center; gap: 8px; padding: 14px 6px 8px; } |
| 7 | .provider-connections__brand strong { flex: 1; overflow-wrap: anywhere; } |
| 8 | .provider-connections__item { display: flex; align-items: baseline; gap: 9px; width: 100%; border: 1px solid transparent; border-radius: 8px; padding: 10px 12px; color: inherit; background: transparent; text-align: left; font: inherit; cursor: pointer; } |
| 9 | .provider-connections__item strong { font-weight: 500; overflow-wrap: anywhere; } |
| 10 | .provider-connections__item small { display: block; color: var(--fg-faint); margin-top: 4px; } |
| 11 | .provider-connections__item:hover { background: var(--bg-soft); } |
| 12 | .provider-connections__item[aria-current="true"] { background: var(--bg-soft); border-color: var(--accent); } |
| 13 | .provider-connections__item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } |
| 14 | .provider-connections__status { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--fg-faint); } |
| 15 | .provider-connections__status--ready { background: var(--success, #23965a); } |
| 16 | .provider-connections__detail { min-width: 0; padding: 20px; } |
| 17 | .provider-connections .provider-access-card--detail { border: 0; box-shadow: none; padding: 0; display: flex; flex-direction: column; } |
| 18 | .provider-access-card--detail > .provider-editor { order: 1; } |
| 19 | .provider-access-card--detail > :not(.provider-access-card__head):not(.provider-access-card__desc):not(.provider-editor) { order: 2; } |
| 20 | .provider-connections .provider-connections__back { display: none; } |
| 21 | @media (max-width: 760px) { |
| 22 | .provider-connections { grid-template-columns: minmax(0, 1fr); } |
| 23 | .provider-connections__nav { border-right: 0; } |
| 24 | .provider-connections__detail { display: none; padding: 12px; } |
| 25 | .provider-connections--detail > .provider-connections__nav { display: none; } |
| 26 | .provider-connections--detail > .provider-connections__detail { display: block; } |
| 27 | .provider-connections .provider-connections__back { display: inline-flex; margin-bottom: 16px; } |
| 28 | } |
| 29 | |
| 30 | .provider-connections .provider-editor { border: 0; padding-inline: 0; box-shadow: none; } |
| 31 | .connection-title { display: inline-flex; align-items: center; gap: 8px; border: 0; padding: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; overflow-wrap: anywhere; } |
| 32 | .connection-title:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } |
| 33 | .connection-title svg { flex-shrink: 0; color: var(--fg-faint); } |
| 34 | .connection-title-editor { min-width: 0; max-width: 100%; } |
| 35 | .connection-title-editor__row { display: flex; align-items: center; gap: 6px; } |
| 36 | .connection-title-editor__row .mem-input { width: 220px; min-width: 0; } |
| 37 | .connection-title-editor small { display: block; font-size: 12px; font-weight: normal; } |
| 38 | .provider-model-draft--inline .provider-model-draft__list { display: flex; flex-direction: column; } |
| 39 | .provider-model-draft--inline .provider-model-draft__option { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; } |
| 40 | .provider-model-draft--inline .provider-model-draft__model { flex: 1; min-width: 150px; } |
| 41 | .provider-key-compact__head { display: flex; align-items: center; gap: 8px; } |
| 42 | .provider-key-compact__head > strong, .provider-model-toolbar > strong { margin-right: auto; } |
| 43 | .provider-key-compact__more { position: relative; } |
| 44 | |
| 45 | .provider-key-compact__menu { position: absolute; right: 0; top: 100%; width: min(300px, 70vw); padding: 12px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 8px; z-index: var(--z-popover); } |
| 46 | |
| 47 | .btn.provider-icon-action { min-width: 36px; min-height: 36px; padding: 6px; border: 0; background: transparent; list-style: none; } |
| 48 | .provider-icon-action::-webkit-details-marker { display: none; } |
| 49 | |
| 50 | /* Compact editor: one aligned form and one flat model list. */ |
| 51 | |
| 52 | .provider-editor.provider-editor--compact { gap: 20px; background: var(--bg-elev); border: 0; box-shadow: none; padding: 0; font-size: 14px; } |
| 53 | .provider-connection-fields { display: flex; flex-direction: column; gap: 16px; padding: 12px 0 24px; border-bottom: 1px solid var(--border); } |
| 54 | .provider-connection-fields h3 { margin: 0 0 4px; font-size: var(--font-control); } |
| 55 | .provider-connection-field { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 8px; } |
| 56 | .provider-connection-field > .set-label { margin: 0; } |
| 57 | .provider-connection-field > .mem-input, .provider-connection-field > .mem-select { width: 100%; min-height: 40px; margin: 0; background: var(--bg-elev); border-radius: 8px; } |
| 58 | .provider-field-help { grid-column: 1; color: var(--fg-faint); font-size: var(--font-control-small); } |
| 59 | .provider-key-compact__head > strong { flex: 0 0 130px; margin-right: 8px; font-weight: 500; } |
| 60 | .provider-key-placeholder { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; color: var(--fg-faint); } |
| 61 | .provider-key-compact .set-key { margin-top: 12px; } |
| 62 | .provider-key-compact__menu { display: flex; flex-direction: column; gap: 8px; box-sizing: border-box; } |
| 63 | .provider-editor--compact .provider-model-draft--inline { border: 0; padding: 0; gap: 16px; } |
| 64 | .provider-model-draft--inline .provider-model-toolbar { justify-content: flex-start; gap: 12px; } |
| 65 | .provider-model-draft--inline .provider-model-toolbar > strong { margin: 0; } |
| 66 | .provider-model-draft--inline .provider-model-draft__tools { margin-left: auto; } |
| 67 | .provider-model-draft--inline .provider-model-draft__list { gap: 0; padding: 0; max-height: 360px; border: 1px solid var(--border); border-radius: 8px; } |
| 68 | .provider-model-draft--inline .provider-model-draft__option { flex-wrap: nowrap; min-height: 56px; box-sizing: border-box; padding: 8px 12px; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: transparent; font-family: var(--font-sans); font-size: var(--font-control); } |
| 69 | .provider-model-draft--inline .provider-model-draft__option:last-child { border-bottom: 0; } |
| 70 | .provider-model-draft--inline .provider-model-draft__model { min-width: 0; gap: 12px; } |
| 71 | .provider-model-draft--inline .provider-model-draft__model span { min-width: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; } |
| 72 | .provider-model-draft--inline input[type="checkbox"] { accent-color: var(--accent); width: 16px; height: 16px; } |
| 73 | .provider-context-badge { flex-shrink: 0; padding: 4px 8px; border: 1px solid var(--border); border-radius: 6px; color: var(--fg-faint); font-size: var(--font-control-small); } |
| 74 | .provider-editor--compact .provider-capabilities { padding: 0; } |
| 75 | .provider-editor--compact .provider-capabilities > .provider-card-block__label { display: none; } |
| 76 | .provider-editor--compact .provider-capability-row { margin: 0; border: 0; padding: 16px 0; } |
| 77 | .provider-editor--compact .provider-editor-advanced { border: 0; border-top: 1px solid var(--border); border-radius: 0; background: transparent; } |
| 78 | .provider-editor-footer { flex: none; padding: 16px 0; background: var(--bg-elev); border-top: 1px solid var(--border); } |
| 79 | .provider-editor-footer > span { margin-right: auto; color: var(--fg-faint); font-size: var(--font-control-small); } |
| 80 | @media (max-width: 900px) { |
| 81 | .provider-connection-field { grid-template-columns: minmax(0, 1fr); } |
| 82 | .provider-field-help { grid-column: 1; } |
| 83 | .provider-key-compact__head { flex-wrap: wrap; } |
| 84 | .provider-key-compact__head > strong { flex-basis: 100%; } |
| 85 | .provider-model-draft--inline .provider-model-toolbar { flex-wrap: wrap; } |
| 86 | |
| 87 | } |
| 88 | |
| 89 | .provider-editor--compact .set-label, .provider-editor--compact .mem-input, .provider-editor--compact .mem-select { font-size: 14px; } |
| 90 | .provider-editor--compact .set-label { font-weight: 500; } |
| 91 | .provider-editor--compact h3, .provider-editor--compact .provider-model-toolbar > strong { font-size: 16px; } |
| 92 | .provider-editor--compact .provider-model-draft__option { font-size: 14px; } |
| 93 | .provider-editor--compact .provider-editor-advanced__hint { display: none; } |
| 94 | |
| 95 | .provider-connection-field > .mem-select { max-width: none; } |
| 96 | .provider-editor-footer .btn { min-height: 36px; padding-inline: 18px; font-size: 14px; } |
| 97 | |
| 98 | .provider-model-dialog { width: min(900px, calc(100vw - 32px)); max-height: calc(100vh - 40px); box-sizing: border-box; padding: 28px 32px 24px; border: 1px solid var(--border); border-radius: 16px; background: var(--bg-elev); color: var(--fg); font: 14px var(--font-sans); } |
| 99 | .provider-model-dialog::backdrop { background: #0008; } |
| 100 | .provider-model-dialog header, .provider-model-dialog footer { display: flex; align-items: center; gap: 12px; } |
| 101 | .provider-model-dialog h2 { flex: 1; margin: 0; font-size: 21px; } |
| 102 | .provider-model-dialog h3 { margin: 0 0 16px; font-size: 16px; } |
| 103 | .provider-model-dialog__id { display: grid; gap: 12px; margin: 24px 0; } |
| 104 | .provider-model-dialog__id > span { display: flex; align-items: center; gap: 10px; overflow-wrap: anywhere; } |
| 105 | .provider-model-dialog__columns { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(280px, .95fr); gap: 32px; padding: 22px 0 24px; border-block: 1px solid var(--border); } |
| 106 | .provider-model-dialog__columns aside { border-left: 0; border-radius: 12px; background: color-mix(in srgb, var(--bg) 62%, transparent); padding: 18px 20px; } |
| 107 | .provider-model-dialog section label { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; } |
| 108 | .provider-model-dialog .mem-input, .provider-model-dialog .mem-select { width: 100%; box-sizing: border-box; font-size: 14px; min-height: 40px; } |
| 109 | .provider-model-dialog section label .mem-input { grid-column: 1 / -1; } |
| 110 | .provider-model-dialog p, .provider-model-dialog small { color: var(--fg-faint); line-height: 1.5; } |
| 111 | .provider-model-dialog p { margin: 7px 0 16px; font-size: 12px; } |
| 112 | .provider-model-dialog details { margin-top: 24px; } |
| 113 | .provider-model-dialog summary { cursor: pointer; margin-bottom: 12px; } |
| 114 | .provider-model-dialog dl { margin: 0; } |
| 115 | .provider-model-dialog dl > div { display: grid; grid-template-columns: 44px 1fr; gap: 12px; border-bottom: 1px solid var(--border); padding: 18px 0; } |
| 116 | .provider-model-dialog dd { margin: 0; overflow-wrap: anywhere; } |
| 117 | .provider-model-dialog footer { padding-top: 24px; } |
| 118 | .provider-model-dialog footer small { margin-right: auto; } |
| 119 | .provider-model-dialog [role="alert"] { color: var(--danger); } |
| 120 | @media (max-width: 600px) { |
| 121 | .provider-model-dialog { padding: 18px; } |
| 122 | .provider-model-dialog__columns { grid-template-columns: 1fr; gap: 20px; } |
| 123 | .provider-model-dialog__columns aside { padding-left: 0; border-left: 0; } |
| 124 | .provider-model-dialog footer { flex-wrap: wrap; } |
| 125 | } |
| 126 | .provider-model-dialog__capability-title { margin: 18px 0 10px; color: var(--fg-faint); } |
| 127 | .provider-model-dialog__chips { display: flex; flex-wrap: wrap; gap: 8px; } |
| 128 | .provider-model-dialog__chips label { display: inline-flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; } |
| 129 | .provider-model-dialog__chips input { accent-color: var(--accent); margin: 0; } |
| 130 | .provider-model-dialog__chips label:has(input:disabled:not(:checked)) { color: var(--fg-faint); } |
| 131 | .provider-model-dialog__effort-card { margin-top: 18px; padding: 16px; border: 1px solid var(--border); border-radius: 12px; background: color-mix(in srgb, var(--bg) 48%, transparent); } |
| 132 | .provider-model-dialog__effort-card > label { margin-bottom: 9px; } |
| 133 | .provider-model-dialog__effort-card .provider-model-dialog__chips { margin-bottom: 14px; } |
| 134 | .provider-model-dialog__effort-card .provider-model-dialog__chips label { padding: 7px 9px; background: var(--bg-elev); } |
| 135 | .provider-model-dialog__effort-card > p { margin-bottom: 0; } |
| 136 | |
| 137 | .provider-model-dialog .mem-input, .provider-model-dialog .mem-select { background: var(--bg-elev); } |
| 138 | |
| 139 | /* One viewport owner; navigation and editor body scroll independently. */ |
| 140 | .settings-center__content:has(.provider-connections:not([hidden])):not(:has(.model-access-page[hidden])) { display: flex; flex-direction: column; overflow: hidden; } |
| 141 | .settings-page:has(.provider-connections:not([hidden])):not(:has(.model-access-page[hidden])), |
| 142 | .settings-section:has(.provider-connections:not([hidden])), |
| 143 | .settings-section__body:has(.provider-connections:not([hidden])), |
| 144 | .provider-access-grid:has(.provider-connections:not([hidden])) { display: flex; flex-direction: column; flex: 1; min-height: 0; } |
| 145 | .settings-page:has(.provider-connections:not([hidden])):not(:has(.model-access-page[hidden])) > .settings-page__header, |
| 146 | .settings-page:has(.provider-connections:not([hidden])):not(:has(.model-access-page[hidden])) > .settings-subtabs, |
| 147 | .settings-section:has(.provider-connections:not([hidden])) > .settings-section__head { flex: none; } |
| 148 | .provider-connections { flex: 1; min-height: 0; } |
| 149 | .provider-connections__nav { min-height: 0; } |
| 150 | .provider-connections__nav > .btn { flex: none; } |
| 151 | .provider-connections__list { flex: 1; min-height: 0; max-height: none; overscroll-behavior-y: contain; } |
| 152 | .provider-connections__detail { display: flex; flex-direction: column; min-height: 0; } |
| 153 | .provider-connections__detail > div:not([hidden]) { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; } |
| 154 | .provider-connections__detail > div:has(> .provider-access-card > .provider-editor) { overflow: hidden; } |
| 155 | .provider-connections .provider-access-card--detail { flex: 1; min-height: 0; gap: 12px; } |
| 156 | .provider-access-card--detail > .provider-access-card__head, |
| 157 | .provider-access-card--detail > .provider-access-card__desc { flex: none; } |
| 158 | .provider-connections .provider-editor { flex: 1; min-height: 0; gap: 0; } |
| 159 | .provider-editor__body { display: flex; flex-direction: column; gap: 16px; min-width: 0; } |
| 160 | .provider-connections .provider-editor__body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-gutter: stable; padding-right: 8px; } |
| 161 | .provider-editor--compact .provider-model-draft__list { max-height: none; overflow: visible; } |
| 162 | .provider-editor--compact .provider-connection-fields { gap: 20px; padding-block: 8px 20px; } |
| 163 | .provider-editor-footer { padding-block: 12px; } |
| 164 | @media (max-width: 760px) { |
| 165 | .provider-connections__detail { display: none; } |
| 166 | .provider-connections--detail > .provider-connections__detail { display: flex; } |
| 167 | .provider-connections__back { flex: none; } |
| 168 | } |
| 169 | |
| 170 | .model-access-page { display: flex; flex-direction: column; flex: 1; min-height: 0; } |
| 171 | .model-access-page[hidden] { display: none; } |
| 172 | |
| 173 | .provider-editor__body > * { flex-shrink: 0; } |
| 174 | |
| 175 | .provider-connections__item--flat { align-items: center; gap: 12px; min-height: 52px; } |
| 176 | .provider-connections__item--flat strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } |
| 177 | .provider-connections__item--flat .provider-catalog__icon, .provider-connections__item--flat .provider-catalog__monogram { width: 24px; height: 24px; flex: 0 0 24px; } |
| 178 | |
| 179 | .provider-key-single { display: flex; flex-direction: column; gap: 8px; } |
| 180 | .provider-key-single > label { font-weight: 500; color: var(--fg-dim); } |
| 181 | .provider-key-single__input { position: relative; } |
| 182 | .provider-key-single__input .mem-input { width: 100%; box-sizing: border-box; padding-right: 48px; } |
| 183 | .provider-key-single__input > button { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; } |
| 184 | |
| 185 | .provider-connection-fields .set-label, |
| 186 | .provider-connection-fields .provider-key-single > label { |
| 187 | color: var(--fg-dim); |
| 188 | font-size: 14px; |
| 189 | font-weight: 500; |
| 190 | line-height: 1.4; |
| 191 | } |
| 192 | .provider-connection-fields .mem-input, |
| 193 | .provider-connection-fields .mem-select { |
| 194 | min-height: 42px; |
| 195 | box-sizing: border-box; |
| 196 | border-radius: 8px; |
| 197 | background: var(--bg-elev); |
| 198 | } |
| 199 | |
| 200 | /* Model services is a workspace, without duplicate page/card chrome. */ |
| 201 | :root .settings-center__content:has(.model-access-page:not([hidden])) { |
| 202 | padding: 0; |
| 203 | } |
| 204 | :root .settings-page:has(.model-access-page:not([hidden])) { |
| 205 | max-width: none; |
| 206 | margin: 0; |
| 207 | padding: 0; |
| 208 | gap: 0; |
| 209 | } |
| 210 | :root .settings-page:has(.model-access-page:not([hidden])) > .settings-page__header { |
| 211 | display: none; |
| 212 | } |
| 213 | :root .model-access-page > .settings-section { |
| 214 | margin: 0; |
| 215 | padding: 0; |
| 216 | border: 0; |
| 217 | border-radius: 0; |
| 218 | box-shadow: none; |
| 219 | background: transparent; |
| 220 | gap: 0; |
| 221 | } |
| 222 | :root .model-access-page > .settings-section > .settings-section__head { |
| 223 | display: none; |
| 224 | } |
| 225 | :root .model-access-page .settings-section__body { |
| 226 | padding: 0; |
| 227 | gap: 0; |
| 228 | } |
| 229 | :root .model-access-page .provider-connections { |
| 230 | border: 0; |
| 231 | border-radius: 0; |
| 232 | } |
| 233 | |
| 234 | /* Size the connection workspace from the panel, never from its form content. */ |
| 235 | .settings-center:has(.model-access-page:not([hidden]) .provider-connections:not([hidden])) { |
| 236 | grid-template-rows: minmax(0, 1fr); |
| 237 | } |
| 238 | .settings-center__content:has(.model-access-page:not([hidden]) .provider-connections:not([hidden])) { |
| 239 | min-height: 0; |
| 240 | } |
| 241 | .provider-connections { |
| 242 | grid-template-rows: minmax(0, 1fr); |
| 243 | } |
| 244 | .provider-connections__nav { |
| 245 | display: grid; |
| 246 | grid-template-rows: auto minmax(0, 1fr) auto; |
| 247 | overflow: hidden; |
| 248 | } |
| 249 | .provider-connections__list { |
| 250 | overflow-y: auto; |
| 251 | scrollbar-gutter: stable; |
| 252 | } |
| 253 | |
| 254 | /* The real SettingsPanel has a content wrapper between main and the page. |
| 255 | It must participate in the height chain, or long forms expand both columns. */ |
| 256 | .settings-page-content:has(.model-access-page:not([hidden]) .provider-connections:not([hidden])) { |
| 257 | display: flex; |
| 258 | flex-direction: column; |
| 259 | flex: 1; |
| 260 | min-height: 0; |
| 261 | overflow: hidden; |
| 262 | } |
| 263 | .settings-page-content:has(.model-access-page:not([hidden]) .provider-connections:not([hidden])) > .banner { |
| 264 | flex-shrink: 0; |
| 265 | } |
| 266 |