1d860ec310
Add a "Global Max Concurrent" slider to the footer engine menu and the Command Center Concurrency card, and group the Scheduling settings by Global vs Project scope so the global cap isn't mistaken for a per-project setting (clearer on mobile). Both sliders are backed by a single shared `useGlobalConcurrency` hook (module-level store) so they read/write one source of truth and revalidate after every PUT /api/global-concurrency — fixing the last-writer-wins and stale-clobber races a per-component cache would cause. The hook treats a fetch error as non-interactive (slider disabled, not stuck at 1), surfaces a save-state indicator, and flushes a pending edit on menu close / unmount so a quick drag-then-dismiss is never silently dropped. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2333 lines
52 KiB
CSS
2333 lines
52 KiB
CSS
/* === SettingsModal: all settings-related layout, panel, and component styles ===
|
|
Extracted from styles.css as part of the Sweep-3 CSS extraction effort.
|
|
Imported by SettingsModal.tsx (and MemoryView.tsx for shared classes). */
|
|
|
|
/* === Settings Modal header action buttons (Star on GitHub, Discord) === */
|
|
.settings-header-actions {
|
|
--settings-header-action-height: calc(var(--space-md) * 2 + var(--space-xs) / 2);
|
|
|
|
display: flex;
|
|
align-items: stretch;
|
|
gap: var(--space-xs);
|
|
margin-left: auto;
|
|
margin-right: var(--space-sm);
|
|
}
|
|
|
|
/* Keep the GitHub Star and Help buttons at matching heights regardless of
|
|
their differing icon sizes (provider icon 16px vs. HelpCircle 13px). */
|
|
.settings-header-actions > .settings-github-star-btn,
|
|
.settings-header-actions > .settings-header-discord-btn {
|
|
height: var(--settings-header-action-height);
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.settings-header-discord-btn,
|
|
.settings-footer-help-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
/* FN-4375: keep heading, actions, and close in one row on mobile; supersedes FN-4281/FN-4331/FN-4363 wrap/order behavior. */
|
|
.settings-modal .modal-header {
|
|
flex-wrap: nowrap;
|
|
align-items: center;
|
|
column-gap: var(--space-sm);
|
|
}
|
|
|
|
.settings-modal-heading {
|
|
flex: 1 1 0;
|
|
min-width: 0;
|
|
}
|
|
|
|
.settings-header-actions {
|
|
margin-left: auto;
|
|
margin-right: var(--space-sm);
|
|
}
|
|
}
|
|
|
|
/* GitHub star button — split-pill layout: [Star half | Count half] */
|
|
.settings-github-star-btn {
|
|
display: inline-flex;
|
|
align-items: stretch;
|
|
border: var(--btn-border-width) solid var(--border);
|
|
border-radius: var(--radius-pill);
|
|
background: var(--card);
|
|
color: var(--text);
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
text-decoration: none;
|
|
overflow: hidden;
|
|
transition:
|
|
border-color var(--transition-fast),
|
|
background var(--transition-fast);
|
|
}
|
|
|
|
.settings-github-star-btn:hover {
|
|
border-color: var(--text-muted);
|
|
background: var(--card-hover);
|
|
}
|
|
|
|
.settings-github-star-btn:focus-visible {
|
|
outline: none;
|
|
box-shadow: var(--focus-ring-strong);
|
|
border-color: var(--todo);
|
|
}
|
|
|
|
.settings-github-star-btn__action {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--space-xs);
|
|
padding: var(--space-xs) calc(var(--space-sm) + var(--space-xs) / 2);
|
|
}
|
|
|
|
.settings-github-star-btn__count {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: var(--space-xs) calc(var(--space-sm) + var(--space-xs) / 4);
|
|
border-left: var(--btn-border-width) solid var(--border);
|
|
background: color-mix(in srgb, var(--surface) 60%, var(--card));
|
|
color: var(--text-muted);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* === Settings Modal: sizing + resizability === */
|
|
.settings-modal {
|
|
width: min(95vw, 1100px);
|
|
max-width: 95vw;
|
|
min-width: 520px;
|
|
height: 80vh;
|
|
min-height: 480px;
|
|
max-height: calc(100dvh - var(--overlay-padding-top, 10vh) - 16px);
|
|
overflow: hidden;
|
|
resize: both;
|
|
}
|
|
|
|
/*
|
|
FNXC:Settings 2026-06-22-00:00:
|
|
Embedded settings is a main-content destination (taskView === "settings"), mirroring Planning/Command Center. The host (.settings-embedded.right-dock-embedded-view) fills the content pane and the inner panel (.settings-modal--embedded) sheds all dialog chrome — fixed dialog sizing, shadow, border, radius, resize grip — so the view sits flush on the project-content surface. Theme tokens only; no hardcoded colors.
|
|
|
|
FNXC:Settings 2026-06-22-14:36:
|
|
The Settings page should match other main-content views with no extra outer inset around the whole box. Keep breathing room inside each settings screen instead so controls never sit directly against the content edge.
|
|
*/
|
|
.settings-embedded.right-dock-embedded-view {
|
|
display: flex;
|
|
flex: 1;
|
|
width: 100%;
|
|
height: 100%;
|
|
min-height: 0;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.settings-embedded .settings-modal--embedded {
|
|
flex: 1;
|
|
width: 100%;
|
|
max-width: none;
|
|
min-width: 0;
|
|
height: 100%;
|
|
min-height: 0;
|
|
max-height: none;
|
|
resize: none;
|
|
box-shadow: none;
|
|
border: none;
|
|
border-radius: 0;
|
|
background: transparent;
|
|
position: static;
|
|
}
|
|
|
|
/*
|
|
FNXC:Settings 2026-06-22-00:00:
|
|
The embedded title reads like other embedded-view titles (Planning modal-header--embedded, Command Center cc-title): a plain heading with no tinted modal-header bar, no bottom divider, no close button, aligned to the content edge, at the shared 1.125rem embedded-title size. Header actions (Star/Discord) and footer remain so the full-width panel keeps its controls.
|
|
*/
|
|
/* FNXC:Settings 2026-06-23-04:45: The embedded Settings header now matches the canonical ViewHeader/other sidebar views exactly — same min-height, space-lg/space-xl padding, surface bg, no bottom divider, var(--todo) icon, 1.125rem/600 title, actions pinned right. */
|
|
.settings-modal--embedded .modal-header--embedded {
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-sm);
|
|
min-height: var(--view-header-min-height);
|
|
padding: var(--space-lg) var(--space-xl);
|
|
background: var(--surface);
|
|
border-bottom: none;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.settings-modal--embedded .modal-header--embedded .settings-header-actions {
|
|
margin-left: auto;
|
|
}
|
|
|
|
.settings-modal--embedded .modal-header--embedded .settings-modal-heading h3 {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-sm);
|
|
font-size: 1.125rem;
|
|
font-weight: 600;
|
|
color: var(--text);
|
|
letter-spacing: normal;
|
|
}
|
|
|
|
.settings-modal--embedded .modal-header--embedded .settings-modal-heading svg {
|
|
color: var(--todo);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Embedded footer actions sit flush on the content surface (no tinted modal bar).
|
|
FNXC:Settings 2026-06-23-04:45: Trim the footer's bottom padding so the space BELOW the Save/Help/Version/Import-Export row matches the space above it (the base .modal-actions var(--modal-padding) left too large a gap under the row in the embedded full-height view). */
|
|
.settings-modal--embedded .modal-actions {
|
|
background: transparent;
|
|
flex-shrink: 0;
|
|
padding-bottom: var(--space-sm);
|
|
}
|
|
|
|
/* Mobile: full-screen sheet. The desktop `min-width: 520px` was forcing the
|
|
modal wider than narrow viewports, pushing it off-screen; the desktop
|
|
`height: 80vh` left awkward strips of overlay above and below. Drop the
|
|
overlay's default top padding so the modal actually fills the viewport,
|
|
and disable resize (touchscreen users can't drag the grip anyway).
|
|
FNXC:Settings 2026-06-22-16:00: scope the viewport-takeover rules to the
|
|
NON-embedded (dialog) presentation only via :not(.settings-modal--embedded).
|
|
The embedded panel lives inside the main-content pane (between the mobile
|
|
Header and MobileNavBar); without the guard its base .settings-modal class
|
|
matched these 100vw/100dvh rules and covered the whole screen, hiding the
|
|
app header/footer. The embedded view's own fill-the-pane sizing is handled
|
|
below. */
|
|
@media (max-width: 768px) {
|
|
.modal-overlay.settings-modal-overlay,
|
|
.modal-overlay:has(.settings-modal:not(.settings-modal--embedded)) {
|
|
padding: 0;
|
|
inset: 0;
|
|
align-items: stretch;
|
|
justify-content: stretch;
|
|
}
|
|
|
|
.modal.settings-modal:not(.settings-modal--embedded) {
|
|
width: 100vw;
|
|
min-width: 0;
|
|
max-width: 100vw;
|
|
height: 100dvh;
|
|
min-height: 100dvh;
|
|
max-height: 100dvh;
|
|
margin: 0;
|
|
border: none;
|
|
border-radius: 0;
|
|
resize: none;
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
.modal.settings-modal:not(.settings-modal--embedded)[style*="--keyboard-overlap"] {
|
|
height: var(--vv-height, 100dvh);
|
|
min-height: var(--vv-height, 100dvh);
|
|
max-height: var(--vv-height, 100dvh);
|
|
transform: translateY(var(--vv-offset-top, 0px));
|
|
will-change: transform;
|
|
}
|
|
|
|
/* FNXC:Settings 2026-06-22-16:00: on mobile the embedded settings view fills
|
|
only its own content pane (not the viewport) and scrolls internally so the
|
|
app Header + MobileNavBar stay visible. Trim the outer host padding so the
|
|
panel and its section navigation sit edge-to-edge in the narrow pane. */
|
|
.settings-embedded.right-dock-embedded-view {
|
|
padding: var(--space-sm);
|
|
}
|
|
|
|
.settings-embedded .settings-modal--embedded {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
/* === Settings Layout === */
|
|
.settings-modal-heading {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-xs);
|
|
}
|
|
|
|
.settings-modal-heading h3 {
|
|
margin: 0;
|
|
}
|
|
|
|
.settings-modal-version {
|
|
margin: 0;
|
|
font-size: 0.85rem;
|
|
color: var(--text-muted);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.settings-modal-footer-version {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-xs);
|
|
margin-right: var(--space-sm);
|
|
min-width: 0;
|
|
}
|
|
|
|
.settings-update-check {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-sm);
|
|
min-width: 0;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.settings-modal-footer-version {
|
|
flex: 1 1 100%;
|
|
margin-right: 0;
|
|
}
|
|
|
|
.settings-update-check {
|
|
flex-wrap: wrap;
|
|
row-gap: var(--space-xs);
|
|
}
|
|
|
|
.settings-update-result {
|
|
flex: 1 1 100%;
|
|
}
|
|
|
|
.settings-footer-help-btn {
|
|
flex-shrink: 0;
|
|
}
|
|
}
|
|
|
|
.settings-version-check-btn {
|
|
--settings-inline-touch-target: calc(var(--space-lg) + var(--space-lg) + var(--space-xs));
|
|
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--space-xs);
|
|
margin: 0;
|
|
min-height: var(--settings-inline-touch-target);
|
|
padding: var(--space-xs) var(--space-sm);
|
|
border: none;
|
|
background: transparent;
|
|
color: var(--text-muted);
|
|
cursor: pointer;
|
|
transition: opacity var(--transition-fast), box-shadow var(--transition-fast);
|
|
}
|
|
|
|
.settings-version-check-btn:hover:not(:disabled) {
|
|
opacity: 0.85;
|
|
}
|
|
|
|
.settings-version-check-btn:focus-visible {
|
|
outline: none;
|
|
box-shadow: var(--focus-ring-strong);
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
|
|
.settings-version-check-btn:disabled {
|
|
cursor: default;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.settings-version-check-btn svg {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.settings-version-check-btn svg.spinning {
|
|
animation: settings-update-spin 1s linear infinite;
|
|
}
|
|
|
|
.settings-update-result {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: var(--space-xs);
|
|
font-size: 0.85rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.settings-update-result--up-to-date {
|
|
color: var(--color-success);
|
|
}
|
|
|
|
.settings-update-result--available {
|
|
color: var(--color-info);
|
|
}
|
|
|
|
.settings-update-result--error {
|
|
color: var(--color-error);
|
|
}
|
|
|
|
.settings-update-result-link {
|
|
color: var(--color-info);
|
|
text-decoration: underline;
|
|
transition: color var(--transition-fast), box-shadow var(--transition-fast);
|
|
}
|
|
|
|
.settings-update-result-link:hover {
|
|
color: color-mix(in srgb, var(--color-info) 80%, var(--text));
|
|
}
|
|
|
|
.settings-update-result-link:focus-visible {
|
|
outline: none;
|
|
box-shadow: var(--focus-ring-strong);
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
|
|
.settings-update-now-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--space-xs);
|
|
min-height: calc(var(--space-lg) + var(--space-sm));
|
|
color: var(--text);
|
|
}
|
|
|
|
.settings-update-now-btn:disabled {
|
|
color: var(--color-warning);
|
|
}
|
|
|
|
.settings-update-now-btn svg.spinning {
|
|
animation: settings-update-spin 1s linear infinite;
|
|
}
|
|
|
|
.settings-update-install-status {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.settings-update-install-status--success {
|
|
color: var(--color-success);
|
|
}
|
|
|
|
.settings-update-install-status--error {
|
|
color: var(--color-error);
|
|
}
|
|
|
|
@keyframes settings-update-spin {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
/* === Settings Backups: summary stats + backup list === */
|
|
.backup-stats {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-lg);
|
|
padding: var(--space-sm) var(--space-md);
|
|
border: var(--btn-border-width) solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
background: color-mix(in srgb, var(--surface) 85%, transparent);
|
|
}
|
|
|
|
.backup-stat {
|
|
display: flex;
|
|
flex: 1 1 0;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: var(--space-xs);
|
|
min-width: 0;
|
|
}
|
|
|
|
.backup-stat-value {
|
|
color: var(--text);
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.backup-stat-label {
|
|
color: var(--text-muted);
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.04em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.backup-list {
|
|
margin-top: var(--space-sm);
|
|
}
|
|
|
|
.backup-list summary {
|
|
padding: var(--space-sm) 0;
|
|
color: var(--text-muted);
|
|
cursor: pointer;
|
|
transition: color var(--transition-fast);
|
|
}
|
|
|
|
.backup-list summary:hover {
|
|
color: var(--text);
|
|
}
|
|
|
|
.backup-list summary:focus-visible {
|
|
outline: none;
|
|
border-radius: var(--radius-sm);
|
|
box-shadow: var(--focus-ring-strong);
|
|
}
|
|
|
|
.backup-list ul {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-xs);
|
|
margin: 0;
|
|
margin-top: var(--space-sm);
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.backup-list li {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--space-sm);
|
|
padding: var(--space-sm) 0;
|
|
border-top: var(--btn-border-width) solid color-mix(in srgb, var(--border) 80%, transparent);
|
|
}
|
|
|
|
.backup-list li code {
|
|
min-width: 0;
|
|
color: var(--text);
|
|
font-family: var(--font-mono);
|
|
font-size: 0.75rem;
|
|
white-space: nowrap;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.backup-size {
|
|
color: var(--text-muted);
|
|
font-family: var(--font-mono);
|
|
font-size: 0.75rem;
|
|
text-align: right;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.backup-stats {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
gap: var(--space-sm);
|
|
}
|
|
|
|
.backup-stat {
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.backup-list ul {
|
|
max-height: calc(var(--space-xl) * 9 + var(--space-md));
|
|
overflow-y: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
.backup-list li code {
|
|
white-space: normal;
|
|
overflow-wrap: anywhere;
|
|
word-break: normal;
|
|
}
|
|
}
|
|
|
|
.settings-layout {
|
|
display: flex;
|
|
flex: 1;
|
|
flex-direction: row;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.settings-mobile-section-picker {
|
|
display: none;
|
|
}
|
|
|
|
.settings-sidebar {
|
|
width: 170px;
|
|
min-width: 170px;
|
|
border-right: 1px solid var(--border);
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow-y: auto;
|
|
padding: var(--space-sm) var(--space-sm);
|
|
gap: calc(var(--space-xs) / 2);
|
|
background: color-mix(in srgb, var(--text) 10%, transparent);
|
|
scrollbar-color: var(--border) transparent;
|
|
scrollbar-width: thin;
|
|
}
|
|
|
|
.settings-sidebar::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
|
|
.settings-sidebar::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
.settings-sidebar::-webkit-scrollbar-thumb {
|
|
background: var(--border);
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
|
|
.settings-sidebar::-webkit-scrollbar-thumb:hover {
|
|
background: var(--text-muted);
|
|
}
|
|
|
|
.settings-research-source-locked {
|
|
cursor: default;
|
|
color: var(--text-muted) !important;
|
|
}
|
|
|
|
.settings-research-source-locked input[type="checkbox"] {
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.settings-research-source-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: var(--space-sm);
|
|
min-width: 0;
|
|
}
|
|
|
|
.settings-research-source-grid > * {
|
|
min-width: 0;
|
|
}
|
|
|
|
.settings-research-limits-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: var(--space-sm);
|
|
min-width: 0;
|
|
}
|
|
|
|
.settings-research-limits-grid > * {
|
|
min-width: 0;
|
|
}
|
|
|
|
.settings-research-limit-field {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-xs);
|
|
min-width: 0;
|
|
}
|
|
|
|
.settings-research-limits-error {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.settings-research-source-grid,
|
|
.settings-research-limits-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
.settings-nav-item {
|
|
display: block;
|
|
width: 100%;
|
|
padding: var(--space-sm) var(--space-md);
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: var(--text-muted);
|
|
background: none;
|
|
border: none;
|
|
border-left: 3px solid transparent;
|
|
border-radius: 0 var(--radius-md) var(--radius-md) 0;
|
|
cursor: pointer;
|
|
text-align: left;
|
|
transition:
|
|
background var(--transition-fast),
|
|
color var(--transition-fast),
|
|
border-color var(--transition-fast);
|
|
}
|
|
.settings-nav-item:hover {
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
border-left-color: var(--border);
|
|
}
|
|
.settings-nav-item:focus-visible {
|
|
box-shadow: var(--focus-ring-strong);
|
|
outline: none;
|
|
}
|
|
.settings-nav-item.active {
|
|
background: var(--bg);
|
|
color: var(--todo);
|
|
font-weight: 600;
|
|
border-left-color: var(--todo);
|
|
}
|
|
|
|
/* Settings group headers - visual separators between global and project sections */
|
|
.settings-group-header {
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
color: var(--text-muted);
|
|
padding: var(--space-md) var(--space-md) var(--space-xs);
|
|
margin-top: var(--space-sm);
|
|
user-select: none;
|
|
}
|
|
.settings-group-header:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.settings-content {
|
|
flex: 1;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
padding: var(--space-md) var(--space-xl) var(--space-lg);
|
|
scrollbar-color: var(--border) transparent;
|
|
scrollbar-width: thin;
|
|
}
|
|
|
|
.settings-content::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
|
|
.settings-content::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
.settings-content::-webkit-scrollbar-thumb {
|
|
background: var(--border);
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
|
|
.settings-content::-webkit-scrollbar-thumb:hover {
|
|
background: var(--text-muted);
|
|
}
|
|
.settings-content > * {
|
|
animation: settingsFadeIn var(--duration-normal) ease;
|
|
}
|
|
@keyframes settingsFadeIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(4px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
/*
|
|
FNXC:SettingsMobile 2026-06-23-09:02:
|
|
Settings section headings should preserve hierarchy through spacing and type only. Avoid per-heading divider borders so mobile and desktop shared Settings sections keep the lighter scrollbar-focused chrome contract.
|
|
*/
|
|
.settings-section-heading {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
padding: var(--space-lg) 0 var(--space-md);
|
|
margin: 0 0 var(--space-md);
|
|
color: var(--text);
|
|
}
|
|
|
|
/* First heading inside the section drops top padding to remove a redundant
|
|
gap stacked on top of the settings-content container's own top padding. */
|
|
.settings-content > .settings-section-heading:first-child,
|
|
.settings-modal-section > .settings-section-heading:first-child {
|
|
padding-top: var(--space-md);
|
|
}
|
|
|
|
/* Spacing modifier for settings-section-heading that need extra top margin */
|
|
.settings-section-heading--spaced {
|
|
margin-top: var(--space-lg);
|
|
}
|
|
|
|
.settings-section-description {
|
|
margin: 0;
|
|
margin-bottom: var(--space-sm);
|
|
color: var(--text-muted);
|
|
font-size: 13px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.settings-plugins-subsection-toggle {
|
|
display: inline-flex;
|
|
gap: var(--space-xs);
|
|
margin: var(--space-md) 0;
|
|
}
|
|
|
|
.settings-plugins-subsection-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: var(--btn-border-width) solid var(--border);
|
|
border-radius: var(--radius-pill);
|
|
background: var(--surface);
|
|
color: var(--text-muted);
|
|
font-size: 0.85rem;
|
|
font-weight: 600;
|
|
padding: var(--space-xs) var(--space-md);
|
|
cursor: pointer;
|
|
transition:
|
|
background var(--transition-fast),
|
|
color var(--transition-fast),
|
|
border-color var(--transition-fast),
|
|
box-shadow var(--transition-fast);
|
|
}
|
|
|
|
.settings-plugins-subsection-btn:hover {
|
|
background: var(--surface-hover, color-mix(in srgb, var(--text) 6%, transparent));
|
|
color: var(--text);
|
|
}
|
|
|
|
.settings-plugins-subsection-btn:focus-visible {
|
|
outline: none;
|
|
box-shadow: var(--focus-ring-strong);
|
|
}
|
|
|
|
.settings-plugins-subsection-btn.active {
|
|
background: color-mix(in srgb, var(--todo) 14%, transparent);
|
|
border-color: color-mix(in srgb, var(--todo) 45%, var(--border));
|
|
color: var(--todo);
|
|
}
|
|
|
|
.settings-plugins-subsection-panel {
|
|
padding-bottom: var(--space-md);
|
|
}
|
|
|
|
/* Scope indicators in sidebar nav items */
|
|
.settings-scope-icon {
|
|
margin-right: 6px;
|
|
display: inline-flex;
|
|
vertical-align: middle;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* Scope banner above section content */
|
|
.settings-scope-banner {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-sm);
|
|
padding: var(--space-sm) var(--space-xl);
|
|
margin: 0 var(--space-xl) var(--space-xs);
|
|
font-size: 12px;
|
|
border-radius: var(--radius-md);
|
|
color: var(--text-muted);
|
|
}
|
|
.settings-scope-global {
|
|
background: color-mix(in srgb, var(--color-info) 8%, transparent);
|
|
border-left: 3px solid color-mix(in srgb, var(--color-info) 40%, transparent);
|
|
}
|
|
.settings-scope-project {
|
|
background: color-mix(in srgb, var(--color-success) 8%, transparent);
|
|
border-left: 3px solid color-mix(in srgb, var(--color-success) 40%, transparent);
|
|
}
|
|
.settings-scope-mixed {
|
|
background: color-mix(in srgb, var(--triage) 8%, transparent);
|
|
border-left: 3px solid color-mix(in srgb, var(--triage) 40%, transparent);
|
|
}
|
|
|
|
/* Helper note styling for Settings sections — aligns with form-group horizontal gutters */
|
|
.settings-note {
|
|
display: block;
|
|
padding: 0 var(--space-xl);
|
|
margin-top: var(--space-xs);
|
|
font-size: 12px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* Inline text input + secondary action ("Use dropdown") for fields that
|
|
sometimes want a free-text fallback. */
|
|
.form-inline-group {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-sm);
|
|
}
|
|
.form-inline-group .input {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
.btn-link {
|
|
background: none;
|
|
border: none;
|
|
padding: 0;
|
|
font-size: 12px;
|
|
color: var(--accent, #4a90e2);
|
|
cursor: pointer;
|
|
text-decoration: underline;
|
|
white-space: nowrap;
|
|
}
|
|
.btn-link:hover {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.settings-overlap-ignore-group code {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.settings-button-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--space-sm);
|
|
margin-top: var(--space-sm);
|
|
}
|
|
|
|
.settings-raw-output {
|
|
margin: var(--space-sm) 0 0;
|
|
padding: var(--space-sm);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--surface);
|
|
color: var(--text-muted);
|
|
max-height: calc(var(--space-2xl) * 7);
|
|
overflow: auto;
|
|
font-family: var(--font-mono);
|
|
font-size: calc(var(--space-sm) + var(--space-xs));
|
|
}
|
|
|
|
.settings-url-output {
|
|
display: block;
|
|
margin-top: var(--space-xs);
|
|
padding: var(--space-sm);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--surface);
|
|
color: var(--text-muted);
|
|
font-family: var(--font-mono);
|
|
font-size: calc(var(--space-sm) + var(--space-xs));
|
|
overflow-wrap: anywhere;
|
|
word-break: break-word;
|
|
overflow-x: auto;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.settings-qr-preview {
|
|
margin-top: var(--space-sm);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-sm);
|
|
}
|
|
|
|
.settings-qr-preview-label {
|
|
margin: 0;
|
|
font-size: calc(var(--space-sm) + var(--space-xs));
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.settings-qr-preview-image-wrap {
|
|
width: fit-content;
|
|
max-width: 100%;
|
|
padding: var(--space-sm);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--card);
|
|
}
|
|
|
|
.settings-qr-preview-image {
|
|
display: block;
|
|
width: min(calc(var(--space-2xl) * 6), 100%);
|
|
height: auto;
|
|
aspect-ratio: 1 / 1;
|
|
}
|
|
|
|
.remote-provider-selector {
|
|
display: flex;
|
|
gap: var(--space-xs);
|
|
border: var(--btn-border-width) solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
padding: var(--space-xs);
|
|
background: var(--surface);
|
|
}
|
|
|
|
.remote-provider-option {
|
|
position: relative;
|
|
flex: 1;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.remote-provider-option input {
|
|
position: absolute;
|
|
opacity: 0;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
.remote-provider-option span {
|
|
display: block;
|
|
padding: var(--space-sm) var(--space-md);
|
|
text-align: center;
|
|
border-radius: var(--radius-sm);
|
|
border: var(--btn-border-width) solid transparent;
|
|
color: var(--text-muted);
|
|
transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
|
|
}
|
|
|
|
.remote-provider-option-content {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--space-xs);
|
|
}
|
|
|
|
.remote-provider-option input:checked + span {
|
|
background: var(--card);
|
|
color: var(--text);
|
|
border-color: var(--border);
|
|
}
|
|
|
|
.remote-provider-option input:focus-visible + span {
|
|
box-shadow: var(--focus-ring-strong);
|
|
}
|
|
|
|
.remote-status-bar {
|
|
--status-color: var(--text-muted);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-sm);
|
|
padding: var(--space-sm) var(--space-md);
|
|
border-radius: var(--radius-md);
|
|
margin: 0 var(--space-xl) var(--space-md);
|
|
background: color-mix(in srgb, var(--status-color) 10%, transparent);
|
|
}
|
|
|
|
.remote-status-bar--running {
|
|
--status-color: var(--color-success);
|
|
}
|
|
|
|
.remote-status-bar--starting {
|
|
--status-color: var(--color-warning);
|
|
}
|
|
|
|
.remote-status-bar--error {
|
|
--status-color: var(--color-error);
|
|
}
|
|
|
|
.remote-status-bar--stopped {
|
|
--status-color: var(--text-muted);
|
|
}
|
|
|
|
.remote-share-block {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-sm);
|
|
margin: 0 var(--space-xl) var(--space-md);
|
|
padding: var(--space-sm) var(--space-md);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
background: color-mix(in srgb, var(--text-muted) 5%, transparent);
|
|
}
|
|
|
|
.remote-share-row {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-xs);
|
|
}
|
|
|
|
.remote-share-row .settings-qr-preview-image {
|
|
margin-top: var(--space-xs);
|
|
}
|
|
|
|
.remote-status-dot {
|
|
width: var(--space-sm);
|
|
height: var(--space-sm);
|
|
border-radius: 50%;
|
|
display: inline-block;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.remote-status-dot--running {
|
|
background: var(--color-success);
|
|
}
|
|
|
|
.remote-status-dot--starting {
|
|
background: var(--color-warning);
|
|
}
|
|
|
|
.remote-status-dot--error {
|
|
background: var(--color-error);
|
|
}
|
|
|
|
.remote-status-dot--stopped {
|
|
background: var(--text-muted);
|
|
}
|
|
|
|
.remote-status-url {
|
|
margin-left: auto;
|
|
font-family: var(--font-mono);
|
|
overflow-wrap: anywhere;
|
|
word-break: break-word;
|
|
user-select: all;
|
|
}
|
|
|
|
.remote-provider-settings {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-sm);
|
|
}
|
|
|
|
.remote-cli-detection {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: var(--space-sm);
|
|
margin: 0 var(--space-xl) var(--space-md);
|
|
padding: var(--space-sm) var(--space-md);
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
|
|
.remote-cli-detection--available {
|
|
background: color-mix(in srgb, var(--color-success) 10%, transparent);
|
|
color: var(--color-success);
|
|
}
|
|
|
|
.remote-cli-detection--missing {
|
|
background: color-mix(in srgb, var(--color-warning) 10%, transparent);
|
|
color: var(--color-warning);
|
|
}
|
|
|
|
.remote-cli-detection-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-xs);
|
|
color: var(--text);
|
|
}
|
|
|
|
.remote-cli-detection .btn {
|
|
align-self: flex-start;
|
|
}
|
|
|
|
.remote-cli-install-error {
|
|
color: var(--color-error);
|
|
}
|
|
|
|
.remote-cli-manual {
|
|
color: var(--text-dim);
|
|
}
|
|
|
|
.remote-external-tunnel-panel {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-sm);
|
|
margin: 0 var(--space-xl) var(--space-md);
|
|
padding: var(--space-sm) var(--space-md);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
background: color-mix(in srgb, var(--color-info) 10%, transparent);
|
|
}
|
|
|
|
.remote-external-tunnel-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-sm);
|
|
color: var(--color-info);
|
|
}
|
|
|
|
.remote-external-tunnel-qr {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-xs);
|
|
}
|
|
|
|
.remote-external-tunnel-actions {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-sm);
|
|
}
|
|
|
|
.remote-advanced-details {
|
|
margin: var(--space-lg) var(--space-xl) 0;
|
|
border: var(--btn-border-width) solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
padding: var(--space-md);
|
|
background: var(--surface);
|
|
}
|
|
|
|
.remote-advanced-details > summary {
|
|
cursor: pointer;
|
|
color: var(--text-muted);
|
|
font-size: calc(var(--space-sm) + var(--space-xs));
|
|
list-style: none;
|
|
}
|
|
|
|
.remote-advanced-details > summary::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
|
|
.remote-advanced-details > summary::before {
|
|
content: "▸";
|
|
margin-right: var(--space-xs);
|
|
}
|
|
|
|
.remote-advanced-details[open] > summary::before {
|
|
content: "▾";
|
|
}
|
|
|
|
.settings-option-details {
|
|
margin-top: var(--space-xs);
|
|
}
|
|
|
|
.settings-research-provider-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-sm);
|
|
min-width: 0;
|
|
}
|
|
|
|
.settings-research-provider-advanced-details {
|
|
min-width: 0;
|
|
padding-inline-start: var(--space-md);
|
|
}
|
|
|
|
.settings-research-provider-advanced-body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-sm);
|
|
min-width: 0;
|
|
padding-top: var(--space-sm);
|
|
}
|
|
|
|
.settings-research-provider-advanced-body > .form-group {
|
|
margin-top: 0;
|
|
padding: 0;
|
|
min-width: 0;
|
|
}
|
|
|
|
.settings-research-provider-advanced-body .input {
|
|
width: 100%;
|
|
min-width: 0;
|
|
}
|
|
|
|
.settings-research-empty-state {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: var(--space-sm);
|
|
min-width: 0;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.settings-research-provider-advanced-details {
|
|
padding-inline-start: 0;
|
|
}
|
|
}
|
|
|
|
.settings-option-details > summary {
|
|
cursor: pointer;
|
|
color: var(--text-muted);
|
|
font-size: calc(var(--space-sm) + var(--space-xs));
|
|
list-style: none;
|
|
}
|
|
|
|
.settings-option-details > summary::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
|
|
.settings-option-details > summary::before {
|
|
content: "▸";
|
|
margin-right: var(--space-xs);
|
|
}
|
|
|
|
.settings-option-details[open] > summary::before {
|
|
content: "▾";
|
|
}
|
|
|
|
.remote-cf-advanced-details {
|
|
margin-top: var(--space-xs);
|
|
}
|
|
|
|
.remote-cf-advanced-details > summary {
|
|
cursor: pointer;
|
|
color: var(--text-muted);
|
|
font-size: calc(var(--space-sm) + var(--space-xs));
|
|
list-style: none;
|
|
}
|
|
|
|
.remote-cf-advanced-details > summary::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
|
|
.remote-cf-advanced-details > summary::before {
|
|
content: "▸";
|
|
margin-right: var(--space-xs);
|
|
}
|
|
|
|
.remote-cf-advanced-details[open] > summary::before {
|
|
content: "▾";
|
|
}
|
|
|
|
.remote-cf-advanced-fields {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-sm);
|
|
margin-top: var(--space-sm);
|
|
}
|
|
|
|
.remote-tunnel-actions {
|
|
margin-top: var(--space-md);
|
|
}
|
|
|
|
.remote-tunnel-actions .btn {
|
|
width: 100%;
|
|
}
|
|
|
|
.settings-overlap-ignore-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-sm);
|
|
margin: var(--space-sm) 0;
|
|
}
|
|
|
|
.settings-overlap-ignore-row {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
gap: var(--space-sm);
|
|
align-items: center;
|
|
}
|
|
|
|
.settings-overlap-ignore-path-controls {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
gap: var(--space-sm);
|
|
align-items: center;
|
|
}
|
|
|
|
.settings-overlap-path-picker-modal {
|
|
max-width: min(960px, calc(100vw - var(--space-2xl)));
|
|
}
|
|
|
|
.settings-overlap-path-picker-body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-sm);
|
|
max-height: min(70vh, 720px);
|
|
}
|
|
|
|
.settings-overlap-path-picker-note {
|
|
margin: 0;
|
|
font-size: 12px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.settings-section-divider {
|
|
border-top: 1px solid var(--border);
|
|
margin: var(--space-lg) var(--space-xl);
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.settings-note {
|
|
padding: 0 var(--space-lg);
|
|
}
|
|
|
|
.settings-overlap-ignore-row {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
|
|
.settings-overlap-ignore-path-controls {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
|
|
.settings-overlap-ignore-row > .btn {
|
|
justify-self: start;
|
|
}
|
|
|
|
.settings-overlap-path-picker-modal {
|
|
max-width: calc(100vw - var(--space-md));
|
|
}
|
|
|
|
.remote-provider-selector {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.remote-status-bar {
|
|
flex-wrap: wrap;
|
|
margin: 0 var(--space-lg) var(--space-md);
|
|
}
|
|
|
|
.remote-share-block {
|
|
margin: 0 var(--space-lg) var(--space-md);
|
|
}
|
|
|
|
.remote-status-url {
|
|
width: 100%;
|
|
margin-left: 0;
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
.remote-provider-option {
|
|
min-height: 36px;
|
|
}
|
|
|
|
.remote-tunnel-actions .btn {
|
|
min-height: 36px;
|
|
}
|
|
|
|
.remote-cli-detection {
|
|
margin: 0 var(--space-lg) var(--space-md);
|
|
}
|
|
|
|
.remote-external-tunnel-panel {
|
|
margin: 0 var(--space-lg) var(--space-md);
|
|
}
|
|
}
|
|
|
|
/* === Notifications Settings === */
|
|
.ntfy-advanced-disclosure {
|
|
margin-top: var(--space-md);
|
|
border: var(--btn-border-width) solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
background: var(--surface);
|
|
}
|
|
|
|
.ntfy-advanced-disclosure > summary {
|
|
cursor: pointer;
|
|
list-style: none;
|
|
padding: var(--space-sm) var(--space-md);
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: var(--text);
|
|
}
|
|
|
|
.ntfy-advanced-disclosure > summary::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
|
|
.ntfy-advanced-content {
|
|
padding: 0 var(--space-md) var(--space-md);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-sm);
|
|
}
|
|
|
|
.settings-inline-link {
|
|
color: var(--todo);
|
|
text-decoration: none;
|
|
transition: text-decoration var(--transition-fast);
|
|
}
|
|
|
|
.settings-inline-link:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.settings-inline-link:focus-visible {
|
|
outline: none;
|
|
box-shadow: var(--focus-ring-strong);
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
|
|
/**
|
|
* Notification provider cards:
|
|
* reusable container pattern for per-provider notification configuration
|
|
* (ntfy, webhook, and future providers).
|
|
*/
|
|
.notification-provider-card {
|
|
border: var(--btn-border-width) solid var(--border);
|
|
border-radius: var(--radius-lg);
|
|
background: var(--surface);
|
|
margin: 0 var(--space-xl) var(--space-lg);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.notification-provider-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: var(--space-md) var(--space-lg);
|
|
border-bottom: var(--btn-border-width) solid var(--border);
|
|
}
|
|
|
|
.notification-provider-body {
|
|
padding: var(--space-lg);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-lg);
|
|
}
|
|
|
|
.notification-provider-actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--space-sm);
|
|
padding-top: var(--space-md);
|
|
border-top: var(--btn-border-width) solid var(--border);
|
|
margin-top: var(--space-md);
|
|
}
|
|
|
|
.notification-test-feedback {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-xs);
|
|
margin-top: var(--space-sm);
|
|
}
|
|
|
|
.notification-test-feedback-item {
|
|
border: var(--btn-border-width) solid var(--border);
|
|
border-radius: var(--radius-sm);
|
|
padding: var(--space-xs) var(--space-sm);
|
|
}
|
|
|
|
.notification-test-feedback-item--success {
|
|
border-color: color-mix(in srgb, var(--color-success) 45%, var(--border));
|
|
background: color-mix(in srgb, var(--color-success) 8%, transparent);
|
|
color: var(--color-success);
|
|
}
|
|
|
|
.notification-test-feedback-item--error {
|
|
border-color: color-mix(in srgb, var(--color-error) 45%, var(--border));
|
|
background: color-mix(in srgb, var(--color-error) 8%, transparent);
|
|
color: var(--color-error);
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.notification-provider-actions {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.notification-provider-actions .btn {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
/* === Memory Settings === */
|
|
.memory-status-message {
|
|
display: flex;
|
|
gap: var(--space-md);
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: var(--space-md);
|
|
}
|
|
|
|
.memory-status-message span {
|
|
min-width: 0;
|
|
}
|
|
|
|
.memory-retrieval-test {
|
|
margin-top: var(--space-lg);
|
|
}
|
|
|
|
.memory-test-result {
|
|
margin: 0 var(--space-xl) var(--space-lg);
|
|
padding: var(--space-md);
|
|
border: var(--btn-border-width) solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
background: var(--card);
|
|
}
|
|
|
|
.memory-test-result strong,
|
|
.memory-test-result span {
|
|
color: var(--text);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.memory-test-result small {
|
|
display: block;
|
|
margin-top: var(--space-xs);
|
|
color: var(--text-muted);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.memory-test-result ul {
|
|
margin: var(--space-md) 0 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.memory-test-result li {
|
|
padding-top: var(--space-sm);
|
|
border-top: var(--btn-border-width) solid var(--border);
|
|
}
|
|
|
|
.memory-test-result li + li {
|
|
margin-top: var(--space-sm);
|
|
}
|
|
|
|
.memory-test-result p {
|
|
margin: var(--space-xs) 0 0;
|
|
color: var(--text-muted);
|
|
font-size: 12px;
|
|
line-height: 1.5;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.memory-editor-section {
|
|
margin-top: var(--space-lg);
|
|
display: flex;
|
|
flex: 1 1 auto;
|
|
flex-direction: column;
|
|
min-height: 0;
|
|
}
|
|
|
|
.memory-editor-form-group {
|
|
display: flex;
|
|
flex: 1 1 auto;
|
|
flex-direction: column;
|
|
min-height: 0;
|
|
}
|
|
|
|
.memory-file-summary {
|
|
display: grid;
|
|
grid-template-columns: auto minmax(0, 1fr);
|
|
gap: var(--space-xs) var(--space-md);
|
|
align-items: center;
|
|
margin: 0 var(--space-xl) var(--space-md);
|
|
padding: var(--space-md);
|
|
border: var(--btn-border-width) solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
background: var(--card);
|
|
}
|
|
|
|
.memory-file-summary span {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: var(--space-xs) var(--space-sm);
|
|
border-radius: var(--radius-pill);
|
|
color: var(--color-info);
|
|
background: color-mix(in srgb, var(--color-info) 12%, transparent);
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.memory-file-summary strong {
|
|
min-width: 0;
|
|
overflow-wrap: anywhere;
|
|
color: var(--text);
|
|
font-family: var(--font-mono);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.memory-file-summary small {
|
|
grid-column: 2;
|
|
color: var(--text-muted);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.memory-editor-frame {
|
|
min-height: 50vh;
|
|
border: var(--btn-border-width) solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex: 1 1 auto;
|
|
flex-direction: column;
|
|
min-width: 0;
|
|
}
|
|
|
|
/* === Auth Provider Cards === */
|
|
|
|
/* Horizontal gutter wrapper for the auth section body. Tighter than the
|
|
default form-group gutter so each provider card gets more horizontal room
|
|
— the cards are dense enough that the wider --space-xl gutter wasted
|
|
visible width without any visual benefit. */
|
|
.auth-panel-body {
|
|
padding-inline: var(--space-md);
|
|
}
|
|
|
|
.auth-section-hint {
|
|
padding: var(--space-md) var(--space-lg);
|
|
margin-bottom: var(--space-md);
|
|
background: var(--bg-tertiary);
|
|
border-radius: var(--radius-md);
|
|
font-size: 13px;
|
|
color: var(--text-muted);
|
|
border-left: 3px solid var(--text-muted);
|
|
}
|
|
.auth-provider-group {
|
|
margin-bottom: calc(var(--space-sm) + var(--space-xs) / 2);
|
|
}
|
|
.auth-group-label {
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
color: var(--text-muted);
|
|
margin-bottom: var(--space-xs);
|
|
padding: 0 4px;
|
|
}
|
|
.auth-provider-card {
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
margin-bottom: var(--space-xs);
|
|
overflow: hidden;
|
|
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
|
|
}
|
|
.auth-provider-card:hover {
|
|
border-color: var(--text-dim);
|
|
}
|
|
.auth-provider-card--authenticated {
|
|
border-color: color-mix(in srgb, var(--color-success) 40%, var(--border));
|
|
background: color-mix(in srgb, var(--color-success) 5%, var(--surface));
|
|
}
|
|
.auth-provider-card--authenticated:hover {
|
|
border-color: color-mix(in srgb, var(--color-success) 60%, var(--border));
|
|
}
|
|
.auth-provider-header {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: var(--space-sm) var(--space-md);
|
|
gap: 12px;
|
|
}
|
|
.auth-provider-info {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
.auth-provider-info strong {
|
|
font-weight: 500;
|
|
color: var(--text);
|
|
}
|
|
.auth-provider-icon-slot {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
inline-size: calc(var(--space-md) + var(--space-xs) * 2);
|
|
block-size: calc(var(--space-md) + var(--space-xs) * 2);
|
|
flex-shrink: 0;
|
|
}
|
|
.auth-provider-icon-slot .provider-icon {
|
|
display: inline-flex;
|
|
}
|
|
.auth-hint {
|
|
display: block;
|
|
padding: 12px 4px 0;
|
|
font-size: 12px;
|
|
color: var(--text-muted);
|
|
border-top: 1px solid var(--border);
|
|
margin-top: 8px;
|
|
}
|
|
.auth-apikey-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-xs);
|
|
align-items: flex-end;
|
|
flex-shrink: 0;
|
|
}
|
|
.auth-apikey-input-row {
|
|
display: flex;
|
|
gap: 6px;
|
|
align-items: center;
|
|
}
|
|
.auth-apikey-input {
|
|
background: var(--surface-1);
|
|
border: 1px solid var(--border);
|
|
border-radius: 6px;
|
|
color: var(--text);
|
|
padding: 6px 10px;
|
|
font-size: 13px;
|
|
width: 180px;
|
|
font-family: monospace;
|
|
}
|
|
.auth-apikey-input:focus {
|
|
outline: none;
|
|
border-color: var(--todo);
|
|
box-shadow: var(--focus-ring);
|
|
}
|
|
.auth-apikey-input:disabled {
|
|
opacity: 0.6;
|
|
}
|
|
.auth-apikey-progress {
|
|
font-size: calc(var(--space-sm) + var(--space-xs) * 0.75);
|
|
color: var(--text-muted);
|
|
padding-right: 4px;
|
|
}
|
|
.auth-apikey-error {
|
|
font-size: 11px;
|
|
color: var(--color-error);
|
|
padding-right: 4px;
|
|
}
|
|
.auth-provider-actions-row {
|
|
display: flex;
|
|
width: 100%;
|
|
align-items: center;
|
|
gap: var(--space-sm);
|
|
}
|
|
|
|
.auth-device-code-panel {
|
|
width: 100%;
|
|
margin-top: var(--space-sm);
|
|
padding: var(--space-sm);
|
|
border: var(--btn-border-width) solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
background: color-mix(in srgb, var(--surface) 85%, transparent);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-sm);
|
|
}
|
|
|
|
.auth-device-code-pill {
|
|
font-family: var(--font-mono);
|
|
font-size: calc(var(--space-md) + var(--space-xs) * 0.5);
|
|
letter-spacing: var(--space-xs);
|
|
padding: var(--space-sm) var(--space-md);
|
|
border-radius: var(--radius-pill);
|
|
border: var(--btn-border-width) solid var(--border);
|
|
background: var(--card);
|
|
color: var(--text);
|
|
display: flex;
|
|
align-self: stretch;
|
|
}
|
|
|
|
/* === Key Hint === */
|
|
.auth-key-hint {
|
|
font-family: var(--font-mono);
|
|
font-size: 12px;
|
|
color: var(--text-muted);
|
|
display: inline-block;
|
|
margin-top: var(--space-xs);
|
|
user-select: none;
|
|
}
|
|
/* === Model Lane Status Badges === */
|
|
.settings-lane-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 2px 8px;
|
|
border-radius: 10px;
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.settings-lane-badge--override {
|
|
background-color: color-mix(in srgb, var(--todo) 20%, transparent);
|
|
color: var(--todo);
|
|
}
|
|
|
|
.settings-lane-badge--inherited {
|
|
background-color: color-mix(in srgb, var(--text-muted) 15%, transparent);
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/*
|
|
FNXC:SettingsScopeGrouping 2026-06-25-10:42:
|
|
Mobile settings must make clear which controls are global (all projects) vs project-scoped; group scheduling fields under labeled Global/This-project subheadings with a scope badge so operators don't mistake the global concurrency cap for a per-project setting.
|
|
The header row wraps so the badge drops below the heading on narrow widths instead of overflowing.
|
|
*/
|
|
.settings-scope-group {
|
|
margin-top: var(--space-md);
|
|
}
|
|
|
|
.settings-scope-group-header {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: var(--space-sm);
|
|
}
|
|
|
|
.settings-scope-group-header .settings-section-heading {
|
|
padding-bottom: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.settings-scope-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 2px 8px;
|
|
border-radius: 10px;
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.settings-scope-badge--global {
|
|
background-color: color-mix(in srgb, var(--accent, #4a90e2) 18%, transparent);
|
|
color: var(--accent, #4a90e2);
|
|
}
|
|
|
|
.settings-scope-badge--project {
|
|
background-color: color-mix(in srgb, var(--text-muted) 15%, transparent);
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.settings-scope-caption {
|
|
display: block;
|
|
margin: var(--space-xs) 0 var(--space-md);
|
|
color: var(--text-muted);
|
|
font-size: 12px;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.settings-description {
|
|
font-size: 13px;
|
|
color: var(--text-dim);
|
|
padding-inline: var(--space-xl);
|
|
margin-block: 0 var(--space-md);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.settings-token-cap-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-sm);
|
|
}
|
|
|
|
.settings-model-lane-label-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-sm);
|
|
margin-bottom: var(--space-xs);
|
|
}
|
|
|
|
.settings-model-lane-control-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-sm);
|
|
}
|
|
|
|
.settings-model-lane-control-main {
|
|
flex: 1;
|
|
}
|
|
|
|
.settings-model-lane-actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: var(--space-sm);
|
|
padding: var(--space-md) var(--space-xl) var(--space-lg);
|
|
margin-block: var(--space-sm) var(--space-lg);
|
|
border-bottom: var(--btn-border-width) solid var(--border);
|
|
}
|
|
|
|
.settings-error {
|
|
color: var(--color-error);
|
|
}
|
|
|
|
.settings-summarization-actions {
|
|
justify-content: flex-start;
|
|
}
|
|
/* === Settings: Model Presets === */
|
|
.settings-model-presets {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-md);
|
|
}
|
|
|
|
.settings-preset-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-sm);
|
|
}
|
|
|
|
.settings-preset-item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: var(--space-md);
|
|
padding: var(--space-md);
|
|
border: var(--btn-border-width) solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
background: var(--card);
|
|
}
|
|
|
|
.settings-preset-item-meta {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-xs);
|
|
min-width: 0;
|
|
}
|
|
|
|
.settings-preset-item-meta strong {
|
|
color: var(--text);
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.settings-preset-summary {
|
|
font-size: 12px;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.settings-preset-item-actions {
|
|
display: flex;
|
|
gap: var(--space-xs);
|
|
flex-wrap: wrap;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.settings-preset-actions {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.settings-preset-editor {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-md);
|
|
padding: var(--space-md);
|
|
border: var(--btn-border-width) solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
background: color-mix(in srgb, var(--surface) 85%, var(--card));
|
|
}
|
|
|
|
.settings-preset-editor-fields {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-sm);
|
|
}
|
|
|
|
.settings-preset-editor .form-group {
|
|
padding: 0;
|
|
}
|
|
|
|
.settings-preset-editor-actions {
|
|
justify-content: flex-start;
|
|
margin-top: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.settings-preset-auto-select {
|
|
margin-top: var(--space-sm);
|
|
}
|
|
|
|
.settings-preset-size-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: var(--space-sm);
|
|
}
|
|
|
|
.settings-preset-size-row {
|
|
padding: 0;
|
|
}
|
|
|
|
|
|
@media (max-width: 768px) {
|
|
/* Settings modal: use the section picker as the only mobile navigation */
|
|
.settings-layout {
|
|
flex-direction: column;
|
|
min-height: 0;
|
|
}
|
|
|
|
.settings-mobile-section-picker {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-xs);
|
|
padding: var(--space-md) var(--space-lg);
|
|
border-bottom: var(--btn-border-width) solid var(--border);
|
|
background: var(--surface);
|
|
}
|
|
|
|
.settings-mobile-section-picker label {
|
|
color: var(--text-muted);
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.settings-mobile-section-picker select {
|
|
width: 100%;
|
|
}
|
|
|
|
.settings-mobile-section-picker select:focus-visible {
|
|
outline: none;
|
|
border-color: var(--todo);
|
|
box-shadow: var(--focus-ring-strong);
|
|
}
|
|
|
|
.settings-sidebar {
|
|
display: none;
|
|
}
|
|
|
|
.settings-nav-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--space-xs);
|
|
border-left: none;
|
|
border-bottom: 2px solid transparent;
|
|
border-radius: var(--radius-md) var(--radius-md) 0 0;
|
|
padding: calc(var(--space-xs) + var(--space-xs) / 2) var(--space-md);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.settings-nav-item:hover {
|
|
border-left-color: transparent;
|
|
border-bottom-color: var(--border);
|
|
}
|
|
|
|
.settings-nav-item.active {
|
|
border-left-color: transparent;
|
|
border-bottom-color: var(--todo);
|
|
}
|
|
|
|
/* Hide group headers on mobile - they don't fit well in horizontal scroll row */
|
|
.settings-group-header {
|
|
display: none;
|
|
}
|
|
|
|
.notification-provider-card {
|
|
margin: 0 var(--space-lg) var(--space-md);
|
|
}
|
|
|
|
.notification-provider-header {
|
|
padding: var(--space-sm) var(--space-md);
|
|
}
|
|
|
|
.notification-provider-body {
|
|
padding: var(--space-md);
|
|
}
|
|
|
|
.settings-scope-icon {
|
|
margin-right: 0;
|
|
}
|
|
|
|
.settings-content {
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.settings-content .form-group small {
|
|
overflow-wrap: break-word;
|
|
word-break: normal;
|
|
}
|
|
|
|
.settings-content input,
|
|
.settings-content select,
|
|
.settings-content textarea {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.settings-section-heading {
|
|
padding: var(--space-lg) var(--space-lg) var(--space-md);
|
|
margin: 0 0 var(--space-md);
|
|
}
|
|
|
|
.settings-plugins-subsection-toggle {
|
|
display: flex;
|
|
width: 100%;
|
|
padding: 0 var(--space-lg);
|
|
}
|
|
|
|
.settings-plugins-subsection-btn {
|
|
flex: 1;
|
|
min-height: 36px;
|
|
}
|
|
|
|
.settings-plugins-subsection-panel {
|
|
padding-left: var(--space-lg);
|
|
padding-right: var(--space-lg);
|
|
}
|
|
|
|
.form-group {
|
|
padding: 0 calc(var(--space-md) + var(--space-xs) / 2);
|
|
}
|
|
|
|
.settings-scope-banner {
|
|
padding: var(--space-sm) var(--space-lg);
|
|
}
|
|
|
|
.memory-editor-frame {
|
|
min-height: 65vh;
|
|
}
|
|
|
|
.memory-file-summary {
|
|
grid-template-columns: 1fr;
|
|
margin: 0 var(--space-lg) var(--space-md);
|
|
}
|
|
|
|
.memory-status-message {
|
|
align-items: stretch;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.memory-file-summary span {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.memory-file-summary small {
|
|
grid-column: auto;
|
|
}
|
|
|
|
.settings-description {
|
|
padding: 0 var(--space-lg);
|
|
}
|
|
|
|
.settings-model-lane-actions {
|
|
align-items: stretch;
|
|
flex-direction: column;
|
|
padding-inline: calc(var(--space-md) + var(--space-xs) / 2);
|
|
}
|
|
|
|
.settings-content .btn,
|
|
.settings-preset-item-actions .btn {
|
|
min-height: 36px;
|
|
}
|
|
|
|
.auth-provider-row {
|
|
flex-wrap: wrap;
|
|
padding: var(--space-md) calc(var(--space-md) + var(--space-xs) / 2);
|
|
gap: var(--space-sm);
|
|
}
|
|
|
|
.auth-section-hint {
|
|
margin: 0 calc(var(--space-md) + var(--space-xs) / 2) var(--space-md);
|
|
padding: calc(var(--space-sm) + var(--space-xs) / 2) calc(var(--space-md) + var(--space-xs) / 2);
|
|
}
|
|
|
|
.auth-provider-group {
|
|
margin-bottom: var(--space-md);
|
|
}
|
|
|
|
.auth-group-label {
|
|
padding: 0 calc(var(--space-md) + var(--space-xs) / 2);
|
|
}
|
|
|
|
.auth-provider-card {
|
|
margin: 0 calc(var(--space-md) + var(--space-xs) / 2) var(--space-sm);
|
|
}
|
|
|
|
.auth-provider-header {
|
|
flex-wrap: wrap;
|
|
padding: calc(var(--space-sm) + var(--space-xs) / 2) calc(var(--space-md) + var(--space-xs) / 2);
|
|
gap: 10px;
|
|
}
|
|
|
|
.auth-provider-header > div:not(.auth-provider-info):not(.auth-apikey-section) {
|
|
margin-left: auto;
|
|
}
|
|
|
|
.auth-provider-actions-row {
|
|
width: 100%;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.auth-device-code-panel {
|
|
width: 100%;
|
|
}
|
|
|
|
.auth-device-code-pill {
|
|
max-width: 100%;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.auth-provider-info {
|
|
width: 100%;
|
|
flex-basis: 100%;
|
|
}
|
|
|
|
.auth-apikey-section {
|
|
width: 100%;
|
|
flex-basis: 100%;
|
|
align-items: flex-end;
|
|
}
|
|
|
|
.auth-apikey-input-row {
|
|
width: 100%;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.auth-apikey-input {
|
|
flex: 1;
|
|
min-width: 120px;
|
|
width: auto;
|
|
}
|
|
|
|
.auth-apikey-input-row .btn {
|
|
flex-shrink: 0;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.auth-hint {
|
|
padding: var(--space-md) calc(var(--space-md) + var(--space-xs) / 2) 0;
|
|
}
|
|
|
|
/* Settings modal: model preset controls stack cleanly on narrow screens */
|
|
.settings-model-presets {
|
|
gap: var(--space-sm);
|
|
}
|
|
|
|
.settings-preset-item {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
padding: var(--space-sm) var(--space-md);
|
|
}
|
|
|
|
.settings-preset-item-actions {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.settings-preset-editor {
|
|
padding: var(--space-sm) var(--space-md);
|
|
}
|
|
|
|
.settings-preset-editor-actions {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.settings-preset-size-grid {
|
|
grid-template-columns: 1fr;
|
|
gap: var(--space-xs);
|
|
}
|
|
|
|
.settings-node-routing-note {
|
|
padding: var(--space-sm) var(--space-md);
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
|
|
/* Node Routing section */
|
|
.settings-node-routing-note {
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
padding: var(--space-md) var(--space-lg);
|
|
margin-top: var(--space-sm);
|
|
color: var(--text-muted);
|
|
font-size: 13px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.settings-node-status {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--space-xs);
|
|
margin-top: var(--space-sm);
|
|
font-size: 12px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.auth-advanced-disclosure {
|
|
margin-top: var(--space-md);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
background: var(--surface);
|
|
}
|
|
|
|
.auth-advanced-disclosure > summary {
|
|
cursor: pointer;
|
|
padding: var(--space-sm) var(--space-md);
|
|
}
|
|
|
|
.auth-advanced-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-sm);
|
|
padding: 0 var(--space-md) var(--space-md);
|
|
}
|
|
|
|
.auth-custom-provider-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: var(--space-sm);
|
|
}
|
|
|
|
.auth-custom-provider-actions {
|
|
display: flex;
|
|
gap: var(--space-sm);
|
|
}
|
|
|
|
.settings-warning-banner {
|
|
margin-top: var(--space-sm);
|
|
padding: var(--space-sm) var(--space-md);
|
|
border: 1px solid var(--color-warning);
|
|
border-radius: var(--radius-md);
|
|
background: color-mix(in srgb, var(--color-warning) 12%, transparent);
|
|
color: var(--text);
|
|
font-size: 0.875rem;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.settings-warning-banner strong {
|
|
color: var(--color-warning);
|
|
margin-right: var(--space-xs);
|
|
}
|
|
|
|
/* KTD-8: informational note at the bottom of the Node Sync section. */
|
|
.settings-sync-workflow-note {
|
|
margin-top: var(--space-md);
|
|
font-size: 0.875rem;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.auth-custom-provider-item {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.settings-warning-banner {
|
|
padding: var(--space-sm);
|
|
}
|
|
}
|