/** * SEO Fury Migration Wizard * * The wizard mounts on , outside .seo-plugin-wrap, so it carries its own * copy of the design tokens and its own light/dark switch (the JS mirrors * data-theme from #seo-fury-app onto .sfmw-root). */ /* ============================================================ Tokens ============================================================ */ .sfmw-root { --sfmw-surface: #ffffff; --sfmw-surface-2: #f8fafc; --sfmw-surface-3: #f1f5f9; --sfmw-line: #e2e8f0; --sfmw-ink: #0f172a; --sfmw-ink-2: #475569; --sfmw-muted: #94a3b8; --sfmw-brand: #6366f1; --sfmw-brand-2: #8b5cf6; --sfmw-brand-soft: #eef2ff; --sfmw-ok: #10b981; --sfmw-ok-soft: #ecfdf5; --sfmw-warn: #f59e0b; --sfmw-warn-soft: #fffbeb; --sfmw-bad: #ef4444; --sfmw-bad-soft: #fef2f2; --sfmw-shadow: 0 24px 60px -12px rgba(15, 23, 42, .35); --sfmw-radius: 16px; display: none; position: fixed; inset: 0; z-index: 100000; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } @media (prefers-color-scheme: dark) { .sfmw-root[data-theme="auto"] { --sfmw-surface: #171a2e; --sfmw-surface-2: #1b1f33; --sfmw-surface-3: #222842; --sfmw-line: #2f3555; --sfmw-ink: #e8eaf6; --sfmw-ink-2: #c2c7dd; --sfmw-muted: #8b93b3; --sfmw-brand: #818cf8; --sfmw-brand-2: #a78bfa; --sfmw-brand-soft: #232849; --sfmw-ok-soft: #10281f; --sfmw-warn-soft: #2b2410; --sfmw-bad-soft: #2b1616; --sfmw-shadow: 0 24px 60px -12px rgba(0, 0, 0, .65); } } .sfmw-root[data-theme="dark"] { --sfmw-surface: #171a2e; --sfmw-surface-2: #1b1f33; --sfmw-surface-3: #222842; --sfmw-line: #2f3555; --sfmw-ink: #e8eaf6; --sfmw-ink-2: #c2c7dd; --sfmw-muted: #8b93b3; --sfmw-brand: #818cf8; --sfmw-brand-2: #a78bfa; --sfmw-brand-soft: #232849; --sfmw-ok-soft: #10281f; --sfmw-warn-soft: #2b2410; --sfmw-bad-soft: #2b1616; --sfmw-shadow: 0 24px 60px -12px rgba(0, 0, 0, .65); } body.sfmw-open { overflow: hidden; } /* ============================================================ Shell ============================================================ */ .sfmw-overlay { position: absolute; inset: 0; background: rgba(15, 23, 42, .55); backdrop-filter: blur(3px); animation: sfmw-fade .18s ease-out; } .sfmw-modal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 660px; max-width: calc(100vw - 32px); max-height: calc(100vh - 48px); display: flex; flex-direction: column; overflow: hidden; background: var(--sfmw-surface); color: var(--sfmw-ink); border-radius: var(--sfmw-radius); box-shadow: var(--sfmw-shadow); animation: sfmw-pop .22s cubic-bezier(.2, .9, .3, 1.1); } .sfmw-root.sfmw-closing .sfmw-modal, .sfmw-root.sfmw-closing .sfmw-overlay { animation: sfmw-fade .15s ease-in reverse; } @keyframes sfmw-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes sfmw-pop { from { opacity: 0; transform: translate(-50%, -48%) scale(.97); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } } /* ---- Header ---- */ .sfmw-header { position: relative; display: flex; align-items: flex-start; gap: 16px; padding: 22px 24px 20px; background: linear-gradient(135deg, var(--sfmw-brand) 0%, var(--sfmw-brand-2) 100%); color: #fff; } .sfmw-header-text { flex: 1; min-width: 0; } .sfmw-title { margin: 0 0 4px; font-size: 19px; font-weight: 700; line-height: 1.25; color: #fff; } .sfmw-subtitle { margin: 0; font-size: 13px; line-height: 1.45; color: rgba(255, 255, 255, .82); } .sfmw-close { flex: 0 0 32px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: rgba(255, 255, 255, .16); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; transition: background .15s; } .sfmw-close:hover { background: rgba(255, 255, 255, .3); } /* ---- Stepper ---- */ .sfmw-steps { display: flex; margin: 0; padding: 14px 24px; list-style: none; gap: 8px; background: var(--sfmw-surface-2); border-bottom: 1px solid var(--sfmw-line); } .sfmw-step { flex: 1; display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; font-weight: 500; color: var(--sfmw-muted); position: relative; } .sfmw-step + .sfmw-step::before { content: ''; flex: 1; height: 2px; border-radius: 2px; background: var(--sfmw-line); margin-right: 4px; } .sfmw-step-num { flex: 0 0 24px; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--sfmw-line); color: var(--sfmw-muted); font-size: 12px; font-weight: 700; transition: background .2s, color .2s, box-shadow .2s; } .sfmw-step-active { color: var(--sfmw-brand); font-weight: 600; } .sfmw-step-active .sfmw-step-num { background: var(--sfmw-brand); color: #fff; box-shadow: 0 0 0 4px var(--sfmw-brand-soft); } .sfmw-step-done { color: var(--sfmw-ok); } .sfmw-step-done .sfmw-step-num { background: var(--sfmw-ok); color: #fff; font-size: 0; } .sfmw-step-done .sfmw-step-num::after { content: '\2713'; font-size: 13px; } .sfmw-step-done + .sfmw-step::before { background: var(--sfmw-ok); } .sfmw-step-active + .sfmw-step::before { background: linear-gradient(90deg, var(--sfmw-brand), var(--sfmw-line)); } /* ---- Body ---- */ .sfmw-body { padding: 24px; overflow-y: auto; } .sfmw-desc { margin: 0 0 14px; font-size: 13.5px; color: var(--sfmw-ink-2); } /* ============================================================ States: loading / empty / error ============================================================ */ .sfmw-loading, .sfmw-state { text-align: center; padding: 34px 20px; color: var(--sfmw-ink-2); } .sfmw-loading p, .sfmw-state p { margin: 12px 0 0; font-size: 14px; } .sfmw-state-icon { width: 52px; height: 52px; margin: 0 auto; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 26px; font-weight: 700; background: var(--sfmw-ok-soft); color: var(--sfmw-ok); } .sfmw-state-error p { color: var(--sfmw-bad); } .sfmw-spinner { display: inline-block; width: 26px; height: 26px; border: 3px solid var(--sfmw-line); border-top-color: var(--sfmw-brand); border-radius: 50%; animation: sfmw-spin .8s linear infinite; } .sfmw-spinner-sm { width: 15px; height: 15px; border-width: 2px; vertical-align: -2px; } @keyframes sfmw-spin { to { transform: rotate(360deg); } } /* ============================================================ Step 1 — source plugin picker ============================================================ */ .sfmw-plugin-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; } .sfmw-plugin-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1.5px solid var(--sfmw-line); border-radius: 12px; background: var(--sfmw-surface); cursor: pointer; transition: border-color .15s, background .15s, transform .15s, box-shadow .15s; } .sfmw-plugin-card:hover { border-color: var(--sfmw-brand); transform: translateY(-1px); } .sfmw-plugin-card:focus-visible { outline: 2px solid var(--sfmw-brand); outline-offset: 2px; } .sfmw-plugin-card.sfmw-selected { border-color: var(--sfmw-brand); background: var(--sfmw-brand-soft); box-shadow: 0 0 0 3px rgba(99, 102, 241, .16); } .sfmw-plugin-avatar { flex: 0 0 40px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 11px; color: #fff; font-size: 14px; font-weight: 700; letter-spacing: .02em; } .sfmw-plugin-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .sfmw-plugin-name { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--sfmw-ink); } .sfmw-plugin-count { font-size: 12.5px; color: var(--sfmw-muted); } .sfmw-tag { padding: 2px 7px; border-radius: 999px; background: var(--sfmw-surface-3); color: var(--sfmw-muted); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; } .sfmw-tag-active { background: var(--sfmw-warn-soft); color: #b45309; } .sfmw-plugin-check { flex: 0 0 22px; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--sfmw-brand); color: #fff; font-size: 12px; opacity: 0; transform: scale(.6); transition: opacity .15s, transform .15s; } .sfmw-selected .sfmw-plugin-check { opacity: 1; transform: scale(1); } .sfmw-option { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; font-size: 13px; color: var(--sfmw-ink-2); cursor: pointer; } .sfmw-option input { margin: 0; } .sfmw-notice { display: flex; align-items: flex-start; gap: 9px; padding: 11px 14px; border-radius: 10px; background: var(--sfmw-ok-soft); border: 1px solid rgba(16, 185, 129, .28); color: var(--sfmw-ok); font-size: 12.5px; line-height: 1.5; } .sfmw-notice-icon { font-size: 14px; line-height: 1.3; } /* ============================================================ Buttons & footer ============================================================ */ .sfmw-footer { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--sfmw-line); } .sfmw-btn { appearance: none; border: 1px solid transparent; border-radius: 9px; padding: 9px 18px; font-size: 13px; font-weight: 600; line-height: 1.3; cursor: pointer; transition: background .15s, border-color .15s, color .15s, opacity .15s; } .sfmw-btn:disabled { opacity: .5; cursor: not-allowed; } .sfmw-btn-primary { background: var(--sfmw-brand); color: #fff; } .sfmw-btn-primary:not(:disabled):hover { background: var(--sfmw-brand-2); } .sfmw-btn-ghost { background: var(--sfmw-surface-2); border-color: var(--sfmw-line); color: var(--sfmw-ink-2); } .sfmw-btn-ghost:not(:disabled):hover { background: var(--sfmw-surface-3); color: var(--sfmw-ink); } .sfmw-btn-warn { background: var(--sfmw-warn); color: #fff; } .sfmw-btn-warn:not(:disabled):hover { background: #d97706; } /* ============================================================ Step 2 — progress ============================================================ */ .sfmw-progress-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .sfmw-progress-source { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--sfmw-ink-2); min-width: 0; } .sfmw-progress-source strong { color: var(--sfmw-ink); } .sfmw-progress-percent { font-size: 22px; font-weight: 700; color: var(--sfmw-brand); font-variant-numeric: tabular-nums; } .sfmw-progress-bar { position: relative; height: 10px; border-radius: 999px; background: var(--sfmw-surface-3); overflow: hidden; } .sfmw-progress-fill { position: relative; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--sfmw-brand), var(--sfmw-brand-2)); transition: width .35s cubic-bezier(.4, 0, .2, 1); } .sfmw-progress-fill::after { content: ''; position: absolute; inset: 0; border-radius: 999px; background-image: linear-gradient( 115deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .38) 50%, rgba(255, 255, 255, 0) 70% ); background-size: 220% 100%; animation: sfmw-shimmer 1.4s linear infinite; } @keyframes sfmw-shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } } .sfmw-progress-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 8px 0 16px; font-size: 12px; color: var(--sfmw-muted); font-variant-numeric: tabular-nums; } .sfmw-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; } .sfmw-chip { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 8px; border-radius: 11px; background: var(--sfmw-surface-2); border: 1px solid var(--sfmw-line); } .sfmw-chip-num { font-size: 20px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; } .sfmw-chip-label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--sfmw-muted); } .sfmw-chip-ok .sfmw-chip-num { color: var(--sfmw-ok); } .sfmw-chip-skip .sfmw-chip-num { color: var(--sfmw-warn); } .sfmw-chip-err .sfmw-chip-num { color: var(--sfmw-bad); } /* ---- Activity feed ---- */ .sfmw-log-toggle { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; padding: 0; border: 0; background: none; color: var(--sfmw-muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; cursor: pointer; } .sfmw-log-caret { width: 0; height: 0; border-left: 5px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: transform .15s; } .sfmw-log-toggle.is-open .sfmw-log-caret { transform: rotate(90deg); } .sfmw-log { max-height: 190px; overflow-y: auto; padding: 6px 12px; border: 1px solid var(--sfmw-line); border-radius: 11px; background: var(--sfmw-surface-2); } .sfmw-log-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 12.5px; color: var(--sfmw-ink-2); animation: sfmw-fade .2s ease-out; } .sfmw-log-row + .sfmw-log-row { border-top: 1px solid var(--sfmw-line); } .sfmw-log-icon { flex: 0 0 18px; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 10px; font-weight: 700; color: #fff; background: var(--sfmw-muted); } .sfmw-log-text { flex: 1; min-width: 0; } .sfmw-log-count { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--sfmw-ink); } .sfmw-log-row.is-ok .sfmw-log-icon { background: var(--sfmw-ok); } .sfmw-log-row.is-ok .sfmw-log-icon::after { content: '\2713'; } .sfmw-log-row.is-skip .sfmw-log-icon { background: var(--sfmw-warn); } .sfmw-log-row.is-skip .sfmw-log-icon::after { content: '\00BB'; } .sfmw-log-row.is-warn .sfmw-log-icon { background: var(--sfmw-warn); } .sfmw-log-row.is-warn .sfmw-log-icon::after { content: '!'; } .sfmw-log-row.is-error .sfmw-log-icon { background: var(--sfmw-bad); } .sfmw-log-row.is-error .sfmw-log-icon::after { content: '\00D7'; } .sfmw-log-row.is-info .sfmw-log-icon { background: var(--sfmw-muted); } .sfmw-log-row.is-info .sfmw-log-icon::after { content: 'i'; } .sfmw-log-row.is-run .sfmw-log-icon { background: var(--sfmw-brand); } .sfmw-log-row.is-run .sfmw-log-icon::after { content: '\25B8'; } /* ============================================================ Step 3 — results ============================================================ */ .sfmw-results { text-align: center; } .sfmw-results-badge { width: 60px; height: 60px; margin: 4px auto 14px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--sfmw-ok-soft); color: var(--sfmw-ok); font-size: 28px; font-weight: 700; animation: sfmw-pop-badge .35s cubic-bezier(.2, .9, .3, 1.3); } .sfmw-results-badge.is-warn { background: var(--sfmw-warn-soft); color: var(--sfmw-warn); } @keyframes sfmw-pop-badge { from { transform: scale(.5); opacity: 0; } to { transform: scale(1); opacity: 1; } } .sfmw-results h3 { margin: 0 0 4px; font-size: 19px; font-weight: 700; color: var(--sfmw-ink); } .sfmw-results-plugin { margin: 0 0 20px; font-size: 13px; color: var(--sfmw-muted); } .sfmw-results-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; } .sfmw-result-stat { display: flex; flex-direction: column; gap: 3px; padding: 14px 8px; border-radius: 11px; background: var(--sfmw-surface-2); border: 1px solid var(--sfmw-line); } .sfmw-result-num { font-size: 26px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; } .sfmw-result-migrated { color: var(--sfmw-ok); } .sfmw-result-skipped { color: var(--sfmw-warn); } .sfmw-result-errors { color: var(--sfmw-bad); } .sfmw-result-label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--sfmw-muted); } .sfmw-results-hint { margin: 0 0 18px; font-size: 12.5px; color: var(--sfmw-muted); } .sfmw-next { text-align: left; padding: 16px 18px; border-radius: 12px; background: var(--sfmw-surface-2); border: 1px solid var(--sfmw-line); } .sfmw-next h4 { margin: 0 0 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--sfmw-muted); } .sfmw-next ul { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.7; color: var(--sfmw-ink-2); } /* ---- Deactivate the old plugin ---- */ .sfmw-deactivate { text-align: left; padding: 16px 18px; margin-bottom: 16px; border-radius: 12px; background: var(--sfmw-warn-soft); border: 1px solid rgba(245, 158, 11, .35); } .sfmw-deactivate-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; font-size: 13px; line-height: 1.5; color: #92400e; } .sfmw-root[data-theme="dark"] .sfmw-deactivate-head, .sfmw-root[data-theme="dark"] .sfmw-tag-active { color: #fbbf24; } @media (prefers-color-scheme: dark) { .sfmw-root[data-theme="auto"] .sfmw-deactivate-head, .sfmw-root[data-theme="auto"] .sfmw-tag-active { color: #fbbf24; } } .sfmw-deactivate-icon { font-size: 16px; line-height: 1.2; } .sfmw-deactivate-status { margin-top: 10px; font-size: 13px; } .sfmw-deactivate-success { font-size: 13.5px; font-weight: 600; color: var(--sfmw-ok); } .sfmw-error-text { color: var(--sfmw-bad); font-weight: 600; } /* ============================================================ Migration card inside General settings ============================================================ */ .sfmw-settings-card { display: flex; align-items: center; gap: 14px; padding: 16px 20px; background: var(--sf-primary-light, #f5f3ff); border: 1px solid var(--sf-gray-200, #ddd6fe); border-radius: 10px; } .sfmw-settings-card-icon { font-size: 30px; flex-shrink: 0; line-height: 1; } .sfmw-settings-card-info { flex: 1; } .sfmw-settings-card-info h4 { margin: 0 0 4px; font-size: 14px; color: var(--sf-gray-900, #1e293b); } .sfmw-settings-card-info p { margin: 0; font-size: 12px; color: var(--sf-gray-500, #64748b); } .sfmw-settings-card .button { flex-shrink: 0; } /* ============================================================ Small screens ============================================================ */ @media (max-width: 600px) { .sfmw-modal { width: calc(100vw - 16px); max-height: calc(100vh - 24px); } .sfmw-header, .sfmw-steps, .sfmw-body { padding-left: 16px; padding-right: 16px; } .sfmw-step-label { display: none; } .sfmw-chips, .sfmw-results-stats { grid-template-columns: repeat(3, 1fr); gap: 6px; } .sfmw-footer { flex-direction: column-reverse; } .sfmw-btn { width: 100%; } } @media (prefers-reduced-motion: reduce) { .sfmw-modal, .sfmw-overlay, .sfmw-results-badge, .sfmw-log-row { animation: none; } .sfmw-progress-fill::after { animation: none; } }