/* ══ Settings → Plugins (xBoard Hub). Loaded globally from App.razor . Scoped via .xb-* class prefix; uses --mw-* design tokens. Light = canonical; dark handled by additive body.dark-mode overrides at the bottom. ══ */ .xb-state { display: flex; align-items: center; gap: 14px; padding: var(--mw-s-8); } .xb-loading { justify-content: center; color: var(--mw-ink-500); font-size: var(--mw-text-md); } .xb-denied { color: var(--mw-ink-700); } .xb-denied i { font-size: 2rem; color: var(--mw-warning); } .xb-denied h2 { margin: 0 0 2px; font-family: var(--mw-font-serif); font-weight: 400; font-size: var(--mw-text-xl); color: var(--mw-ink-900); } .xb-denied p { margin: 0; color: var(--mw-ink-500); } .xb-spinner { width: 22px; height: 22px; border: 2.5px solid var(--mw-border); border-top-color: var(--mw-blue-600); border-radius: 50%; animation: xb-spin 0.7s linear infinite; } @keyframes xb-spin { to { transform: rotate(360deg); } } .xb-spin-i { display: inline-block; animation: xb-spin 0.7s linear infinite; } /* Flash */ .xb-flash { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--mw-r-md); margin-bottom: var(--mw-s-5); border-left: 4px solid transparent; font-size: var(--mw-text-md); } .xb-flash.is-ok { background: var(--mw-success-bg); color: #1a5a3c; border-left-color: var(--mw-success); } .xb-flash.is-error { background: var(--mw-critical-bg); color: #8a1f1f; border-left-color: var(--mw-critical); } .xb-flash > span { flex: 1; } .xb-flash i { flex-shrink: 0; font-size: 1.15em; } .xb-flash-close { background: transparent; border: 0; cursor: pointer; color: inherit; opacity: 0.6; min-width: 40px; min-height: 40px; border-radius: var(--mw-r-sm); transition: opacity 0.15s ease, background 0.15s ease; } .xb-flash-close:hover { opacity: 1; background: rgba(0,0,0,0.05); } /* Connect hero */ .xb-connect { position: relative; overflow: hidden; background: var(--mw-surface); border: 1px solid var(--mw-border); border-radius: var(--mw-r-lg); padding: clamp(26px, 4vw, 40px) clamp(20px, 4vw, 40px); box-shadow: var(--mw-shadow-1); max-width: 720px; margin: 0 auto; animation: xb-rise 0.5s cubic-bezier(0.2, 0, 0, 1) both; } .xb-connect-glow { position: absolute; inset: -45% 25% auto -12%; height: 300px; background: radial-gradient(closest-side, var(--mw-blue-100), transparent 70%); opacity: 0.6; pointer-events: none; filter: blur(6px); } .xb-connect-head { position: relative; max-width: 540px; margin: 0 auto var(--mw-s-6); text-align: center; } .xb-brandmark { width: 54px; height: 54px; margin: 0 auto 14px; display: grid; place-items: center; border-radius: var(--mw-r-lg); background: linear-gradient(160deg, var(--mw-blue-500), var(--mw-blue-600)); color: #fff; font-size: 1.45rem; box-shadow: 0 6px 18px -6px var(--mw-blue-600), inset 0 1px 0 rgba(255,255,255,.35); } .xb-connect-title { font-family: var(--mw-font-serif); font-weight: 400; font-size: var(--mw-text-2xl); color: var(--mw-ink-900); margin: 0 0 8px; text-wrap: balance; } .xb-connect-sub { color: var(--mw-ink-500); font-size: var(--mw-text-md); line-height: 1.55; margin: 0; text-wrap: pretty; } .xb-connect-sub strong { color: var(--mw-ink-700); font-weight: 600; } .xb-form { position: relative; max-width: 480px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--mw-s-5); } .xb-field { display: flex; flex-direction: column; gap: 6px; } .xb-field-label { font-size: var(--mw-text-sm); font-weight: 600; color: var(--mw-ink-700); } .xb-field-hint { font-size: var(--mw-text-xs); color: var(--mw-ink-400); line-height: 1.4; } .xb-field-hint code { font-family: var(--mw-font-mono); background: var(--mw-surface-2); padding: 0 5px; border-radius: var(--mw-r-xs); border: 1px solid var(--mw-border-2); font-size: 0.92em; } .xb-input-wrap { position: relative; display: flex; align-items: center; } .xb-input-icon { position: absolute; left: 12px; color: var(--mw-ink-400); font-size: 1rem; pointer-events: none; } .xb-input { width: 100%; height: 44px; padding: 0 14px 0 38px; background: var(--mw-surface); border: 1px solid var(--mw-border); border-radius: var(--mw-r-md); color: var(--mw-ink-900); font-size: var(--mw-text-md); font-family: var(--mw-font-sans); transition: border-color 0.15s ease, box-shadow 0.15s ease; } .xb-input-key { font-family: var(--mw-font-mono); letter-spacing: 0.02em; padding-right: 44px; } .xb-input::placeholder { color: var(--mw-ink-300); } .xb-input:hover { border-color: var(--mw-ink-300); } .xb-input:focus { outline: none; border-color: var(--mw-blue-500); box-shadow: 0 0 0 3px rgba(17,108,174,0.22); } .xb-input-reveal { position: absolute; right: 4px; width: 40px; height: 40px; display: grid; place-items: center; background: transparent; border: 0; color: var(--mw-ink-400); cursor: pointer; border-radius: var(--mw-r-sm); transition: color 0.15s ease; } .xb-input-reveal:hover { color: var(--mw-ink-700); } .xb-testfail { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--mw-critical-bg); color: #8a1f1f; border-radius: var(--mw-r-md); font-size: var(--mw-text-sm); } .xb-testfail i { flex-shrink: 0; } .xb-form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; } /* Buttons */ .xb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: var(--mw-r-md); border: 1px solid transparent; font-size: var(--mw-text-md); font-weight: 600; font-family: var(--mw-font-sans); cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.08s ease, box-shadow 0.15s ease; } .xb-btn:active:not(:disabled) { transform: scale(0.96); } .xb-btn:disabled { opacity: 0.55; cursor: not-allowed; } .xb-btn-sm { min-height: 40px; padding: 0 13px; font-size: var(--mw-text-sm); } .xb-btn-primary { background: linear-gradient(180deg, var(--mw-blue-500), var(--mw-blue-600)); color: #fff; box-shadow: 0 2px 8px -2px var(--mw-blue-600); } .xb-btn-primary:hover:not(:disabled) { box-shadow: 0 4px 14px -3px var(--mw-blue-600); } .xb-btn-ghost { background: var(--mw-surface); color: var(--mw-ink-700); border-color: var(--mw-border); } .xb-btn-ghost:hover:not(:disabled) { border-color: var(--mw-ink-300); background: var(--mw-surface-2); } .xb-btn-soft { background: var(--mw-blue-50); color: var(--mw-blue-600); border-color: var(--mw-blue-100); } .xb-btn-soft:hover:not(:disabled) { background: var(--mw-blue-100); } .xb-btn-danger-ghost { background: var(--mw-surface); color: var(--mw-critical); border-color: var(--mw-border); } .xb-btn-danger-ghost:hover:not(:disabled) { background: var(--mw-critical-bg); border-color: var(--mw-critical); } .xb-btn-spin { width: 15px; height: 15px; border: 2px solid rgba(255,255,255,.45); border-top-color: #fff; border-radius: 50%; animation: xb-spin 0.7s linear infinite; } /* Connected status */ .xb-status { display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: var(--mw-surface); border: 1px solid var(--mw-border); border-radius: var(--mw-r-lg); box-shadow: var(--mw-shadow-1); margin-bottom: var(--mw-s-6); animation: xb-rise 0.45s cubic-bezier(0.2,0,0,1) both; } .xb-status-dot { position: relative; width: 10px; height: 10px; border-radius: 50%; background: var(--mw-blue-500); flex-shrink: 0; box-shadow: 0 0 0 0 var(--mw-blue-500); animation: xb-pulse 2.4s ease-out infinite; } @keyframes xb-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mw-blue-500) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 8px transparent; } } .xb-status-text { flex: 1; min-width: 0; } .xb-status-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--mw-ink-900); } .xb-status-line strong { font-weight: 600; } .xb-status-host { font-family: var(--mw-font-mono); font-size: var(--mw-text-sm); color: var(--mw-ink-700); background: var(--mw-surface-2); border: 1px solid var(--mw-border-2); border-radius: var(--mw-r-xs); padding: 1px 8px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .xb-status-client { display: inline-flex; align-items: center; gap: 5px; font-size: var(--mw-text-sm); color: var(--mw-ink-500); } .xb-status-sub { margin-top: 3px; font-size: var(--mw-text-xs); color: var(--mw-ink-400); } .xb-status-actions { display: flex; gap: 8px; flex-shrink: 0; } /* Section label */ .xb-section-label { display: flex; align-items: baseline; gap: 10px; font-family: var(--mw-font-serif); font-size: var(--mw-text-xl); color: var(--mw-ink-900); margin: 0 0 var(--mw-s-4); } .xb-section-hint { font-family: var(--mw-font-sans); font-size: var(--mw-text-sm); color: var(--mw-ink-400); } /* Capability grid */ .xb-cap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 14px; } .xb-cap { display: flex; align-items: center; gap: 14px; text-align: left; padding: 18px; border-radius: var(--mw-r-lg); border: 1px solid var(--mw-border); background: var(--mw-surface); animation: xb-rise 0.45s cubic-bezier(0.2,0,0,1) both; animation-delay: calc(var(--i) * 65ms); } .xb-cap-active { cursor: pointer; box-shadow: var(--mw-shadow-1); transition: transform 0.12s ease, box-shadow 0.18s ease, border-color 0.18s ease; } .xb-cap-active:hover { transform: translateY(-2px); box-shadow: var(--mw-shadow-2); border-color: var(--mw-blue-100); } .xb-cap-active:active { transform: translateY(0) scale(0.985); } .xb-cap-soon { opacity: 0.72; } .xb-cap-icon { width: 44px; height: 44px; flex-shrink: 0; display: grid; place-items: center; border-radius: var(--mw-r-md); font-size: 1.25rem; background: var(--mw-blue-50); color: var(--mw-blue-600); } .xb-cap-soon .xb-cap-icon { background: var(--mw-surface-2); color: var(--mw-ink-400); } .xb-cap-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .xb-cap-name { font-weight: 600; color: var(--mw-ink-900); font-size: var(--mw-text-md); } .xb-cap-desc { font-size: var(--mw-text-sm); color: var(--mw-ink-500); line-height: 1.4; } .xb-cap-go { color: var(--mw-ink-300); font-size: 1.1rem; transition: transform 0.18s ease, color 0.18s ease; } .xb-cap-active:hover .xb-cap-go { color: var(--mw-blue-600); transform: translateX(3px); } .xb-cap-soon-pill { font-size: var(--mw-text-xs); font-weight: 600; color: var(--mw-ink-400); background: var(--mw-surface-2); border: 1px solid var(--mw-border-2); border-radius: var(--mw-r-pill); padding: 2px 9px; white-space: nowrap; } /* Artifacts view */ .xb-subhead { display: flex; align-items: center; gap: 12px; margin-bottom: var(--mw-s-5); } .xb-back { width: 40px; height: 40px; flex-shrink: 0; display: grid; place-items: center; border-radius: var(--mw-r-md); border: 1px solid var(--mw-border); background: var(--mw-surface); color: var(--mw-ink-700); cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, transform 0.08s ease; } .xb-back:hover { background: var(--mw-surface-2); border-color: var(--mw-ink-300); } .xb-back:active { transform: scale(0.94); } .xb-subhead-title { flex: 1; display: flex; align-items: center; gap: 9px; font-family: var(--mw-font-serif); font-size: var(--mw-text-xl); color: var(--mw-ink-900); } .xb-subhead-title i { color: var(--mw-blue-600); } .xb-art-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; } .xb-art { display: flex; flex-direction: column; padding: 16px; border-radius: var(--mw-r-lg); border: 1px solid var(--mw-border); background: var(--mw-surface); box-shadow: var(--mw-shadow-1); transition: transform 0.14s ease, box-shadow 0.18s ease; animation: xb-rise 0.4s cubic-bezier(0.2,0,0,1) both; animation-delay: calc(var(--i) * 45ms); } .xb-art:hover { transform: translateY(-2px); box-shadow: var(--mw-shadow-2); } .xb-art-top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .xb-art-type { display: inline-flex; align-items: center; gap: 5px; font-size: var(--mw-text-xs); font-weight: 600; border-radius: var(--mw-r-pill); padding: 2px 9px; } .xb-art-type.is-authored { background: var(--mw-blue-50); color: var(--mw-blue-600); } .xb-art-type.is-upload { background: var(--mw-info-bg); color: var(--mw-info); } .xb-art-flag { display: inline-flex; align-items: center; gap: 4px; font-size: var(--mw-text-xs); color: var(--mw-ink-500); } .xb-art-flag.xb-art-ok { color: var(--mw-blue-600); font-weight: 600; } .xb-art-name { font-size: var(--mw-text-md); font-weight: 600; color: var(--mw-ink-900); margin: 0 0 5px; line-height: 1.3; text-wrap: balance; } .xb-art-desc { font-size: var(--mw-text-sm); color: var(--mw-ink-500); line-height: 1.45; margin: 0 0 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .xb-art-foot { margin-top: auto; display: flex; align-items: center; gap: 14px; } .xb-art-meta { display: inline-flex; align-items: center; gap: 5px; font-size: var(--mw-text-sm); color: var(--mw-ink-400); } .xb-num { font-variant-numeric: tabular-nums; } .xb-art-open { margin-left: auto; } /* Segmented control: Disponibili / Installati */ .xb-toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: var(--mw-s-5); } .xb-seg { display: inline-flex; gap: 4px; padding: 4px; background: var(--mw-surface-2); border: 1px solid var(--mw-border); border-radius: var(--mw-r-md); flex: 0 0 auto; } .xb-seg-btn { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 14px; border: 0; background: transparent; color: var(--mw-ink-500); font-size: var(--mw-text-sm); font-weight: 600; font-family: var(--mw-font-sans); border-radius: var(--mw-r-sm); cursor: pointer; transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.08s ease; } .xb-seg-btn:hover { color: var(--mw-ink-800); } .xb-seg-btn:active { transform: scale(0.97); } .xb-seg-btn.is-on { background: var(--mw-surface); color: var(--mw-ink-900); box-shadow: var(--mw-shadow-1); } .xb-seg-btn.is-on i { color: var(--mw-blue-600); } .xb-seg-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--mw-r-pill); background: var(--mw-blue-100); color: var(--mw-blue-600); font-size: var(--mw-text-xs); font-weight: 700; font-variant-numeric: tabular-nums; } /* Search bar */ .xb-search { position: relative; display: flex; align-items: center; width: min(300px, 100%); margin-left: auto; } .xb-search-icon { position: absolute; left: 12px; color: var(--mw-ink-400); font-size: 0.95rem; pointer-events: none; } .xb-search-input { width: 100%; height: 40px; padding: 0 38px 0 36px; background: var(--mw-surface); border: 1px solid var(--mw-border); border-radius: var(--mw-r-md); color: var(--mw-ink-900); font-size: var(--mw-text-sm); font-family: var(--mw-font-sans); transition: border-color 0.15s ease, box-shadow 0.15s ease; } .xb-search-input::placeholder { color: var(--mw-ink-300); } .xb-search-input:hover { border-color: var(--mw-ink-300); } .xb-search-input:focus { outline: none; border-color: var(--mw-blue-500); box-shadow: 0 0 0 3px rgba(17,108,174,0.22); } .xb-search-clear { position: absolute; right: 4px; width: 32px; height: 32px; display: grid; place-items: center; background: transparent; border: 0; color: var(--mw-ink-400); cursor: pointer; border-radius: var(--mw-r-sm); transition: color 0.15s ease, background 0.15s ease; } .xb-search-clear:hover { color: var(--mw-ink-700); background: var(--mw-surface-2); } /* Empty */ .xb-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: var(--mw-s-10) var(--mw-s-6); text-align: center; color: var(--mw-ink-500); } .xb-empty i { font-size: 2rem; color: var(--mw-ink-300); margin-bottom: 4px; } .xb-empty p { margin: 0; font-size: var(--mw-text-md); color: var(--mw-ink-700); } .xb-empty span { font-size: var(--mw-text-sm); color: var(--mw-ink-400); } .xb-empty em { font-style: normal; color: var(--mw-ink-700); } /* Preview modal */ .xb-modal-backdrop { position: fixed; inset: 0; z-index: 2000; background: rgba(20, 24, 22, 0.5); backdrop-filter: blur(2px); display: grid; place-items: center; padding: 24px; animation: xb-fade 0.18s ease both; } .xb-modal { width: min(1000px, 96vw); height: min(760px, 92vh); display: flex; flex-direction: column; background: var(--mw-surface); border-radius: var(--mw-r-lg); border: 1px solid var(--mw-border); box-shadow: var(--mw-shadow-pop); overflow: hidden; animation: xb-pop 0.2s cubic-bezier(0.2,0,0,1) both; } .xb-modal-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--mw-divider); } .xb-modal-title { flex: 1; display: flex; align-items: center; gap: 9px; font-weight: 600; color: var(--mw-ink-900); } .xb-modal-title i { color: var(--mw-blue-600); } .xb-modal-close { width: 40px; height: 40px; display: grid; place-items: center; background: transparent; border: 0; color: var(--mw-ink-500); cursor: pointer; border-radius: var(--mw-r-sm); transition: background 0.15s ease, color 0.15s ease; } .xb-modal-close:hover { background: var(--mw-surface-2); color: var(--mw-ink-900); } .xb-modal-body { flex: 1; min-height: 0; background: var(--mw-surface-2); } .xb-preview-frame { width: 100%; height: 100%; border: 0; background: #fff; } @keyframes xb-rise { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } } @keyframes xb-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes xb-pop { from { opacity: 0; transform: translateY(8px) scale(0.985); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .xb-connect, .xb-status, .xb-cap, .xb-art, .xb-modal, .xb-modal-backdrop { animation: none !important; } } /* ══ Dark mode — additive, never touches light ══ */ body.dark-mode .xb-input { background: var(--mw-surface-2); color: var(--mw-ink-800); } body.dark-mode .xb-input:hover { border-color: var(--mw-ink-500); } body.dark-mode .xb-search-input { background: var(--mw-surface-2); color: var(--mw-ink-800); } body.dark-mode .xb-search-clear:hover { background: var(--mw-divider); } body.dark-mode .xb-field-hint code, body.dark-mode .xb-status-host { background: var(--mw-surface-2); color: var(--mw-ink-700); } body.dark-mode .xb-flash.is-ok { color: var(--mw-success); } body.dark-mode .xb-flash.is-error { color: var(--mw-critical); } body.dark-mode .xb-testfail { color: var(--mw-critical); } body.dark-mode .xb-flash-close:hover { background: rgba(255,255,255,0.08); } body.dark-mode .xb-connect-glow { opacity: 0.35; } body.dark-mode .xb-cap-active:hover { border-color: var(--mw-blue-600); }