| 1 | .settings-inline-hint { |
| 2 | margin-top: 6px; |
| 3 | max-width: 520px; |
| 4 | color: var(--fg-dim); |
| 5 | font-size: var(--text-2xs); |
| 6 | line-height: 1.45; |
| 7 | } |
| 8 | .settings-graphics-label { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; } |
| 9 | .settings-graphics-status { color: var(--accent); font-size: var(--text-2xs); font-weight: 600; } |
| 10 | .settings-graphics-status--warning { color: var(--fg-dim); font-weight: 500; } |
| 11 | .settings-graphics-status--error { color: var(--danger, #b42318); font-weight: 500; } |
| 12 | .settings-graphics-control { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; } |
| 13 | |
| 14 | .settings-screen__sidebar { |
| 15 | display: flex; |
| 16 | flex-direction: column; |
| 17 | min-height: 0; |
| 18 | overflow: hidden; |
| 19 | background: var(--bg-soft); |
| 20 | } |
| 21 | |
| 22 | .settings-screen .settings-center__nav { flex: 1; min-height: 0; border-right: 0; } |
| 23 | .settings-screen .settings-center__content { margin: 0 8px 8px 0; border: 1px solid var(--border); border-radius: 16px; background: var(--bg); } |
| 24 | .settings-center { |
| 25 | grid-template-columns: clamp(220px, 20.5vw, 304px) minmax(0, 1fr); |
| 26 | } |
| 27 | |
| 28 | .settings-center__nav { |
| 29 | display: flex; |
| 30 | flex-direction: column; |
| 31 | min-height: 0; |
| 32 | overflow: hidden; |
| 33 | padding: 14px 12px 18px; |
| 34 | } |
| 35 | |
| 36 | .settings-center__navitem { |
| 37 | display: grid; |
| 38 | grid-template-columns: minmax(0, 1fr); |
| 39 | gap: 3px; |
| 40 | min-height: 48px; |
| 41 | padding: 7px 10px; |
| 42 | } |
| 43 | |
| 44 | .settings-center__content { |
| 45 | padding: 30px 40px 40px; |
| 46 | } |
| 47 | |
| 48 | .settings-page--form { |
| 49 | max-width: 1040px; |
| 50 | } |
| 51 | |
| 52 | .settings-page__header { |
| 53 | margin-bottom: 24px; |
| 54 | padding-bottom: 18px; |
| 55 | } |
| 56 | |
| 57 | .settings-page__title { |
| 58 | font-size: clamp(24px, 2.2vw, 30px); |
| 59 | font-weight: 740; |
| 60 | } |
| 61 | |
| 62 | .settings-page__desc { |
| 63 | font-size: var(--font-control); |
| 64 | } |
| 65 | |
| 66 | .settings-center__search { |
| 67 | --reasonix-draggable: no-drag; |
| 68 | flex-shrink: 0; |
| 69 | display: grid; |
| 70 | grid-template-columns: auto minmax(0, 1fr) auto; |
| 71 | align-items: center; |
| 72 | gap: 8px; |
| 73 | min-height: 38px; |
| 74 | margin-bottom: 14px; |
| 75 | padding: 0 10px; |
| 76 | border: 1px solid var(--border); |
| 77 | border-radius: 8px; |
| 78 | background: var(--bg-soft); |
| 79 | color: var(--fg-faint); |
| 80 | } |
| 81 | |
| 82 | .settings-center__search:focus-within { |
| 83 | border-color: color-mix(in srgb, var(--accent) 42%, var(--border)); |
| 84 | box-shadow: var(--focus-ring); |
| 85 | color: var(--fg-dim); |
| 86 | } |
| 87 | |
| 88 | .settings-center__search input { |
| 89 | min-width: 0; |
| 90 | height: 36px; |
| 91 | padding: 0; |
| 92 | border: 0; |
| 93 | outline: 0; |
| 94 | background: transparent; |
| 95 | color: var(--fg); |
| 96 | font: inherit; |
| 97 | font-size: var(--font-control-small); |
| 98 | } |
| 99 | |
| 100 | .settings-center__search input::placeholder { |
| 101 | color: var(--fg-faint); |
| 102 | } |
| 103 | |
| 104 | .settings-center__search button { |
| 105 | display: inline-flex; |
| 106 | align-items: center; |
| 107 | justify-content: center; |
| 108 | width: 24px; |
| 109 | height: 24px; |
| 110 | padding: 0; |
| 111 | border: 0; |
| 112 | border-radius: 6px; |
| 113 | background: transparent; |
| 114 | color: var(--fg-faint); |
| 115 | cursor: pointer; |
| 116 | } |
| 117 | |
| 118 | .settings-center__search button:hover, |
| 119 | .settings-center__search button:focus-visible { |
| 120 | outline: none; |
| 121 | background: var(--bg-elev-2); |
| 122 | color: var(--fg); |
| 123 | } |
| 124 | |
| 125 | .settings-center__navgroups, |
| 126 | .settings-center__navgroup, |
| 127 | .settings-center__navitems { |
| 128 | display: flex; |
| 129 | flex-direction: column; |
| 130 | min-width: 0; |
| 131 | } |
| 132 | |
| 133 | .settings-center__navgroups { |
| 134 | /* Keep scrolling navigation below the search field, never behind it. */ |
| 135 | flex: 1; |
| 136 | min-height: 0; |
| 137 | overflow-x: hidden; |
| 138 | overflow-y: auto; |
| 139 | gap: 14px; |
| 140 | } |
| 141 | |
| 142 | .settings-center__navgroup { |
| 143 | flex-shrink: 0; |
| 144 | gap: 4px; |
| 145 | } |
| 146 | |
| 147 | .settings-center__navgroup-label { |
| 148 | padding: 0 10px 3px; |
| 149 | color: var(--fg-faint); |
| 150 | font-size: var(--text-2xs); |
| 151 | font-weight: 650; |
| 152 | letter-spacing: 0.03em; |
| 153 | } |
| 154 | |
| 155 | .settings-center__navitems { |
| 156 | gap: 2px; |
| 157 | } |
| 158 | |
| 159 | .settings-center__navempty { |
| 160 | padding: 18px 10px; |
| 161 | color: var(--fg-faint); |
| 162 | font-size: var(--font-control-small); |
| 163 | line-height: 1.45; |
| 164 | text-align: center; |
| 165 | } |
| 166 | |
| 167 | .settings-center__navitem-main > span, |
| 168 | .settings-center__navitem small { |
| 169 | overflow: hidden; |
| 170 | text-overflow: ellipsis; |
| 171 | white-space: nowrap; |
| 172 | } |
| 173 | |
| 174 | .settings-center__navitem-main { |
| 175 | display: flex; |
| 176 | align-items: center; |
| 177 | gap: 9px; |
| 178 | min-width: 0; |
| 179 | } |
| 180 | |
| 181 | .settings-center__navitem-main > svg { |
| 182 | flex: 0 0 auto; |
| 183 | color: var(--fg-faint); |
| 184 | } |
| 185 | |
| 186 | .settings-center__navitem:hover .settings-center__navitem-main > svg, |
| 187 | .settings-center__navitem--active .settings-center__navitem-main > svg { |
| 188 | color: var(--fg); |
| 189 | } |
| 190 | |
| 191 | .settings-center__navitem-main > span { |
| 192 | font-size: var(--font-control); |
| 193 | font-weight: 650; |
| 194 | } |
| 195 | |
| 196 | .settings-center__navitem small { |
| 197 | padding-left: 26px; |
| 198 | color: var(--fg-dim); |
| 199 | font-size: var(--text-2xs); |
| 200 | font-family: inherit; |
| 201 | } |
| 202 | |
| 203 | .settings-field__copy--icon { |
| 204 | display: grid; |
| 205 | grid-template-columns: 22px minmax(0, 1fr); |
| 206 | gap: 12px; |
| 207 | align-items: start; |
| 208 | } |
| 209 | |
| 210 | .settings-field__copy-body { |
| 211 | min-width: 0; |
| 212 | } |
| 213 | |
| 214 | .settings-field__icon { |
| 215 | display: inline-flex; |
| 216 | align-items: center; |
| 217 | justify-content: center; |
| 218 | width: 22px; |
| 219 | height: 22px; |
| 220 | color: var(--fg-faint); |
| 221 | } |
| 222 | |
| 223 | .settings-page--general .settings-section { |
| 224 | margin-bottom: 30px; |
| 225 | padding: 0; |
| 226 | border: 0; |
| 227 | border-radius: 0; |
| 228 | background: transparent; |
| 229 | box-shadow: none; |
| 230 | } |
| 231 | |
| 232 | .settings-page--general { |
| 233 | container: settings-general / inline-size; |
| 234 | } |
| 235 | |
| 236 | .settings-page--general .settings-section__head { |
| 237 | margin-bottom: 0; |
| 238 | padding-bottom: 11px; |
| 239 | border-bottom: 1px solid var(--border-soft); |
| 240 | } |
| 241 | |
| 242 | .settings-page--general .settings-section__title { |
| 243 | font-size: var(--font-control); |
| 244 | font-weight: 720; |
| 245 | } |
| 246 | |
| 247 | .settings-page--general .settings-section__desc { |
| 248 | max-width: 680px; |
| 249 | } |
| 250 | |
| 251 | .settings-page--general .settings-section__desc .settings-field__hint-line, |
| 252 | .settings-page--general .settings-field__hint-line { |
| 253 | overflow: visible; |
| 254 | text-overflow: clip; |
| 255 | white-space: normal; |
| 256 | } |
| 257 | |
| 258 | .settings-page--general .settings-field { |
| 259 | grid-template-columns: minmax(260px, 1fr) max-content; |
| 260 | gap: 32px; |
| 261 | min-height: 62px; |
| 262 | padding: 14px 0; |
| 263 | } |
| 264 | |
| 265 | .settings-page--general .settings-field:first-child { |
| 266 | padding-top: 14px; |
| 267 | } |
| 268 | |
| 269 | .settings-page--general .settings-field:last-child { |
| 270 | padding-bottom: 14px; |
| 271 | } |
| 272 | |
| 273 | .settings-page--general > .settings-section:not(:last-child) .settings-section__body { |
| 274 | border-bottom: 1px solid var(--border-soft); |
| 275 | } |
| 276 | |
| 277 | .settings-page--general .settings-field__control { |
| 278 | min-width: 260px; |
| 279 | } |
| 280 | |
| 281 | .settings-page--general .settings-field--stacked .settings-field__control { |
| 282 | width: min(520px, 100%); |
| 283 | margin-left: auto; |
| 284 | } |
| 285 | |
| 286 | .settings-page--general .status-bar-items-setting { |
| 287 | grid-template-columns: minmax(0, 1fr); |
| 288 | gap: 10px; |
| 289 | } |
| 290 | |
| 291 | .settings-page--general .status-bar-items-setting .settings-field__control { |
| 292 | width: 100%; |
| 293 | min-width: 0; |
| 294 | margin-left: 0; |
| 295 | } |
| 296 | |
| 297 | .status-bar-items-editor__summary-actions { |
| 298 | display: inline-flex; |
| 299 | align-items: center; |
| 300 | gap: 8px; |
| 301 | } |
| 302 | |
| 303 | .status-bar-items-editor { |
| 304 | min-width: 0; |
| 305 | max-width: none; |
| 306 | } |
| 307 | |
| 308 | .status-bar-items-editor__action { |
| 309 | display: inline-flex; |
| 310 | align-items: center; |
| 311 | justify-content: center; |
| 312 | min-height: 28px; |
| 313 | padding: 0 11px; |
| 314 | border: 1px solid var(--border); |
| 315 | border-radius: 7px; |
| 316 | background: transparent; |
| 317 | color: var(--fg-dim); |
| 318 | font-size: var(--font-control-small); |
| 319 | font-weight: 600; |
| 320 | } |
| 321 | |
| 322 | .status-bar-items-editor__action:hover:not(:disabled), |
| 323 | .status-bar-items-editor__action:focus-visible:not(:disabled) { |
| 324 | outline: none; |
| 325 | border-color: color-mix(in srgb, var(--fg-faint) 34%, var(--border)); |
| 326 | background: var(--bg-elev-2); |
| 327 | color: var(--fg); |
| 328 | } |
| 329 | |
| 330 | .status-bar-items-editor__action--accent { |
| 331 | border-color: color-mix(in srgb, var(--accent) 76%, var(--border)); |
| 332 | color: var(--accent); |
| 333 | } |
| 334 | |
| 335 | .status-bar-items-editor__action:disabled { |
| 336 | opacity: 0.4; |
| 337 | cursor: not-allowed; |
| 338 | } |
| 339 | |
| 340 | .status-bar-items-editor__list { |
| 341 | display: grid; |
| 342 | align-content: start; |
| 343 | min-width: 0; |
| 344 | } |
| 345 | |
| 346 | .status-bar-items-editor__workspace { |
| 347 | display: grid; |
| 348 | grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); |
| 349 | min-width: 0; |
| 350 | overflow: hidden; |
| 351 | border: 1px solid var(--border-soft); |
| 352 | border-radius: 10px; |
| 353 | background: color-mix(in srgb, var(--bg-elev) 72%, transparent); |
| 354 | } |
| 355 | |
| 356 | .status-bar-items-editor__pane { |
| 357 | display: grid; |
| 358 | grid-template-rows: auto minmax(0, 1fr); |
| 359 | align-content: start; |
| 360 | min-width: 0; |
| 361 | transition: background var(--dur-fast), box-shadow var(--dur-fast); |
| 362 | } |
| 363 | |
| 364 | .status-bar-items-editor__pane--hidden { |
| 365 | border-left: 1px solid var(--border-soft); |
| 366 | } |
| 367 | |
| 368 | .status-bar-items-editor__pane--drop-target { |
| 369 | background: color-mix(in srgb, var(--accent) 7%, var(--bg-elev)); |
| 370 | box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 42%, transparent); |
| 371 | } |
| 372 | |
| 373 | .status-bar-items-editor__pane-title { |
| 374 | min-height: 38px; |
| 375 | padding: 11px 14px 9px; |
| 376 | border-bottom: 1px solid var(--border-soft); |
| 377 | color: var(--fg); |
| 378 | font-size: var(--font-control-small); |
| 379 | font-weight: 700; |
| 380 | line-height: 1.35; |
| 381 | } |
| 382 | |
| 383 | .status-bar-items-editor__empty { |
| 384 | display: flex; |
| 385 | flex-direction: column; |
| 386 | align-items: center; |
| 387 | justify-content: center; |
| 388 | gap: 8px; |
| 389 | min-height: 420px; |
| 390 | padding: 32px 24px; |
| 391 | color: var(--fg-faint); |
| 392 | text-align: center; |
| 393 | } |
| 394 | |
| 395 | .status-bar-items-editor__empty strong { |
| 396 | color: var(--fg-dim); |
| 397 | font-size: var(--font-control-small); |
| 398 | font-weight: 650; |
| 399 | } |
| 400 | |
| 401 | .status-bar-items-editor__empty span { |
| 402 | max-width: 240px; |
| 403 | font-size: var(--text-xs); |
| 404 | line-height: 1.55; |
| 405 | } |
| 406 | |
| 407 | .status-bar-item-row { |
| 408 | grid-template-columns: auto 22px minmax(0, 1fr) auto; |
| 409 | gap: 7px; |
| 410 | min-height: 38px; |
| 411 | padding: 5px 8px 5px 9px; |
| 412 | border: 0; |
| 413 | border-bottom: 1px solid var(--border-soft); |
| 414 | border-radius: 0; |
| 415 | background: transparent; |
| 416 | } |
| 417 | |
| 418 | .status-bar-item-row:last-child { |
| 419 | border-bottom: 0; |
| 420 | } |
| 421 | |
| 422 | .status-bar-item-row--hidden { |
| 423 | background: color-mix(in srgb, var(--bg-elev) 42%, transparent); |
| 424 | } |
| 425 | |
| 426 | .status-bar-item-row--drag-over { |
| 427 | border-color: transparent; |
| 428 | } |
| 429 | |
| 430 | .status-bar-item-row__position { |
| 431 | color: var(--fg-faint); |
| 432 | font-size: var(--text-xs); |
| 433 | font-variant-numeric: tabular-nums; |
| 434 | line-height: 1; |
| 435 | text-align: center; |
| 436 | } |
| 437 | |
| 438 | :root[data-theme-style] .settings-page--general .settings-section { |
| 439 | padding: 0; |
| 440 | border: 0; |
| 441 | border-radius: 0; |
| 442 | background: transparent; |
| 443 | box-shadow: none; |
| 444 | } |
| 445 | |
| 446 | :root[data-theme-style] .settings-page__title { |
| 447 | font-size: clamp(24px, 2.2vw, 30px); |
| 448 | letter-spacing: -0.015em; |
| 449 | } |
| 450 | |
| 451 | @container settings-general (max-width: 620px) { |
| 452 | .settings-page--general .settings-field { |
| 453 | grid-template-columns: 1fr; |
| 454 | gap: 10px; |
| 455 | } |
| 456 | |
| 457 | .settings-page--general .settings-field__control { |
| 458 | min-width: 0; |
| 459 | } |
| 460 | |
| 461 | .settings-page--general .settings-field--stacked .settings-field__control { |
| 462 | width: 100%; |
| 463 | margin-left: 0; |
| 464 | } |
| 465 | } |
| 466 | |
| 467 | @container settings-general (max-width: 440px) { |
| 468 | .settings-sound-row { |
| 469 | grid-template-columns: minmax(0, 1fr); |
| 470 | gap: 6px; |
| 471 | padding-top: 8px; |
| 472 | padding-bottom: 8px; |
| 473 | } |
| 474 | |
| 475 | .settings-sound-row .sound-select, |
| 476 | .settings-sound-row .notification-volume-control { |
| 477 | width: 100%; |
| 478 | justify-self: stretch; |
| 479 | } |
| 480 | } |
| 481 | |
| 482 | @media (max-width: 980px) { |
| 483 | .settings-page--general .settings-field { |
| 484 | grid-template-columns: 1fr; |
| 485 | gap: 10px; |
| 486 | } |
| 487 | |
| 488 | .settings-page--general .settings-field__control { |
| 489 | min-width: 0; |
| 490 | } |
| 491 | |
| 492 | .settings-page--general .settings-field--stacked .settings-field__control { |
| 493 | width: 100%; |
| 494 | margin-left: 0; |
| 495 | } |
| 496 | } |
| 497 | |
| 498 | @media (max-width: 760px) { |
| 499 | .status-bar-items-editor__summary { |
| 500 | align-items: flex-start; |
| 501 | flex-wrap: wrap; |
| 502 | } |
| 503 | |
| 504 | .status-bar-items-editor__summary-text { |
| 505 | margin-right: auto; |
| 506 | padding-top: 7px; |
| 507 | } |
| 508 | |
| 509 | .status-bar-items-editor__workspace { |
| 510 | grid-template-columns: minmax(0, 1fr); |
| 511 | } |
| 512 | |
| 513 | .status-bar-items-editor__pane--hidden { |
| 514 | border-top: 1px solid var(--border-soft); |
| 515 | border-left: 0; |
| 516 | } |
| 517 | |
| 518 | .status-bar-items-editor__empty { |
| 519 | min-height: 150px; |
| 520 | } |
| 521 | |
| 522 | .management-screen__back { margin: 0 10px; padding: 8px; } |
| 523 | .settings-screen .settings-center__content { margin: 0; border-radius: 0; border-inline: 0; border-bottom: 0; } |
| 524 | |
| 525 | .settings-center, |
| 526 | :root[data-theme-style] .settings-center { |
| 527 | grid-template-columns: minmax(0, 1fr); |
| 528 | grid-template-rows: auto minmax(0, 1fr); |
| 529 | } |
| 530 | |
| 531 | .settings-center__nav, |
| 532 | :root[data-theme-style] .settings-center__nav { |
| 533 | width: 100%; |
| 534 | padding: 8px 10px; |
| 535 | border-right: 0; |
| 536 | border-bottom: 1px solid var(--border); |
| 537 | overflow-x: auto; |
| 538 | overflow-y: hidden; |
| 539 | } |
| 540 | |
| 541 | .settings-center__search, |
| 542 | .settings-center__navgroup-label { |
| 543 | display: none; |
| 544 | } |
| 545 | |
| 546 | .settings-center__navgroups { |
| 547 | flex: 0 0 auto; |
| 548 | flex-direction: row; |
| 549 | overflow: visible; |
| 550 | gap: 4px; |
| 551 | width: max-content; |
| 552 | min-width: 100%; |
| 553 | } |
| 554 | |
| 555 | .settings-center__navgroup, |
| 556 | .settings-center__navitems { |
| 557 | display: contents; |
| 558 | } |
| 559 | |
| 560 | .settings-center__navitem-main { |
| 561 | gap: 7px; |
| 562 | } |
| 563 | |
| 564 | .settings-center__navitem { |
| 565 | width: auto; |
| 566 | min-height: 38px; |
| 567 | padding: 7px 10px; |
| 568 | } |
| 569 | |
| 570 | .settings-center__navitem small { |
| 571 | display: none; |
| 572 | } |
| 573 | |
| 574 | .settings-center__navitem--active::before { |
| 575 | top: auto; |
| 576 | right: 9px; |
| 577 | bottom: 0; |
| 578 | left: 9px; |
| 579 | width: auto; |
| 580 | height: 3px; |
| 581 | } |
| 582 | } |
| 583 | |
| 584 | .provider-image-input { |
| 585 | display: flex; |
| 586 | flex-direction: column; |
| 587 | gap: 5px; |
| 588 | min-width: 0; |
| 589 | font-family: var(--font-sans); |
| 590 | } |
| 591 | .provider-image-input__head { |
| 592 | display: flex; |
| 593 | align-items: center; |
| 594 | justify-content: flex-start; |
| 595 | flex-wrap: wrap; |
| 596 | gap: 10px; |
| 597 | } |
| 598 | .provider-image-input__label { |
| 599 | min-width: 60px; |
| 600 | color: var(--fg-dim); |
| 601 | font-size: var(--font-control-small); |
| 602 | font-weight: 650; |
| 603 | white-space: nowrap; |
| 604 | } |
| 605 | .provider-image-input__meta { |
| 606 | display: flex; |
| 607 | min-width: 0; |
| 608 | align-items: baseline; |
| 609 | flex-wrap: wrap; |
| 610 | gap: 4px 8px; |
| 611 | } |
| 612 | .provider-image-input__status { |
| 613 | display: inline-flex; |
| 614 | align-items: center; |
| 615 | gap: 5px; |
| 616 | min-width: 0; |
| 617 | color: var(--fg-faint); |
| 618 | font-size: var(--text-2xs); |
| 619 | line-height: 1.35; |
| 620 | } |
| 621 | .provider-image-input__status-dot { |
| 622 | width: 5px; |
| 623 | height: 5px; |
| 624 | flex: 0 0 5px; |
| 625 | border-radius: 50%; |
| 626 | background: currentColor; |
| 627 | } |
| 628 | .provider-image-input__status--supported { |
| 629 | color: var(--ok); |
| 630 | } |
| 631 | .provider-image-input__status--unsupported, |
| 632 | .provider-image-input__status--restricted { |
| 633 | color: var(--fg-dim); |
| 634 | } |
| 635 | .provider-image-input__modes { |
| 636 | flex: 0 0 auto; |
| 637 | } |
| 638 | .provider-image-input__mode { |
| 639 | position: relative; |
| 640 | display: flex; |
| 641 | min-width: 54px; |
| 642 | align-items: center; |
| 643 | justify-content: center; |
| 644 | cursor: pointer; |
| 645 | } |
| 646 | .provider-image-input__mode:focus-within { |
| 647 | outline: 2px solid color-mix(in srgb, var(--accent) 68%, transparent); |
| 648 | outline-offset: 1px; |
| 649 | } |
| 650 | .provider-image-input__mode--disabled { |
| 651 | cursor: not-allowed; |
| 652 | opacity: 0.42; |
| 653 | } |
| 654 | .provider-image-input__detail { |
| 655 | flex: 1 1 180px; |
| 656 | color: var(--fg-faint); |
| 657 | font-size: var(--text-2xs); |
| 658 | line-height: 1.45; |
| 659 | } |
| 660 | .settings-page-content { min-height: 100%; } |
| 661 | /* Neutral, stable-height selection for the settings navigation in every theme. */ |
| 662 | :root .settings-center .settings-center__navitem { |
| 663 | border-radius: 16px; |
| 664 | align-content: center; |
| 665 | } |
| 666 | |
| 667 | :root .settings-center .settings-center__navitem--active, |
| 668 | :root .settings-center .settings-center__navitem--active:hover { |
| 669 | background: color-mix(in srgb, var(--fg) 8%, transparent); |
| 670 | color: var(--fg); |
| 671 | box-shadow: none; |
| 672 | } |
| 673 | |
| 674 | :root .settings-center .settings-center__navitem--active::before { |
| 675 | display: none; |
| 676 | } |
| 677 | |
| 678 | :root .settings-center .settings-center__navitem:focus-visible { |
| 679 | outline: 2px solid var(--accent); |
| 680 | outline-offset: -2px; |
| 681 | } |
| 682 | |
| 683 | /* Shared settings density: preserve functional groups, remove page chrome. */ |
| 684 | :root .settings-center > .settings-center__content { |
| 685 | padding: 20px 24px; |
| 686 | } |
| 687 | :root .settings-center .settings-page { |
| 688 | margin: 0; |
| 689 | gap: 24px; |
| 690 | } |
| 691 | :root .settings-center .settings-page--form { |
| 692 | max-width: 880px; |
| 693 | } |
| 694 | :root .settings-center .settings-page--manager { |
| 695 | max-width: none; |
| 696 | } |
| 697 | :root .settings-center .settings-page > .settings-section { |
| 698 | border: 0; |
| 699 | border-radius: 0; |
| 700 | box-shadow: none; |
| 701 | background: transparent; |
| 702 | padding: 0; |
| 703 | } |
| 704 | :root .settings-center .settings-page > .settings-section > .settings-section__head { |
| 705 | padding: 0 0 12px; |
| 706 | } |
| 707 | :root .settings-center .settings-page > .settings-section > .settings-section__body { |
| 708 | padding: 0; |
| 709 | } |
| 710 | :root .settings-center > .settings-center__content:has(.model-access-page:not([hidden])) { |
| 711 | padding: 0; |
| 712 | } |
| 713 | @media (max-width: 760px) { |
| 714 | :root .settings-center > .settings-center__content { padding: 16px; } |
| 715 | } |
| 716 | |
| 717 | /* Settings templates: geometry is shared; only task layout varies. */ |
| 718 | /* Defaults must yield to component layouts and named page containers. */ |
| 719 | :where(.settings-center .settings-page[data-layout]) { container: settings-page / inline-size; } |
| 720 | :root .settings-center .settings-page[data-layout] { |
| 721 | --settings-space: 24px; |
| 722 | --settings-control-height: 36px; |
| 723 | max-width: none; |
| 724 | color: var(--fg); |
| 725 | } |
| 726 | :root .settings-center .settings-page[data-layout="form"] { max-width: 960px; } |
| 727 | :root .settings-center .settings-page[data-layout="tool"] { max-width: 1200px; } |
| 728 | :root .settings-center .settings-page[data-layout] > :is(.settings-section, .mem-section, .cap-mcp-settings, .appearance-overview, .remote-hosts, .diag-page) { |
| 729 | margin: 0 0 var(--settings-space); |
| 730 | padding: 0; |
| 731 | border: 0; |
| 732 | border-radius: 0; |
| 733 | box-shadow: none; |
| 734 | background: transparent; |
| 735 | } |
| 736 | :root .settings-center .settings-page[data-layout] .settings-section__head { |
| 737 | align-items: center; |
| 738 | gap: 16px; |
| 739 | margin: 0; |
| 740 | padding: 0 0 16px; |
| 741 | } |
| 742 | :root .settings-center .settings-page[data-layout] :is(.settings-section__title, .settings-toolbar > h2, .settings-toolbar > strong, .cap-skills-head__title, .cap-server-section__title, .appearance-overview__section-label) { |
| 743 | margin: 0; |
| 744 | font-size: 16px; |
| 745 | font-weight: 650; |
| 746 | line-height: 1.5; |
| 747 | } |
| 748 | :where(.settings-center .settings-page[data-layout]) .settings-field { |
| 749 | grid-template-columns: minmax(160px, .8fr) minmax(0, 1.2fr); |
| 750 | gap: 24px; |
| 751 | padding: 16px 0; |
| 752 | } |
| 753 | :where(.settings-center .settings-page[data-layout]) .settings-field--wide-copy { grid-template-columns: minmax(0, 1fr) auto; } |
| 754 | :root .settings-center .settings-page[data-layout] :is(.settings-field__copy, .settings-field__control) { min-width: 0; } |
| 755 | :root .settings-center .settings-page[data-layout] .settings-field__hint-line { |
| 756 | white-space: normal; |
| 757 | overflow: visible; |
| 758 | text-overflow: clip; |
| 759 | display: block; |
| 760 | -webkit-line-clamp: unset; |
| 761 | } |
| 762 | :root .settings-center .settings-page[data-layout] :is(input.mem-input, select.mem-select, .provider-connection-fields input, .provider-connection-fields select) { |
| 763 | box-sizing: border-box; |
| 764 | min-height: var(--settings-control-height); |
| 765 | max-width: 100%; |
| 766 | border: 1px solid var(--border); |
| 767 | border-radius: 8px; |
| 768 | color: var(--fg); |
| 769 | background-color: var(--bg); |
| 770 | font: inherit; |
| 771 | padding: 9px 12px; |
| 772 | } |
| 773 | :root .settings-center .settings-page[data-layout] select { |
| 774 | appearance: none; |
| 775 | background-image: none; |
| 776 | padding-inline-end: 28px; |
| 777 | } |
| 778 | |
| 779 | :root .settings-center .settings-page[data-layout] :is(input, select, textarea, button, summary):focus-visible { |
| 780 | outline: 2px solid var(--accent); |
| 781 | outline-offset: 2px; |
| 782 | } |
| 783 | :root .settings-center .settings-page[data-layout] .settings-toolbar { |
| 784 | display: flex; |
| 785 | align-items: center; |
| 786 | justify-content: space-between; |
| 787 | flex-wrap: wrap; |
| 788 | gap: 12px; |
| 789 | min-height: 44px; |
| 790 | margin: 0 0 16px; |
| 791 | padding: 0; |
| 792 | border: 0; |
| 793 | background: transparent; |
| 794 | } |
| 795 | :root .settings-center .settings-page[data-layout] .settings-toolbar input[type="search"] { flex: 1 1 200px; min-width: 0; } |
| 796 | :root .settings-center .settings-page[data-layout] .settings-toolbar :is(.btn, .chip) { flex-shrink: 0; } |
| 797 | :root .settings-center .settings-page[data-layout] .settings-icon-button { width: 36px; height: 36px; padding: 0; display: inline-flex; justify-content: center; align-items: center; } |
| 798 | :root .settings-center .settings-page[data-layout] .settings-save-bar { |
| 799 | /* Keep actions after the form so they cannot cover editable content. */ |
| 800 | display: flex; |
| 801 | flex-wrap: wrap; |
| 802 | justify-content: flex-end; |
| 803 | gap: 12px; |
| 804 | padding: 16px 0; |
| 805 | margin-top: 16px; |
| 806 | background: var(--bg); |
| 807 | border-top: 1px solid var(--border); |
| 808 | } |
| 809 | :root .settings-center .settings-page[data-layout] [hidden] { display: none !important; } |
| 810 | :root .settings-center .settings-page--bots :is(.bot-channel-manager-card, .bot-channel-setup-card, .bot-detail-card) { padding: 0; border: 0; background: transparent; box-shadow: none; } |
| 811 | :root .settings-center .settings-page--bots .bot-channel-manager { grid-template-columns: 240px minmax(0, 1fr); gap: 24px; } |
| 812 | :root .settings-center .settings-page--bots .bot-channel-tabs { padding-right: 20px; border-right: 1px solid var(--border); } |
| 813 | :root .settings-center .settings-page--bots .bot-channel-tab { border-color: transparent; min-height: 64px; box-shadow: none; background: transparent; } |
| 814 | :root .settings-center .settings-page--bots .bot-channel-tab--active { background: color-mix(in srgb, var(--fg) 8%, transparent); border-color: transparent; box-shadow: none; color: var(--fg); } |
| 815 | :root .settings-center .settings-page--bots .bot-simple-advanced { margin-top: 24px; box-shadow: none; background: transparent; border-inline: 0; border-radius: 0; } |
| 816 | :root .settings-center .settings-page--plugins .cap-plugin-section { margin-top: 0; } |
| 817 | :root .settings-center .settings-page--plugins .cap-plugin-section .cap-server-section__title { display: none; } |
| 818 | :root .settings-center .settings-page--appearance .appearance-overview__current { margin-top: 0; } |
| 819 | :root .settings-center .settings-page--remote .remote-host-row { box-shadow: none; } |
| 820 | :root .settings-center .settings-page--hooks .hooks-json-panel { border: 1px solid var(--border); box-shadow: none; } |
| 821 | :root .settings-center .settings-page--hooks .hooks-json-panel__textarea { min-height: 320px; resize: vertical; } |
| 822 | :root .settings-center .settings-page--storage .settings-field__control input[readonly] { background: transparent; border-color: transparent; font-family: var(--font-mono, monospace); } |
| 823 | :root .settings-center .settings-center__navitem:not(.settings-center__navitem--active):hover { background: color-mix(in srgb, var(--fg) 3%, transparent); } |
| 824 | @container settings-page (max-width: 680px) { |
| 825 | :where(.settings-center .settings-page[data-layout]) .settings-field { grid-template-columns: minmax(0, 1fr); gap: 8px; } |
| 826 | :root .settings-center .settings-page--bots .bot-channel-manager { grid-template-columns: minmax(0, 1fr); } |
| 827 | :root .settings-center .settings-page--bots .bot-channel-tabs { border: 0; padding: 0; display: flex; overflow-x: auto; } |
| 828 | :root .settings-center .settings-page--bots .bot-channel-tab { flex: 0 0 160px; } |
| 829 | } |
| 830 | :root .settings-center .settings-page[data-layout] .settings-toolbar__actions { display: flex; align-items: center; gap: 8px; } |
| 831 | :root .settings-center .settings-page--subagents .subagents-profile-group { padding: 0; border: 0; box-shadow: none; background: transparent; margin-bottom: 24px; } |
| 832 | :root .settings-center .settings-page--bots .bot-channel-tab small { white-space: normal; overflow: visible; text-overflow: clip; } |
| 833 | :root .settings-center .settings-page[data-layout] .settings-save-bar > [role="status"] { margin-right: auto; align-self: center; color: var(--fg-dim); font-size: var(--font-caption); } |
| 834 | :root .settings-center .settings-page[data-layout] .settings-path-value { display: flex; align-items: center; gap: 8px; min-width: 0; } |
| 835 | :root .settings-center .settings-page[data-layout] .settings-path-value input { flex: 1; min-width: 0; } |
| 836 | |
| 837 | /* Model preferences owns its nested sections across every theme and layout. */ |
| 838 | .model-preferences { container: model-preferences / inline-size; --model-assignment-columns: minmax(140px, 1fr) minmax(220px, 1.5fr) minmax(120px, .75fr); width: 100%; max-width: 1120px; margin: 0 auto; } |
| 839 | :root .settings-center .model-preferences > .settings-section { background: transparent; border: 0; box-shadow: none; padding: 0; margin: 0; border-radius: 0; } |
| 840 | :root .settings-center .model-preferences > .settings-section + .settings-section { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--border); } |
| 841 | :root .settings-center .model-preferences .settings-section__body { padding: 0; } |
| 842 | :root .settings-center .model-preferences .settings-field { padding: 12px 0; min-height: 0; gap: 20px; } |
| 843 | .model-assignment-head, .model-preferences .model-assignment-row, .model-preferences .model-assignment-effort { display: grid; grid-template-columns: var(--model-assignment-columns); gap: 20px; align-items: center; } |
| 844 | .model-assignment-head { padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13px; color: var(--fg-dim); } |
| 845 | .model-preferences .model-assignment-row .settings-field__control { display: contents; } |
| 846 | .model-assignment-row .settings-model-picker { min-width: 0; width: 100%; } |
| 847 | .model-assignment-connection { font-size: 13px; overflow-wrap: anywhere; color: var(--fg-dim); } |
| 848 | :root .settings-center .model-preferences .model-assignment-effort { border-top: 0; padding-top: 0; } |
| 849 | .model-assignment-effort .settings-field__copy { padding-left: 20px; border-left: 1px solid var(--border); margin-left: 8px; } |
| 850 | .model-preferences .settings-subagent-advanced { margin-top: 12px; border-top: 1px solid var(--border); } |
| 851 | .model-preferences .settings-subagent-advanced summary { cursor: pointer; padding: 14px 0; color: var(--fg-dim); } |
| 852 | .model-runtime-preferences > .settings-section__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; } |
| 853 | :root .model-runtime-preferences .settings-field { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; border: 0; gap: 12px; padding: 0; } |
| 854 | .model-runtime-preferences .settings-field__control { justify-content: flex-start; } |
| 855 | .model-preferences .compact-ratio-controls { width: 424px; max-width: 100%; gap: 8px; } |
| 856 | @container model-preferences (max-width: 780px) { |
| 857 | .model-assignment-head { display: none; } |
| 858 | .model-preferences .model-assignment-row, .model-preferences .model-assignment-effort { grid-template-columns: minmax(120px, .7fr) minmax(160px, 1fr); } |
| 859 | .model-assignment-connection { grid-column: 2; } |
| 860 | } |
| 861 | @container model-preferences (max-width: 440px) { |
| 862 | .model-preferences .model-assignment-row, .model-preferences .model-assignment-effort { grid-template-columns: minmax(0, 1fr); } |
| 863 | .model-assignment-connection { grid-column: 1; } |
| 864 | .model-assignment-effort .settings-field__copy { padding-left: 0; border-left: 0; margin-left: 0; } |
| 865 | } |
| 866 | |
| 867 | .web-search-assignment-control { min-width: 0; } |
| 868 | .web-search-assignment-hint { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: var(--fg-dim); overflow-wrap: anywhere; } |
| 869 | |
| 870 | .model-setting-label { display: inline-flex; align-items: center; gap: 6px; } |
| 871 | .model-setting-help { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--fg-dim); cursor: pointer; flex-shrink: 0; } |
| 872 | .model-setting-help:hover, .model-setting-help:focus-visible { color: var(--text); background: var(--bg-elev); } |
| 873 | .model-setting-help:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } |
| 874 | .model-setting-help-popover { width: min(340px, calc(100vw - 32px)); padding: 14px 16px; box-sizing: border-box; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-elev); color: var(--text); box-shadow: 0 8px 28px #0002; z-index: var(--z-popover); font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; } |
| 875 | .model-setting-help-popover p { margin: 8px 0 0; color: var(--fg-dim); font-weight: normal; } |
| 876 | :root .settings-center .settings-page .model-assignment-section > .settings-section__head .settings-section__title { font-size: 24px; line-height: 1.3; } |
| 877 | :root .settings-center .model-preferences .settings-field__label { font-size: 14px; } |
| 878 | |
| 879 | :root .settings-center .settings-page .model-preferences .settings-section__head { flex-direction: row; justify-content: flex-start; text-align: left; } |
| 880 | |
| 881 | .shell-runtime { min-width: 0; } |
| 882 | .shell-runtime code { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg-faint); font-size: var(--text-2xs); font-weight: 500; } |
| 883 | .shell-support { display: flex; flex-direction: column; gap: 8px; } |
| 884 | .shell-support__detection { display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 4px; font-weight: 500; } |
| 885 | .shell-capability__row { display: flex; align-items: center; gap: 8px; } |
| 886 | .shell-capability__row svg { flex: none; color: var(--fg-faint); } |
| 887 | .shell-capability__name { flex: none; font-weight: 650; } |
| 888 | .shell-capability__detail { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg-faint); font-size: var(--font-control-small); } |
| 889 | .set-shell-reload { margin-left: auto; } |
| 890 | .shell-support__card { padding: 10px 12px; border: 1px solid var(--border-soft); border-radius: 8px; background: color-mix(in srgb, var(--bg-elev) 72%, transparent); } |
| 891 | .shell-support__hint { font-size: var(--font-control-small); color: var(--fg-faint); line-height: 1.4; } |
| 892 | .shell-support__repair-command { margin-top: 8px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; } |
| 893 | .shell-support__repair-command code { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 7px 9px; border: 1px solid var(--border-soft); border-radius: 6px; background: color-mix(in srgb, var(--bg) 78%, transparent); color: var(--fg); font-family: var(--mono); font-size: var(--font-control-small); } |
| 894 | .shell-support__repair-safety { margin-top: 6px; color: var(--fg-faint); font-size: var(--font-control-small); line-height: 1.4; } |
| 895 | .shell-support__actions { margin-top: 8px; display: flex; } |
| 896 | .runtime-details { border-top: 1px solid var(--border-soft); padding-top: 13px; } |
| 897 | .runtime-details > summary { cursor: pointer; font-weight: 650; } |
| 898 | .runtime-details > div { margin-top: 4px; } |
| 899 | .runtime-details > div > footer { padding-top: 12px; } |
| 900 |