| 1 | .provider-protocol-upgrade { |
| 2 | display: flex; |
| 3 | align-items: center; |
| 4 | justify-content: space-between; |
| 5 | gap: 16px; |
| 6 | margin-inline: -14px; |
| 7 | padding: 11px 14px; |
| 8 | border-top: 1px solid var(--border-soft); |
| 9 | border-bottom: 1px solid var(--border-soft); |
| 10 | background: color-mix(in srgb, var(--accent) 5%, var(--bg-elev-2)); |
| 11 | } |
| 12 | .provider-protocol-upgrade__copy { |
| 13 | flex: 1 1 360px; |
| 14 | min-width: 0; |
| 15 | } |
| 16 | .provider-protocol-upgrade__title { |
| 17 | font-size: var(--font-control-small); |
| 18 | font-weight: 650; |
| 19 | line-height: 1.35; |
| 20 | } |
| 21 | .provider-protocol-upgrade__desc { |
| 22 | margin-top: 3px; |
| 23 | color: var(--fg-dim); |
| 24 | font-size: var(--text-2xs); |
| 25 | } |
| 26 | .provider-protocol-upgrade__actions { |
| 27 | flex: 0 0 auto; |
| 28 | } |
| 29 | .provider-protocol-upgrade__actions .inline-confirm { |
| 30 | flex-wrap: wrap; |
| 31 | justify-content: flex-end; |
| 32 | } |
| 33 | .provider-access-more__trigger { |
| 34 | width: var(--button-small-height); |
| 35 | padding-inline: 0; |
| 36 | } |
| 37 | .provider-access-more__menu { |
| 38 | min-width: 188px; |
| 39 | padding: 6px; |
| 40 | border: 1px solid var(--border); |
| 41 | border-radius: 8px; |
| 42 | box-shadow: 0 18px 42px rgba(0, 0, 0, 0.42); |
| 43 | } |
| 44 | .provider-access-more__items .inline-confirm { |
| 45 | flex-direction: column; |
| 46 | align-items: stretch; |
| 47 | width: 100%; |
| 48 | } |
| 49 | .provider-access-more__items .btn { |
| 50 | width: 100%; |
| 51 | justify-content: flex-start; |
| 52 | } |
| 53 | .provider-access-more__items .btn:not(.btn--danger) { |
| 54 | border-color: transparent; |
| 55 | background: transparent; |
| 56 | } |
| 57 | .provider-access-more__items .btn:not(.btn--danger):hover, |
| 58 | .provider-access-more__items .btn:not(.btn--danger):focus-visible { |
| 59 | background: var(--bg-soft); |
| 60 | color: var(--fg); |
| 61 | } |
| 62 | .provider-card-block--inline { |
| 63 | display: grid; |
| 64 | grid-template-columns: max-content minmax(0, 1fr); |
| 65 | align-items: center; |
| 66 | gap: 10px; |
| 67 | } |
| 68 | .provider-technical-details { |
| 69 | padding-top: 8px; |
| 70 | border-top: 1px solid var(--border-soft); |
| 71 | color: var(--fg-dim); |
| 72 | } |
| 73 | .provider-technical-details > summary { |
| 74 | display: inline-flex; |
| 75 | align-items: center; |
| 76 | gap: 6px; |
| 77 | list-style: none; |
| 78 | cursor: pointer; |
| 79 | font-size: var(--text-2xs); |
| 80 | font-weight: 650; |
| 81 | user-select: none; |
| 82 | } |
| 83 | .provider-technical-details > summary::-webkit-details-marker { |
| 84 | display: none; |
| 85 | } |
| 86 | .provider-technical-details > summary::after { |
| 87 | content: "›"; |
| 88 | color: var(--fg-faint); |
| 89 | font-size: 15px; |
| 90 | line-height: 1; |
| 91 | } |
| 92 | .provider-technical-details[open] > summary::after { |
| 93 | transform: rotate(90deg); |
| 94 | } |
| 95 | .provider-technical-details dl { |
| 96 | display: grid; |
| 97 | gap: 7px; |
| 98 | margin: 9px 0 0; |
| 99 | padding: 10px 12px; |
| 100 | border-radius: 6px; |
| 101 | background: color-mix(in srgb, var(--bg-elev) 68%, transparent); |
| 102 | } |
| 103 | .provider-technical-details dl > div { |
| 104 | display: grid; |
| 105 | grid-template-columns: minmax(90px, 0.28fr) minmax(0, 1fr); |
| 106 | gap: 12px; |
| 107 | } |
| 108 | .provider-technical-details dt { |
| 109 | color: var(--fg-faint); |
| 110 | font-size: var(--text-2xs); |
| 111 | } |
| 112 | .provider-technical-details dd { |
| 113 | min-width: 0; |
| 114 | margin: 0; |
| 115 | font-family: var(--mono); |
| 116 | font-size: var(--text-2xs); |
| 117 | overflow-wrap: anywhere; |
| 118 | } |
| 119 | |
| 120 | @media (max-width: 980px) { |
| 121 | .provider-protocol-upgrade { |
| 122 | flex-wrap: wrap; |
| 123 | } |
| 124 | } |
| 125 | |
| 126 | @media (max-width: 760px) { |
| 127 | .provider-card-block--inline, |
| 128 | .provider-technical-details dl > div { |
| 129 | grid-template-columns: 1fr; |
| 130 | } |
| 131 | .provider-card-block--inline { |
| 132 | gap: 6px; |
| 133 | } |
| 134 | .provider-technical-details dl > div { |
| 135 | gap: 2px; |
| 136 | } |
| 137 | .provider-protocol-upgrade { |
| 138 | align-items: flex-start; |
| 139 | } |
| 140 | .provider-protocol-upgrade__actions { |
| 141 | width: 100%; |
| 142 | } |
| 143 | .provider-protocol-upgrade__actions .inline-confirm { |
| 144 | justify-content: flex-start; |
| 145 | } |
| 146 | } |
| 147 | |
| 148 | /* Provider settings share one rail/detail layout across themes. Hidden panels |
| 149 | remain mounted so switching providers cannot discard an unsaved draft. */ |
| 150 | .provider-workspace { display: grid; grid-template-columns: 190px minmax(0, 1fr); min-height: 510px; border: 1px solid var(--border); border-radius: 12px; overflow: clip; background: var(--bg-elev); } |
| 151 | .provider-workspace [hidden], .provider-add-panel [hidden] { display: none !important; } |
| 152 | .provider-workspace__rail { border-right: 1px solid var(--border); padding: 12px; background: var(--bg-soft); display: flex; flex-direction: column; gap: 16px; } |
| 153 | .provider-workspace__rail h4 { margin: 4px 8px 8px; color: var(--fg-dim); font-size: var(--text-2xs); font-weight: 500; } |
| 154 | .provider-workspace__rail button { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; border: 1px solid transparent; background: transparent; color: var(--fg); border-radius: 7px; padding: 10px; text-align: left; cursor: pointer; font: inherit; font-size: var(--font-control-small); } |
| 155 | .provider-workspace__rail button span:first-child { overflow-wrap: anywhere; } |
| 156 | .provider-workspace__rail button:hover { background: var(--bg-elev-2); } |
| 157 | .provider-workspace__rail button[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 10%, var(--bg-elev)); border-color: color-mix(in srgb, var(--accent) 25%, var(--border)); color: var(--accent); } |
| 158 | .provider-workspace__rail .provider-workspace__add { margin-top: auto; color: var(--accent); } |
| 159 | .provider-status-dot { flex: 0 0 6px; height: 6px; border-radius: 50%; background: var(--fg-dim); } |
| 160 | .provider-status-dot--ready { background: var(--success, #23864b); } |
| 161 | .provider-workspace__detail { min-width: 0; padding: 22px; } |
| 162 | .provider-workspace__detail .provider-access-card, .provider-workspace__detail .provider-add-panel { border: 0; border-radius: 0; padding: 0; background: transparent; box-shadow: none; } |
| 163 | .provider-access-card--detail .provider-access-card__head { margin-bottom: 16px; } |
| 164 | .provider-access-card--detail .provider-editor { border: 0; padding: 0; margin-top: 14px; } |
| 165 | .provider-catalog-trigger { width: 100%; justify-content: space-between; margin-bottom: 8px; } |
| 166 | .provider-catalog { border: 1px solid var(--border); background: var(--bg-elev); border-radius: 8px; padding: 8px; } |
| 167 | .provider-catalog__list { max-height: 280px; overflow-y: auto; margin-top: 6px; } |
| 168 | .provider-catalog__list .provider-template-card { width: 100%; min-height: 0; padding: 10px; border: 0; border-radius: 5px; margin-bottom: 2px; text-align: left; } |
| 169 | .provider-catalog__list .provider-template-card strong { font-size: var(--font-control-small); } |
| 170 | .provider-catalog__list .provider-template-card span { font-size: var(--text-2xs); } |
| 171 | .provider-models-editor { margin-top: 22px; min-width: 0; } |
| 172 | .provider-models-editor__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; } |
| 173 | .provider-models-editor__head > div { display: flex; gap: 6px; } |
| 174 | .provider-models-editor__head strong { font-size: var(--font-control-small); } |
| 175 | .provider-models-editor__empty { padding: 20px 14px; border: 1px dashed var(--border); border-radius: 8px; color: var(--fg-dim); font-size: var(--font-control-small); } |
| 176 | .provider-models-editor__list { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; } |
| 177 | .provider-models-editor__list:empty { display: none; } |
| 178 | .provider-model-row { padding: 10px; border-bottom: 1px solid var(--border-soft); } |
| 179 | .provider-model-row:last-child { border-bottom: 0; } |
| 180 | .provider-model-row__main { display: flex; align-items: center; gap: 6px; } |
| 181 | .provider-model-row__name { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: var(--font-control-small); } |
| 182 | .provider-model-row__main > .btn { padding-inline: 6px; flex-shrink: 0; border-color: transparent; } |
| 183 | .provider-model-row .provider-fetch-status { margin-top: 8px; font-size: var(--text-2xs); overflow-wrap: anywhere; } |
| 184 | .provider-field { display: grid; gap: 7px; margin: 16px 0; font-size: var(--font-control-small); } |
| 185 | .provider-field small { color: var(--fg-dim); line-height: 1.5; } |
| 186 | .provider-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } |
| 187 | .provider-dialog-backdrop { z-index: var(--z-overlay-backdrop); } |
| 188 | .provider-dialog { width: min(620px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); overflow: auto; padding: 24px; background: var(--bg-elev); color: var(--fg); border: 1px solid var(--border); border-radius: 12px; } |
| 189 | .provider-dialog > header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; } |
| 190 | .provider-dialog h3 { margin: 0; font-size: 17px; } |
| 191 | .provider-dialog footer { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--border-soft); } |
| 192 | .provider-dialog footer > span { margin-right: auto; font-size: var(--text-2xs); color: var(--fg-dim); } |
| 193 | .provider-dialog .mem-input, .provider-dialog .mem-select { width: 100%; box-sizing: border-box; } |
| 194 | .provider-catalog-search { display: flex; align-items: center; gap: 8px; } |
| 195 | .provider-discovery-list { max-height: 320px; overflow-y: auto; margin-top: 14px; } |
| 196 | .provider-discovery-row { display: flex; gap: 12px; align-items: center; padding: 12px 4px; border-bottom: 1px solid var(--border-soft); font-size: var(--font-control-small); } |
| 197 | .provider-discovery-row > span { flex: 1; overflow-wrap: anywhere; } |
| 198 | .provider-discovery-row small { color: var(--fg-dim); } |
| 199 | .provider-editor code { overflow-wrap: anywhere; font-size: var(--text-2xs); } |
| 200 | @media (max-width: 900px) { |
| 201 | .provider-workspace { grid-template-columns: 150px minmax(0, 1fr); } |
| 202 | .provider-workspace__detail { padding: 14px; } |
| 203 | .provider-model-row__main { flex-wrap: wrap; } |
| 204 | .provider-model-row__name { flex-basis: 100%; } |
| 205 | } |
| 206 | @media (max-width: 640px) { |
| 207 | .provider-workspace { grid-template-columns: minmax(0, 1fr); } |
| 208 | .provider-workspace__rail { border-right: 0; border-bottom: 1px solid var(--border); max-height: 200px; overflow-y: auto; } |
| 209 | .provider-field-grid { grid-template-columns: 1fr; gap: 0; } |
| 210 | } |
| 211 |