mirror of
https://github.com/The-Low-Code-Foundation/OpenNoodl.git
synced 2026-03-08 01:53:30 +01:00
fix(styles): CLEANUP-000H — Migration Wizard SCSS polish
Replace all hardcoded colors with design tokens across: - MigrationWizard.module.scss (shell: header/body/footer layout) - WizardProgress.module.scss (step indicator, active/complete/error states) - ConfirmStep.module.scss (info card, warning banner) - ScanningStep.module.scss (spinner, progress bar, file display) - MigratingStep.module.scss (same loading pattern + migration log) - ReportStep.module.scss (summary grid, issue list with severity icons) - CompleteStep.module.scss (success banner, stats, what's next) - FailedStep.module.scss (error banner, scrollable error details) All states use semantic tokens with sensible hardcoded fallbacks.
This commit is contained in:
Richard Osborne
@@ -1,123 +1,75 @@
|
||||
/**
|
||||
* MigrationWizard Styles
|
||||
*
|
||||
* Main container for the migration wizard using CoreBaseDialog.
|
||||
* Enhanced with modern visual design, animations, and better spacing.
|
||||
* CLEANUP-000H: MigrationWizard shell — design token polish
|
||||
*/
|
||||
|
||||
/* Animation definitions */
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Design system variables */
|
||||
:root {
|
||||
--wizard-space-xs: 4px;
|
||||
--wizard-space-sm: 8px;
|
||||
--wizard-space-md: 16px;
|
||||
--wizard-space-lg: 24px;
|
||||
--wizard-space-xl: 32px;
|
||||
--wizard-space-xxl: 48px;
|
||||
|
||||
--wizard-transition-fast: 150ms ease-out;
|
||||
--wizard-transition-base: 250ms ease-in-out;
|
||||
--wizard-transition-slow: 400ms ease-in-out;
|
||||
|
||||
--wizard-radius-sm: 4px;
|
||||
--wizard-radius-md: 8px;
|
||||
--wizard-radius-lg: 12px;
|
||||
|
||||
--wizard-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12);
|
||||
--wizard-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
--wizard-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.WizardContainer {
|
||||
position: relative;
|
||||
width: 750px;
|
||||
max-width: 92vw;
|
||||
max-height: 85vh;
|
||||
.Root {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: var(--theme-color-bg-4);
|
||||
border-radius: var(--wizard-radius-lg);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--theme-color-bg-2);
|
||||
color: var(--theme-color-fg-default);
|
||||
overflow: hidden;
|
||||
box-shadow: var(--wizard-shadow-lg);
|
||||
animation: fadeIn var(--wizard-transition-base);
|
||||
}
|
||||
|
||||
.CloseButton {
|
||||
position: absolute;
|
||||
top: var(--wizard-space-md);
|
||||
right: var(--wizard-space-md);
|
||||
z-index: 10;
|
||||
transition: transform var(--wizard-transition-fast);
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
.Header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: var(--spacing-4, 16px) var(--spacing-5, 20px);
|
||||
border-bottom: 1px solid var(--theme-color-border-default);
|
||||
background-color: var(--theme-color-bg-1);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.WizardHeader {
|
||||
padding: var(--wizard-space-xl) var(--wizard-space-xl) var(--wizard-space-lg);
|
||||
padding-right: var(--wizard-space-xxl); // Space for close button
|
||||
border-bottom: 1px solid var(--theme-color-bg-3);
|
||||
.Title {
|
||||
font-size: var(--font-size-large, 16px);
|
||||
font-weight: 600;
|
||||
color: var(--theme-color-fg-highlight, var(--theme-color-fg-default));
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.WizardContent {
|
||||
.Body {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 var(--wizard-space-xl) var(--wizard-space-xl);
|
||||
gap: var(--wizard-space-lg);
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
animation: slideIn var(--wizard-transition-base);
|
||||
|
||||
/* Custom scrollbar styling */
|
||||
&::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: var(--theme-color-bg-3);
|
||||
border-radius: var(--wizard-radius-sm);
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: var(--theme-color-bg-1);
|
||||
border-radius: var(--wizard-radius-sm);
|
||||
|
||||
&:hover {
|
||||
background: var(--theme-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.Footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: var(--spacing-2, 8px);
|
||||
padding: var(--spacing-3, 12px) var(--spacing-5, 20px);
|
||||
border-top: 1px solid var(--theme-color-border-default);
|
||||
background-color: var(--theme-color-bg-1);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
// Shared step container — used by all step components
|
||||
.StepContainer {
|
||||
flex: 1;
|
||||
min-height: 300px;
|
||||
animation: slideIn var(--wizard-transition-base);
|
||||
padding: var(--spacing-6, 24px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-4, 16px);
|
||||
}
|
||||
|
||||
.StepTitle {
|
||||
font-size: var(--font-size-large, 16px);
|
||||
font-weight: 600;
|
||||
color: var(--theme-color-fg-highlight, var(--theme-color-fg-default));
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.StepDescription {
|
||||
font-size: var(--font-size-default, 13px);
|
||||
color: var(--theme-color-fg-default-shy);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.StepContent {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-4, 16px);
|
||||
}
|
||||
|
||||
@@ -1,146 +1,75 @@
|
||||
/**
|
||||
* WizardProgress Styles
|
||||
*
|
||||
* Enhanced step progress indicator for migration wizard with animations and better visuals.
|
||||
* CLEANUP-000H: WizardProgress — design token polish
|
||||
* All colours via tokens. No hardcoded values.
|
||||
*/
|
||||
|
||||
@keyframes pulse {
|
||||
0%,
|
||||
100% {
|
||||
transform: scale(1);
|
||||
box-shadow: 0 0 0 0 rgba(66, 135, 245, 0.7);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 0 0 8px rgba(66, 135, 245, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes checkmark {
|
||||
0% {
|
||||
transform: scale(0) rotate(-45deg);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.2) rotate(-45deg);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1) rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideProgress {
|
||||
from {
|
||||
transform: scaleX(0);
|
||||
transform-origin: left;
|
||||
}
|
||||
to {
|
||||
transform: scaleX(1);
|
||||
transform-origin: left;
|
||||
}
|
||||
}
|
||||
|
||||
.Root {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0;
|
||||
padding: 16px 0 24px;
|
||||
margin-bottom: 8px;
|
||||
gap: var(--spacing-2, 8px);
|
||||
padding: var(--spacing-3, 12px) var(--spacing-4, 16px);
|
||||
background-color: var(--theme-color-bg-1);
|
||||
border-bottom: 1px solid var(--theme-color-border-subtle, var(--theme-color-border-default));
|
||||
}
|
||||
|
||||
.Step {
|
||||
.StepItem {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
gap: var(--spacing-2, 8px);
|
||||
}
|
||||
|
||||
.StepCircle {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
.StepNumber {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
background-color: var(--theme-color-bg-2);
|
||||
color: var(--theme-color-fg-muted);
|
||||
border: 2px solid var(--theme-color-bg-2);
|
||||
transition: all 300ms ease-in-out;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
border-radius: 50%;
|
||||
font-size: var(--font-size-xsmall, 11px);
|
||||
font-weight: 500;
|
||||
transition: background-color 150ms ease, color 150ms ease;
|
||||
|
||||
.Step.is-completed .StepCircle {
|
||||
background-color: var(--theme-color-success);
|
||||
border-color: var(--theme-color-success);
|
||||
color: white;
|
||||
animation: checkmark 400ms ease-out;
|
||||
}
|
||||
// Default (pending) state
|
||||
background-color: var(--theme-color-bg-4, var(--theme-color-bg-3));
|
||||
color: var(--theme-color-fg-default-shy);
|
||||
|
||||
.Step.is-active .StepCircle {
|
||||
background-color: var(--theme-color-primary);
|
||||
border-color: var(--theme-color-primary);
|
||||
color: white;
|
||||
animation: pulse 2s ease-in-out infinite;
|
||||
box-shadow: 0 0 0 0 rgba(66, 135, 245, 0.7);
|
||||
&.is-active {
|
||||
background-color: var(--theme-color-primary);
|
||||
color: var(--theme-color-bg-1);
|
||||
}
|
||||
|
||||
&.is-complete {
|
||||
background-color: var(--theme-color-success, #22c55e);
|
||||
color: var(--theme-color-bg-1);
|
||||
}
|
||||
|
||||
&.is-error {
|
||||
background-color: var(--theme-color-danger, #ef4444);
|
||||
color: var(--theme-color-bg-1);
|
||||
}
|
||||
}
|
||||
|
||||
.StepLabel {
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: var(--theme-color-fg-muted);
|
||||
text-align: center;
|
||||
max-width: 80px;
|
||||
transition: color 200ms ease-in-out;
|
||||
line-height: 1.3;
|
||||
font-size: var(--font-size-small, 12px);
|
||||
color: var(--theme-color-fg-default-shy);
|
||||
|
||||
&.is-active {
|
||||
color: var(--theme-color-fg-default);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&.is-complete {
|
||||
color: var(--theme-color-success, #22c55e);
|
||||
}
|
||||
}
|
||||
|
||||
.Step.is-completed .StepLabel,
|
||||
.Step.is-active .StepLabel {
|
||||
color: var(--theme-color-fg-highlight);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.Connector {
|
||||
.StepConnector {
|
||||
flex: 1;
|
||||
height: 2px;
|
||||
background-color: var(--theme-color-bg-2);
|
||||
margin: 0 -4px;
|
||||
margin-bottom: 28px;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
overflow: hidden;
|
||||
background-color: var(--theme-color-bg-4, var(--theme-color-bg-3));
|
||||
min-width: 20px;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--theme-color-success);
|
||||
transform: scaleX(0);
|
||||
transform-origin: left;
|
||||
transition: transform 400ms ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
.Connector.is-completed::after {
|
||||
transform: scaleX(1);
|
||||
animation: slideProgress 400ms ease-out;
|
||||
}
|
||||
|
||||
.CheckIcon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
&.is-complete {
|
||||
background-color: var(--theme-color-success, #22c55e);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,329 +1,105 @@
|
||||
/**
|
||||
* CompleteStep Styles
|
||||
*
|
||||
* Enhanced final step with celebration and beautiful summary.
|
||||
* CLEANUP-000H: CompleteStep — design token polish
|
||||
*/
|
||||
|
||||
@keyframes slideInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes successPulse {
|
||||
0%,
|
||||
100% {
|
||||
transform: scale(1);
|
||||
filter: drop-shadow(0 0 8px rgba(34, 197, 94, 0.4));
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.1);
|
||||
filter: drop-shadow(0 0 16px rgba(34, 197, 94, 0.6));
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes countUp {
|
||||
from {
|
||||
transform: scale(0.8);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.Root {
|
||||
.StepContainer {
|
||||
padding: var(--spacing-6, 24px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
animation: slideInUp 300ms ease-out;
|
||||
gap: var(--spacing-4, 16px);
|
||||
}
|
||||
|
||||
.Header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
margin-bottom: 24px;
|
||||
padding: 20px;
|
||||
background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, transparent 100%);
|
||||
border-radius: 12px;
|
||||
|
||||
.SuccessIcon {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, rgba(34, 197, 94, 0.2) 0%, rgba(34, 197, 94, 0.1) 100%);
|
||||
border-radius: 50%;
|
||||
animation: successPulse 2s ease-in-out infinite;
|
||||
|
||||
svg {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
color: var(--theme-color-success);
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: var(--theme-color-fg-highlight);
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
color: var(--theme-color-fg-default);
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.Stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
|
||||
gap: 16px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.StatCard {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 20px 16px;
|
||||
background: linear-gradient(135deg, var(--theme-color-bg-3) 0%, var(--theme-color-bg-2) 100%);
|
||||
border-radius: 12px;
|
||||
text-align: center;
|
||||
border: 1px solid var(--theme-color-bg-2);
|
||||
transition: all 250ms ease-in-out;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
.StatCardIcon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
transition: all 200ms ease-in-out;
|
||||
|
||||
svg {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
.StatCard.is-success .StatCardIcon {
|
||||
color: var(--theme-color-success);
|
||||
background-color: rgba(34, 197, 94, 0.15);
|
||||
}
|
||||
|
||||
.StatCard.is-warning .StatCardIcon {
|
||||
color: var(--theme-color-warning);
|
||||
background-color: rgba(251, 191, 36, 0.15);
|
||||
}
|
||||
|
||||
.StatCard.is-error .StatCardIcon {
|
||||
color: var(--theme-color-danger);
|
||||
background-color: rgba(239, 68, 68, 0.15);
|
||||
}
|
||||
|
||||
.StatCard:hover .StatCardIcon {
|
||||
transform: scale(1.1) rotate(5deg);
|
||||
}
|
||||
|
||||
.StatCardValue {
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
color: var(--theme-color-fg-highlight);
|
||||
line-height: 1;
|
||||
font-variant-numeric: tabular-nums;
|
||||
animation: countUp 400ms ease-out;
|
||||
}
|
||||
|
||||
.StatCardLabel {
|
||||
font-size: 11px;
|
||||
color: var(--theme-color-fg-default);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.8px;
|
||||
.StepTitle {
|
||||
font-size: var(--font-size-large, 16px);
|
||||
font-weight: 600;
|
||||
color: var(--theme-color-fg-highlight, var(--theme-color-fg-default));
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.MetaInfo {
|
||||
// Success banner
|
||||
.SuccessBanner {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
margin-bottom: 20px;
|
||||
padding: 16px;
|
||||
background: linear-gradient(135deg, var(--theme-color-bg-3) 0%, var(--theme-color-bg-2) 100%);
|
||||
border-radius: 10px;
|
||||
align-items: center;
|
||||
gap: var(--spacing-3, 12px);
|
||||
padding: var(--spacing-4, 16px);
|
||||
background-color: color-mix(in srgb, var(--theme-color-success, #22c55e) 10%, transparent);
|
||||
border: 1px solid color-mix(in srgb, var(--theme-color-success, #22c55e) 30%, transparent);
|
||||
border-radius: var(--border-radius-small, 4px);
|
||||
}
|
||||
|
||||
.SuccessIcon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
color: var(--theme-color-success, #22c55e);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.SuccessText {
|
||||
font-size: var(--font-size-default, 13px);
|
||||
color: var(--theme-color-success, #22c55e);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
// Stats
|
||||
.StatsCard {
|
||||
background-color: var(--theme-color-bg-3);
|
||||
border: 1px solid var(--theme-color-border-default);
|
||||
border-radius: var(--border-radius-small, 4px);
|
||||
padding: var(--spacing-4, 16px);
|
||||
display: flex;
|
||||
gap: var(--spacing-6, 24px);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.MetaItem {
|
||||
.StatItem {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 16px;
|
||||
background-color: var(--theme-color-bg-4);
|
||||
border-radius: 20px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--theme-color-fg-highlight);
|
||||
border: 1px solid var(--theme-color-bg-2);
|
||||
|
||||
svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
color: var(--theme-color-primary);
|
||||
}
|
||||
align-items: baseline;
|
||||
gap: var(--spacing-2, 8px);
|
||||
}
|
||||
|
||||
.Paths {
|
||||
padding: 20px;
|
||||
background: linear-gradient(135deg, var(--theme-color-bg-3) 0%, var(--theme-color-bg-2) 100%);
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--theme-color-bg-2);
|
||||
margin-bottom: 20px;
|
||||
|
||||
h3 {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--theme-color-fg-highlight);
|
||||
margin: 0 0 16px 0;
|
||||
}
|
||||
.StatValue {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: var(--theme-color-fg-highlight, var(--theme-color-fg-default));
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.PathItem {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
padding: 16px;
|
||||
background-color: var(--theme-color-bg-4);
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--theme-color-bg-3);
|
||||
transition: all 200ms ease-in-out;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
color: var(--theme-color-primary);
|
||||
flex-shrink: 0;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--theme-color-bg-3);
|
||||
border-color: var(--theme-color-primary);
|
||||
}
|
||||
.StatLabel {
|
||||
font-size: var(--font-size-small, 12px);
|
||||
color: var(--theme-color-fg-default-shy);
|
||||
}
|
||||
|
||||
.PathContent {
|
||||
// What's next section
|
||||
.NextStepsSection {
|
||||
padding-top: var(--spacing-4, 16px);
|
||||
border-top: 1px solid var(--theme-color-border-default);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
overflow: hidden;
|
||||
flex: 1;
|
||||
|
||||
.PathLabel {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--theme-color-fg-default);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.PathValue {
|
||||
font-family: monospace;
|
||||
font-size: 12px;
|
||||
color: var(--theme-color-fg-highlight);
|
||||
word-break: break-all;
|
||||
background-color: var(--theme-color-bg-2);
|
||||
padding: 8px 12px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
gap: var(--spacing-3, 12px);
|
||||
}
|
||||
|
||||
.NextSteps {
|
||||
padding: 20px;
|
||||
background: linear-gradient(135deg, var(--theme-color-bg-3) 0%, var(--theme-color-bg-2) 100%);
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--theme-color-bg-2);
|
||||
margin-bottom: 20px;
|
||||
|
||||
h3 {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--theme-color-fg-highlight);
|
||||
margin: 0 0 16px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
color: var(--theme-color-primary);
|
||||
}
|
||||
}
|
||||
.NextStepsTitle {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--theme-color-fg-default-shy);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.StepsList {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
padding: 16px;
|
||||
background-color: var(--theme-color-bg-4);
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
color: var(--theme-color-fg-default);
|
||||
transition: all 200ms ease-in-out;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--theme-color-bg-3);
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
flex-shrink: 0;
|
||||
margin-top: 2px;
|
||||
color: var(--theme-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.Actions {
|
||||
margin-top: auto;
|
||||
padding-top: 24px;
|
||||
.ChecklistItem {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
align-items: flex-start;
|
||||
gap: var(--spacing-2, 8px);
|
||||
padding: var(--spacing-1, 4px) 0;
|
||||
font-size: var(--font-size-default, 13px);
|
||||
color: var(--theme-color-fg-default);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.ChecklistIcon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
color: var(--theme-color-fg-default-shy);
|
||||
flex-shrink: 0;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
@@ -1,285 +1,84 @@
|
||||
/**
|
||||
* ConfirmStep Styles
|
||||
*
|
||||
* First step of migration wizard - confirm source and target paths.
|
||||
* Enhanced with better visual hierarchy and animations.
|
||||
* CLEANUP-000H: ConfirmStep — design token polish
|
||||
*/
|
||||
|
||||
@keyframes arrowBounce {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(4px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.Root {
|
||||
.StepContainer {
|
||||
padding: var(--spacing-6, 24px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
animation: slideInUp 300ms ease-out;
|
||||
gap: var(--spacing-4, 16px);
|
||||
}
|
||||
|
||||
.Header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
svg {
|
||||
color: var(--theme-color-primary);
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: var(--theme-color-fg-highlight);
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.PathSection {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
padding: 20px;
|
||||
background-color: var(--theme-color-bg-3);
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
transition: all 250ms ease-in-out;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--theme-color-bg-2);
|
||||
}
|
||||
}
|
||||
|
||||
.PathSection--locked {
|
||||
background-color: var(--theme-color-bg-2);
|
||||
border-color: var(--theme-color-bg-1);
|
||||
opacity: 0.9;
|
||||
|
||||
.PathValue {
|
||||
background-color: var(--theme-color-bg-1);
|
||||
color: var(--theme-color-fg-default-shy);
|
||||
border: 1px dashed var(--theme-color-bg-1);
|
||||
}
|
||||
}
|
||||
|
||||
.PathSection--editable {
|
||||
border-color: var(--theme-color-primary);
|
||||
border-width: 2px;
|
||||
box-shadow: 0 0 0 3px rgba(66, 135, 245, 0.1);
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 0 0 4px rgba(66, 135, 245, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
.PathHeader {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
|
||||
h3 {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--theme-color-fg-highlight);
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.LockIcon {
|
||||
color: var(--theme-color-fg-muted);
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.FolderIcon {
|
||||
color: var(--theme-color-primary);
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.PathFields {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.PathField {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.PathLabel {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: var(--theme-color-secondary-as-fg);
|
||||
|
||||
svg {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.PathDisplay {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.PathText {
|
||||
font-family: monospace;
|
||||
font-size: 12px;
|
||||
word-break: break-all;
|
||||
color: var(--theme-color-fg-highlight);
|
||||
}
|
||||
|
||||
.ProjectName {
|
||||
font-size: 11px;
|
||||
color: var(--theme-color-secondary-as-fg);
|
||||
}
|
||||
|
||||
.PathValue {
|
||||
padding: 8px 12px;
|
||||
background-color: var(--theme-color-bg-2);
|
||||
border-radius: 4px;
|
||||
font-family: monospace;
|
||||
font-size: 12px;
|
||||
color: var(--theme-color-fg-highlight);
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.PathInput {
|
||||
input {
|
||||
font-family: monospace;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.PathError {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.Arrow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
padding: 16px 0;
|
||||
margin: 8px 0;
|
||||
color: var(--theme-color-primary);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
|
||||
svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
animation: arrowBounce 2s ease-in-out infinite;
|
||||
}
|
||||
}
|
||||
|
||||
.InfoBox {
|
||||
padding: 20px;
|
||||
background: linear-gradient(135deg, var(--theme-color-bg-3) 0%, var(--theme-color-bg-2) 100%);
|
||||
border-radius: 8px;
|
||||
border-left: 3px solid var(--theme-color-primary);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
|
||||
h4 {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--theme-color-fg-highlight);
|
||||
margin: 0 0 12px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
color: var(--theme-color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
color: var(--theme-color-fg-default);
|
||||
margin: 0 0 12px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.StepsList {
|
||||
.StepTitle {
|
||||
font-size: var(--font-size-large, 16px);
|
||||
font-weight: 600;
|
||||
color: var(--theme-color-fg-highlight, var(--theme-color-fg-default));
|
||||
margin: 0;
|
||||
padding-left: 24px;
|
||||
color: var(--theme-color-fg-default);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.StepDescription {
|
||||
font-size: var(--font-size-default, 13px);
|
||||
color: var(--theme-color-fg-default-shy);
|
||||
line-height: 1.6;
|
||||
|
||||
li {
|
||||
margin-bottom: 8px;
|
||||
padding-left: 4px;
|
||||
|
||||
&::marker {
|
||||
color: var(--theme-color-primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.WarningBox {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
padding: 12px 16px;
|
||||
background-color: rgba(251, 191, 36, 0.1);
|
||||
border: 1px solid rgba(251, 191, 36, 0.3);
|
||||
border-radius: 8px;
|
||||
margin-top: 16px;
|
||||
|
||||
svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
flex-shrink: 0;
|
||||
color: var(--theme-color-warning);
|
||||
}
|
||||
}
|
||||
|
||||
.WarningContent {
|
||||
.StepContent {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
gap: var(--spacing-4, 16px);
|
||||
}
|
||||
|
||||
.WarningTitle {
|
||||
font-weight: 500;
|
||||
color: var(--theme-color-warning);
|
||||
}
|
||||
|
||||
.Actions {
|
||||
margin-top: auto;
|
||||
padding-top: 24px;
|
||||
.InfoCard {
|
||||
background-color: var(--theme-color-bg-3);
|
||||
border: 1px solid var(--theme-color-border-default);
|
||||
border-radius: var(--border-radius-small, 4px);
|
||||
padding: var(--spacing-4, 16px);
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-2, 8px);
|
||||
}
|
||||
|
||||
.InfoTitle {
|
||||
font-size: var(--font-size-small, 12px);
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--theme-color-fg-default-shy);
|
||||
}
|
||||
|
||||
.CheckList {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-1, 4px);
|
||||
}
|
||||
|
||||
.CheckItem {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: var(--spacing-2, 8px);
|
||||
font-size: var(--font-size-default, 13px);
|
||||
color: var(--theme-color-fg-default);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.CheckIcon {
|
||||
flex-shrink: 0;
|
||||
margin-top: 2px;
|
||||
color: var(--theme-color-fg-default-shy);
|
||||
}
|
||||
|
||||
.WarningBanner {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: var(--spacing-3, 12px);
|
||||
padding: var(--spacing-3, 12px) var(--spacing-4, 16px);
|
||||
background-color: color-mix(in srgb, var(--theme-color-notice, #f59e0b) 10%, transparent);
|
||||
border: 1px solid color-mix(in srgb, var(--theme-color-notice, #f59e0b) 30%, transparent);
|
||||
border-radius: var(--border-radius-small, 4px);
|
||||
font-size: var(--font-size-small, 12px);
|
||||
color: var(--theme-color-fg-default);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
@@ -1,235 +1,85 @@
|
||||
/**
|
||||
* FailedStep Styles
|
||||
*
|
||||
* Enhanced error state with helpful suggestions and beautiful error display.
|
||||
* CLEANUP-000H: FailedStep — design token polish
|
||||
*/
|
||||
|
||||
@keyframes slideInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shake {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
25% {
|
||||
transform: translateX(-4px);
|
||||
}
|
||||
75% {
|
||||
transform: translateX(4px);
|
||||
}
|
||||
}
|
||||
|
||||
.Root {
|
||||
.StepContainer {
|
||||
padding: var(--spacing-6, 24px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
animation: slideInUp 300ms ease-out;
|
||||
gap: var(--spacing-4, 16px);
|
||||
}
|
||||
|
||||
.Header {
|
||||
.StepTitle {
|
||||
font-size: var(--font-size-large, 16px);
|
||||
font-weight: 600;
|
||||
color: var(--theme-color-fg-highlight, var(--theme-color-fg-default));
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// Error banner
|
||||
.ErrorBanner {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: var(--spacing-3, 12px);
|
||||
padding: var(--spacing-4, 16px);
|
||||
background-color: color-mix(in srgb, var(--theme-color-danger, #ef4444) 10%, transparent);
|
||||
border: 1px solid color-mix(in srgb, var(--theme-color-danger, #ef4444) 30%, transparent);
|
||||
border-radius: var(--border-radius-small, 4px);
|
||||
}
|
||||
|
||||
.ErrorIcon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
color: var(--theme-color-danger, #ef4444);
|
||||
flex-shrink: 0;
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
.ErrorContent {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
margin-bottom: 24px;
|
||||
padding: 20px;
|
||||
background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, transparent 100%);
|
||||
border-radius: 12px;
|
||||
|
||||
.ErrorIcon {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(239, 68, 68, 0.1) 100%);
|
||||
border-radius: 50%;
|
||||
animation: shake 500ms ease-out;
|
||||
|
||||
svg {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
color: var(--theme-color-danger);
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
color: var(--theme-color-fg-highlight);
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
color: var(--theme-color-fg-default);
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
line-height: 1.6;
|
||||
}
|
||||
gap: var(--spacing-2, 8px);
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.ErrorBox {
|
||||
margin-bottom: 20px;
|
||||
background: linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0%, rgba(239, 68, 68, 0.05) 100%);
|
||||
border: 2px solid rgba(239, 68, 68, 0.3);
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ErrorHeader {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 16px 20px;
|
||||
background-color: rgba(239, 68, 68, 0.15);
|
||||
border-bottom: 1px solid rgba(239, 68, 68, 0.2);
|
||||
|
||||
svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
color: var(--theme-color-danger);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--theme-color-danger);
|
||||
margin: 0;
|
||||
}
|
||||
.ErrorTitle {
|
||||
font-size: var(--font-size-default, 13px);
|
||||
font-weight: 600;
|
||||
color: var(--theme-color-danger, #ef4444);
|
||||
}
|
||||
|
||||
.ErrorMessage {
|
||||
padding: 20px;
|
||||
font-family: monospace;
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
color: var(--theme-color-fg-highlight);
|
||||
background-color: var(--theme-color-bg-4);
|
||||
word-break: break-word;
|
||||
font-size: var(--font-size-small, 12px);
|
||||
color: var(--theme-color-fg-default);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
// Error details (collapsible/scrollable)
|
||||
.ErrorDetails {
|
||||
margin-top: var(--spacing-3, 12px);
|
||||
padding: var(--spacing-3, 12px);
|
||||
background-color: var(--theme-color-bg-1);
|
||||
border-radius: var(--border-radius-small, 4px);
|
||||
font-family: var(--font-family-mono, monospace);
|
||||
font-size: var(--font-size-small, 12px);
|
||||
color: var(--theme-color-fg-default-shy);
|
||||
overflow-x: auto;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
border: 1px solid var(--theme-color-border-default);
|
||||
}
|
||||
|
||||
.Suggestions {
|
||||
padding: 20px;
|
||||
background: linear-gradient(135deg, var(--theme-color-bg-3) 0%, var(--theme-color-bg-2) 100%);
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--theme-color-bg-2);
|
||||
margin-bottom: 20px;
|
||||
|
||||
h3 {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--theme-color-fg-highlight);
|
||||
margin: 0 0 16px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
color: var(--theme-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.SuggestionList {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
padding: 16px;
|
||||
background-color: var(--theme-color-bg-4);
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
color: var(--theme-color-fg-default);
|
||||
transition: all 200ms ease-in-out;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--theme-color-bg-3);
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
flex-shrink: 0;
|
||||
margin-top: 2px;
|
||||
color: var(--theme-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.Link {
|
||||
color: var(--theme-color-primary);
|
||||
text-decoration: underline;
|
||||
font-weight: 500;
|
||||
transition: opacity 200ms ease-in-out;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
.SafetyNotice {
|
||||
.ActionRow {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
padding: 20px;
|
||||
background: linear-gradient(135deg, rgba(34, 197, 94, 0.12) 0%, rgba(34, 197, 94, 0.08) 100%);
|
||||
border: 2px solid rgba(34, 197, 94, 0.3);
|
||||
border-radius: 12px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
flex-shrink: 0;
|
||||
color: var(--theme-color-success);
|
||||
}
|
||||
|
||||
.SafetyContent {
|
||||
flex: 1;
|
||||
|
||||
h4 {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--theme-color-success);
|
||||
margin: 0 0 6px 0;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
color: var(--theme-color-fg-default);
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
align-items: center;
|
||||
gap: var(--spacing-2, 8px);
|
||||
padding-top: var(--spacing-2, 8px);
|
||||
}
|
||||
|
||||
.Actions {
|
||||
margin-top: auto;
|
||||
padding-top: 24px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
.HintText {
|
||||
font-size: var(--font-size-small, 12px);
|
||||
color: var(--theme-color-fg-default-shy);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
@@ -1,417 +1,91 @@
|
||||
/**
|
||||
* MigratingStep Styles
|
||||
*
|
||||
* Enhanced AI-assisted migration progress display with beautiful budget tracking and decision panels.
|
||||
* CLEANUP-000H: MigratingStep — design token polish
|
||||
* Same loading pattern as ScanningStep.
|
||||
*/
|
||||
|
||||
@keyframes slideInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% {
|
||||
background-position: -1000px 0;
|
||||
}
|
||||
100% {
|
||||
background-position: 1000px 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes budgetPulse {
|
||||
0%,
|
||||
100% {
|
||||
box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.7);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 0 8px rgba(251, 191, 36, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.Root {
|
||||
.StepContainer {
|
||||
padding: var(--spacing-6, 24px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
gap: 20px;
|
||||
animation: slideInUp 300ms ease-out;
|
||||
gap: var(--spacing-4, 16px);
|
||||
}
|
||||
|
||||
.Header {
|
||||
.StepTitle {
|
||||
font-size: var(--font-size-large, 16px);
|
||||
font-weight: 600;
|
||||
color: var(--theme-color-fg-highlight, var(--theme-color-fg-default));
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.LoadingContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
margin-bottom: 4px;
|
||||
justify-content: center;
|
||||
padding: var(--spacing-8, 32px) var(--spacing-4, 16px);
|
||||
gap: var(--spacing-4, 16px);
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
color: var(--theme-color-primary);
|
||||
animation: spin 1.5s linear infinite;
|
||||
filter: drop-shadow(0 0 8px rgba(66, 135, 245, 0.3));
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: var(--theme-color-fg-highlight);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
color: var(--theme-color-fg-default);
|
||||
margin: 4px 0 0 0;
|
||||
}
|
||||
.Spinner {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border: 3px solid var(--theme-color-bg-3);
|
||||
border-top-color: var(--theme-color-primary);
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Budget Section */
|
||||
.BudgetSection {
|
||||
padding: 20px;
|
||||
background: linear-gradient(135deg, var(--theme-color-bg-3) 0%, var(--theme-color-bg-2) 100%);
|
||||
border-radius: 12px;
|
||||
border: 2px solid var(--theme-color-bg-2);
|
||||
transition: all 300ms ease-in-out;
|
||||
|
||||
&.is-warning {
|
||||
border-color: var(--theme-color-warning);
|
||||
animation: budgetPulse 2s ease-in-out infinite;
|
||||
}
|
||||
.LoadingText {
|
||||
font-size: var(--font-size-default, 13px);
|
||||
color: var(--theme-color-fg-default-shy);
|
||||
text-align: center;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.BudgetHeader {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
|
||||
h3 {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--theme-color-fg-highlight);
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
color: var(--theme-color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.BudgetAmount {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: var(--theme-color-primary);
|
||||
font-variant-numeric: tabular-nums;
|
||||
|
||||
&.is-warning {
|
||||
color: var(--theme-color-warning);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.BudgetBar {
|
||||
height: 10px;
|
||||
background-color: var(--theme-color-bg-1);
|
||||
border-radius: 5px;
|
||||
.CurrentFile {
|
||||
font-size: var(--font-size-small, 12px);
|
||||
color: var(--theme-color-fg-default-shy);
|
||||
font-family: var(--font-family-mono, monospace);
|
||||
text-align: center;
|
||||
max-width: 400px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 50%;
|
||||
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), transparent);
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.BudgetFill {
|
||||
height: 100%;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
var(--theme-color-primary) 0%,
|
||||
rgba(66, 135, 245, 0.8) 50%,
|
||||
var(--theme-color-primary) 100%
|
||||
);
|
||||
background-size: 200% 100%;
|
||||
border-radius: 5px;
|
||||
transition: width 400ms ease-out, background 300ms ease-in-out;
|
||||
animation: shimmer 2s linear infinite;
|
||||
position: relative;
|
||||
|
||||
&.is-warning {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
var(--theme-color-warning) 0%,
|
||||
rgba(251, 191, 36, 0.8) 50%,
|
||||
var(--theme-color-warning) 100%
|
||||
);
|
||||
background-size: 200% 100%;
|
||||
animation: shimmer 2s linear infinite;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 20px;
|
||||
height: 100%;
|
||||
background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.4));
|
||||
border-radius: 0 5px 5px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.BudgetWarning {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-top: 12px;
|
||||
padding: 8px 12px;
|
||||
background-color: rgba(251, 191, 36, 0.15);
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
color: var(--theme-color-warning);
|
||||
|
||||
svg {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Progress Section */
|
||||
.ProgressSection {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ProgressBar {
|
||||
height: 8px;
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
height: 4px;
|
||||
background-color: var(--theme-color-bg-3);
|
||||
border-radius: 4px;
|
||||
border-radius: 99px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ProgressFill {
|
||||
height: 100%;
|
||||
background-color: var(--theme-color-primary);
|
||||
border-radius: 4px;
|
||||
transition: width 0.3s ease;
|
||||
border-radius: 99px;
|
||||
transition: width 300ms ease;
|
||||
}
|
||||
|
||||
/* Current Component */
|
||||
.CurrentComponent {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 12px 16px;
|
||||
background-color: var(--theme-color-bg-3);
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--theme-color-primary);
|
||||
animation: pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%,
|
||||
100% {
|
||||
border-color: var(--theme-color-primary);
|
||||
background-color: var(--theme-color-bg-3);
|
||||
}
|
||||
50% {
|
||||
border-color: rgba(59, 130, 246, 0.5);
|
||||
background-color: rgba(59, 130, 246, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
/* Log Section */
|
||||
.LogSection {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
max-height: 200px;
|
||||
.MigrationLog {
|
||||
width: 100%;
|
||||
max-height: 160px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.LogEntries {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.LogEntry {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
padding: 8px 12px;
|
||||
background-color: var(--theme-color-bg-3);
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
animation: slideIn 0.2s ease;
|
||||
|
||||
svg {
|
||||
margin-top: 2px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&.is-info {
|
||||
border-left: 3px solid var(--theme-color-secondary-as-fg);
|
||||
|
||||
svg {
|
||||
color: var(--theme-color-secondary-as-fg);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-success {
|
||||
border-left: 3px solid var(--theme-color-success);
|
||||
|
||||
svg {
|
||||
color: var(--theme-color-success);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-warning {
|
||||
border-left: 3px solid var(--theme-color-warning);
|
||||
|
||||
svg {
|
||||
color: var(--theme-color-warning);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-error {
|
||||
border-left: 3px solid var(--theme-color-danger);
|
||||
|
||||
svg {
|
||||
color: var(--theme-color-danger);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(-8px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
.LogContent {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
/* AI Decision Panel */
|
||||
.DecisionPanel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
padding: 16px;
|
||||
background-color: var(--theme-color-bg-3);
|
||||
border: 2px solid var(--theme-color-warning);
|
||||
border-radius: 8px;
|
||||
animation: slideDown 0.3s ease;
|
||||
}
|
||||
|
||||
@keyframes slideDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-16px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.DecisionHeader {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
|
||||
svg {
|
||||
color: var(--theme-color-warning);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.AttemptHistory {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
padding: 12px;
|
||||
background-color: var(--theme-color-bg-2);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.AttemptEntry {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.DecisionOptions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
/* Actions */
|
||||
.Actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid var(--theme-color-bg-2);
|
||||
}
|
||||
|
||||
/* Dialog Overlay */
|
||||
.DialogOverlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
z-index: 1000;
|
||||
animation: fadeIn 0.2s ease;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
background-color: var(--theme-color-bg-1);
|
||||
border: 1px solid var(--theme-color-border-default);
|
||||
border-radius: var(--border-radius-small, 4px);
|
||||
padding: var(--spacing-2, 8px) var(--spacing-3, 12px);
|
||||
font-family: var(--font-family-mono, monospace);
|
||||
font-size: var(--font-size-small, 12px);
|
||||
color: var(--theme-color-fg-default-shy);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
@@ -1,503 +1,127 @@
|
||||
/**
|
||||
* ReportStep Styles
|
||||
*
|
||||
* Enhanced scan results report with beautiful categories and AI options.
|
||||
* CLEANUP-000H: ReportStep — design token polish
|
||||
*/
|
||||
|
||||
@keyframes slideInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes countUp {
|
||||
from {
|
||||
transform: scale(0.8);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes sparkle {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.7;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
.Root {
|
||||
.StepContainer {
|
||||
padding: var(--spacing-6, 24px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
animation: slideInUp 300ms ease-out;
|
||||
gap: var(--spacing-4, 16px);
|
||||
}
|
||||
|
||||
.Header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
color: var(--theme-color-primary);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: var(--theme-color-fg-highlight);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
color: var(--theme-color-fg-default);
|
||||
margin: 4px 0 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.StatsRow {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 16px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.StatCard {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 20px 16px;
|
||||
background: linear-gradient(135deg, var(--theme-color-bg-3) 0%, var(--theme-color-bg-2) 100%);
|
||||
border-radius: 12px;
|
||||
text-align: center;
|
||||
border: 1px solid var(--theme-color-bg-2);
|
||||
transition: all 250ms ease-in-out;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3px;
|
||||
background: var(--theme-color-secondary-as-fg);
|
||||
opacity: 0;
|
||||
transition: opacity 250ms ease-in-out;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
|
||||
|
||||
&::before {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.StatCard.is-automatic::before {
|
||||
background: var(--theme-color-success);
|
||||
}
|
||||
|
||||
.StatCard.is-simpleFixes::before {
|
||||
background: var(--theme-color-warning);
|
||||
}
|
||||
|
||||
.StatCard.is-needsReview::before {
|
||||
background: var(--theme-color-danger);
|
||||
}
|
||||
|
||||
.StatCardIcon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--theme-color-secondary-as-fg);
|
||||
background-color: var(--theme-color-bg-4);
|
||||
border-radius: 50%;
|
||||
transition: all 200ms ease-in-out;
|
||||
|
||||
svg {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
.StatCard.is-automatic .StatCardIcon {
|
||||
color: var(--theme-color-success);
|
||||
background-color: rgba(34, 197, 94, 0.15);
|
||||
}
|
||||
|
||||
.StatCard.is-simpleFixes .StatCardIcon {
|
||||
color: var(--theme-color-warning);
|
||||
background-color: rgba(251, 191, 36, 0.15);
|
||||
}
|
||||
|
||||
.StatCard.is-needsReview .StatCardIcon {
|
||||
color: var(--theme-color-danger);
|
||||
background-color: rgba(239, 68, 68, 0.15);
|
||||
}
|
||||
|
||||
.StatCard:hover .StatCardIcon {
|
||||
transform: scale(1.1) rotate(5deg);
|
||||
}
|
||||
|
||||
.StatCardValue {
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
color: var(--theme-color-fg-highlight);
|
||||
line-height: 1;
|
||||
font-variant-numeric: tabular-nums;
|
||||
animation: countUp 400ms ease-out;
|
||||
}
|
||||
|
||||
.StatCardLabel {
|
||||
font-size: 11px;
|
||||
color: var(--theme-color-fg-default);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.8px;
|
||||
.StepTitle {
|
||||
font-size: var(--font-size-large, 16px);
|
||||
font-weight: 600;
|
||||
color: var(--theme-color-fg-highlight, var(--theme-color-fg-default));
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.Categories {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
.StepDescription {
|
||||
font-size: var(--font-size-default, 13px);
|
||||
color: var(--theme-color-fg-default-shy);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.SummaryCard {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
|
||||
gap: var(--spacing-3, 12px);
|
||||
}
|
||||
|
||||
.SummaryItem {
|
||||
background-color: var(--theme-color-bg-3);
|
||||
border: 1px solid var(--theme-color-border-default);
|
||||
padding: var(--spacing-3, 12px);
|
||||
border-radius: var(--border-radius-small, 4px);
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
gap: var(--spacing-1, 4px);
|
||||
}
|
||||
|
||||
.CategorySection {
|
||||
background-color: var(--theme-color-bg-3);
|
||||
border-radius: 10px;
|
||||
.SummaryValue {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: var(--theme-color-fg-highlight, var(--theme-color-fg-default));
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.SummaryLabel {
|
||||
font-size: 10px;
|
||||
color: var(--theme-color-fg-default-shy);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
// Issue list
|
||||
.IssueList {
|
||||
border: 1px solid var(--theme-color-border-default);
|
||||
border-radius: var(--border-radius-small, 4px);
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--theme-color-bg-2);
|
||||
transition: all 250ms ease-in-out;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--theme-color-bg-1);
|
||||
}
|
||||
}
|
||||
|
||||
.CategorySection.is-expanded {
|
||||
background-color: var(--theme-color-bg-2);
|
||||
.IssueListEmpty {
|
||||
padding: var(--spacing-4, 16px);
|
||||
text-align: center;
|
||||
font-size: var(--font-size-small, 12px);
|
||||
color: var(--theme-color-fg-default-shy);
|
||||
}
|
||||
|
||||
.CategoryHeader {
|
||||
.IssueItem {
|
||||
padding: var(--spacing-3, 12px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 16px 20px;
|
||||
background-color: transparent;
|
||||
cursor: pointer;
|
||||
transition: all 200ms ease-in-out;
|
||||
user-select: none;
|
||||
align-items: flex-start;
|
||||
gap: var(--spacing-3, 12px);
|
||||
border-bottom: 1px solid var(--theme-color-border-default);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--theme-color-bg-2);
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
&:nth-child(even) {
|
||||
background-color: color-mix(in srgb, var(--theme-color-bg-3) 30%, transparent);
|
||||
}
|
||||
}
|
||||
|
||||
.CategorySection.is-expanded .CategoryHeader {
|
||||
background-color: var(--theme-color-bg-1);
|
||||
border-bottom: 1px solid var(--theme-color-bg-3);
|
||||
}
|
||||
|
||||
.CategoryIcon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 8px;
|
||||
transition: all 200ms ease-in-out;
|
||||
.IssueIcon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
flex-shrink: 0;
|
||||
margin-top: 1px;
|
||||
|
||||
svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
&--warning {
|
||||
color: var(--theme-color-notice, #f59e0b);
|
||||
}
|
||||
|
||||
&--error {
|
||||
color: var(--theme-color-danger, #ef4444);
|
||||
}
|
||||
|
||||
&--info {
|
||||
color: var(--theme-color-fg-default-shy);
|
||||
}
|
||||
}
|
||||
|
||||
.CategorySection.is-automatic .CategoryIcon {
|
||||
color: var(--theme-color-success);
|
||||
background-color: rgba(34, 197, 94, 0.15);
|
||||
}
|
||||
|
||||
.CategorySection.is-simpleFixes .CategoryIcon {
|
||||
color: var(--theme-color-warning);
|
||||
background-color: rgba(251, 191, 36, 0.15);
|
||||
}
|
||||
|
||||
.CategorySection.is-needsReview .CategoryIcon {
|
||||
color: var(--theme-color-danger);
|
||||
background-color: rgba(239, 68, 68, 0.15);
|
||||
}
|
||||
|
||||
.CategoryHeader:hover .CategoryIcon {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.CategoryInfo {
|
||||
.IssueContent {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.CategoryTitle {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: var(--theme-color-fg-highlight);
|
||||
}
|
||||
|
||||
.CategoryDescription {
|
||||
font-size: 12px;
|
||||
color: var(--theme-color-fg-default);
|
||||
}
|
||||
|
||||
.CategoryCount {
|
||||
background-color: var(--theme-color-bg-4);
|
||||
padding: 4px 12px;
|
||||
border-radius: 12px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--theme-color-fg-highlight);
|
||||
border: 1px solid var(--theme-color-bg-1);
|
||||
}
|
||||
|
||||
.ExpandIcon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
color: var(--theme-color-fg-muted);
|
||||
transition: transform 250ms ease-in-out;
|
||||
flex-shrink: 0;
|
||||
|
||||
svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.CategorySection.is-expanded .ExpandIcon {
|
||||
transform: rotate(180deg);
|
||||
color: var(--theme-color-primary);
|
||||
}
|
||||
|
||||
.ComponentList {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
padding: 12px;
|
||||
max-height: 250px;
|
||||
overflow-y: auto;
|
||||
animation: slideInUp 250ms ease-out;
|
||||
|
||||
/* Custom scrollbar */
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: var(--theme-color-bg-3);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: var(--theme-color-bg-1);
|
||||
border-radius: 3px;
|
||||
|
||||
&:hover {
|
||||
background: var(--theme-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ComponentItem {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 12px 16px;
|
||||
background-color: var(--theme-color-bg-4);
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--theme-color-bg-3);
|
||||
transition: all 200ms ease-in-out;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--theme-color-bg-3);
|
||||
border-color: var(--theme-color-primary);
|
||||
transform: translateX(4px);
|
||||
}
|
||||
}
|
||||
|
||||
.ComponentName {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--theme-color-fg-highlight);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background-color: var(--theme-color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.ComponentIssueCount {
|
||||
font-size: 11px;
|
||||
color: var(--theme-color-fg-default);
|
||||
background-color: var(--theme-color-bg-2);
|
||||
padding: 3px 8px;
|
||||
border-radius: 10px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.AiPromptSection {
|
||||
margin-top: 20px;
|
||||
padding: 24px;
|
||||
background: linear-gradient(135deg, rgba(139, 92, 246, 0.12) 0%, rgba(139, 92, 246, 0.08) 100%);
|
||||
border: 2px solid rgba(139, 92, 246, 0.3);
|
||||
border-radius: 12px;
|
||||
position: relative;
|
||||
.IssuePath {
|
||||
font-family: var(--font-family-mono, monospace);
|
||||
font-size: var(--font-size-small, 12px);
|
||||
color: var(--theme-color-fg-default-shy);
|
||||
overflow: hidden;
|
||||
transition: all 250ms ease-in-out;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
left: -2px;
|
||||
right: -2px;
|
||||
bottom: -2px;
|
||||
background: linear-gradient(45deg, rgba(139, 92, 246, 0.3), rgba(168, 85, 247, 0.3), rgba(139, 92, 246, 0.3));
|
||||
background-size: 200% 200%;
|
||||
animation: shimmer 3s ease-in-out infinite;
|
||||
border-radius: 12px;
|
||||
opacity: 0;
|
||||
transition: opacity 250ms ease-in-out;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
&:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.AiPromptHeader {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
svg {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
color: #8b5cf6;
|
||||
animation: sparkle 2s ease-in-out infinite;
|
||||
filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.4));
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #8b5cf6;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.AiPromptContent {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
|
||||
p {
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
color: var(--theme-color-fg-default);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
strong {
|
||||
color: var(--theme-color-fg-highlight);
|
||||
}
|
||||
}
|
||||
|
||||
.AiPromptFeatures {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-top: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.AiPromptFeature {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 6px 12px;
|
||||
background-color: rgba(139, 92, 246, 0.15);
|
||||
border-radius: 16px;
|
||||
font-size: 12px;
|
||||
color: #8b5cf6;
|
||||
font-weight: 500;
|
||||
|
||||
svg {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.AiPromptCost {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-weight: 600;
|
||||
color: #8b5cf6;
|
||||
|
||||
svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.AiPromptSection.is-disabled {
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
filter: grayscale(0.5);
|
||||
}
|
||||
|
||||
.Actions {
|
||||
margin-top: auto;
|
||||
padding-top: 24px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
.IssueMessage {
|
||||
font-size: var(--font-size-small, 12px);
|
||||
color: var(--theme-color-fg-default);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
@@ -1,337 +1,76 @@
|
||||
/**
|
||||
* ScanningStep Styles
|
||||
*
|
||||
* Enhanced scanning/migrating progress display with animations and better visualization.
|
||||
* CLEANUP-000H: ScanningStep — design token polish
|
||||
*/
|
||||
|
||||
.StepContainer {
|
||||
padding: var(--spacing-6, 24px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-4, 16px);
|
||||
}
|
||||
|
||||
.StepTitle {
|
||||
font-size: var(--font-size-large, 16px);
|
||||
font-weight: 600;
|
||||
color: var(--theme-color-fg-highlight, var(--theme-color-fg-default));
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.LoadingContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: var(--spacing-8, 32px) var(--spacing-4, 16px);
|
||||
gap: var(--spacing-4, 16px);
|
||||
}
|
||||
|
||||
.Spinner {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border: 3px solid var(--theme-color-bg-3);
|
||||
border-top-color: var(--theme-color-primary);
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% {
|
||||
background-position: -1000px 0;
|
||||
}
|
||||
100% {
|
||||
background-position: 1000px 0;
|
||||
}
|
||||
.LoadingText {
|
||||
font-size: var(--font-size-default, 13px);
|
||||
color: var(--theme-color-fg-default-shy);
|
||||
text-align: center;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
@keyframes slideInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInSlide {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(-10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
.Root {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
gap: 24px;
|
||||
animation: slideInUp 300ms ease-out;
|
||||
}
|
||||
|
||||
.Header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
margin-bottom: 4px;
|
||||
|
||||
svg {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
color: var(--theme-color-primary);
|
||||
animation: spin 1.5s linear infinite;
|
||||
filter: drop-shadow(0 0 8px rgba(66, 135, 245, 0.3));
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: var(--theme-color-fg-highlight);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
color: var(--theme-color-fg-default);
|
||||
margin: 4px 0 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.ProgressSection {
|
||||
padding: 24px;
|
||||
background: linear-gradient(135deg, var(--theme-color-bg-3) 0%, var(--theme-color-bg-2) 100%);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid var(--theme-color-bg-2);
|
||||
}
|
||||
|
||||
.ProgressHeader {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
|
||||
h3 {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--theme-color-fg-highlight);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: var(--theme-color-primary);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.CurrentFile {
|
||||
font-size: var(--font-size-small, 12px);
|
||||
color: var(--theme-color-fg-default-shy);
|
||||
font-family: var(--font-family-mono, monospace);
|
||||
text-align: center;
|
||||
max-width: 400px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ProgressBar {
|
||||
height: 12px;
|
||||
background-color: var(--theme-color-bg-1);
|
||||
border-radius: 6px;
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
height: 4px;
|
||||
background-color: var(--theme-color-bg-3);
|
||||
border-radius: 99px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 50%;
|
||||
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), transparent);
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.ProgressFill {
|
||||
height: 100%;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
var(--theme-color-primary) 0%,
|
||||
rgba(66, 135, 245, 0.8) 50%,
|
||||
var(--theme-color-primary) 100%
|
||||
);
|
||||
background-size: 200% 100%;
|
||||
border-radius: 6px;
|
||||
transition: width 400ms ease-out;
|
||||
animation: shimmer 2s linear infinite;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 20px;
|
||||
height: 100%;
|
||||
background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.4));
|
||||
border-radius: 0 6px 6px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.CurrentFile {
|
||||
margin-top: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 12px;
|
||||
color: var(--theme-color-fg-default);
|
||||
animation: pulse 1.5s ease-in-out infinite;
|
||||
|
||||
svg {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
color: var(--theme-color-primary);
|
||||
}
|
||||
|
||||
span {
|
||||
font-family: monospace;
|
||||
color: var(--theme-color-fg-highlight);
|
||||
}
|
||||
}
|
||||
|
||||
.StatsGrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 12px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.StatCard {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 16px;
|
||||
background-color: var(--theme-color-bg-4);
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--theme-color-bg-2);
|
||||
transition: all 200ms ease-in-out;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
.StatIcon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 8px;
|
||||
color: var(--theme-color-primary);
|
||||
|
||||
svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.StatValue {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: var(--theme-color-fg-highlight);
|
||||
line-height: 1;
|
||||
margin-bottom: 4px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.StatLabel {
|
||||
font-size: 11px;
|
||||
color: var(--theme-color-fg-default);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.ActivityLog {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: var(--theme-color-bg-3);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ActivityHeader {
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid var(--theme-color-bg-2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.ActivityList {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 8px;
|
||||
max-height: 200px;
|
||||
}
|
||||
|
||||
.ActivityItem {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
padding: 6px 8px;
|
||||
font-size: 12px;
|
||||
border-radius: 4px;
|
||||
animation: fadeIn 0.2s ease;
|
||||
|
||||
&.is-info {
|
||||
color: var(--theme-color-secondary-as-fg);
|
||||
}
|
||||
|
||||
&.is-success {
|
||||
color: var(--theme-color-success);
|
||||
}
|
||||
|
||||
&.is-warning {
|
||||
color: var(--theme-color-warning);
|
||||
}
|
||||
|
||||
&.is-error {
|
||||
color: var(--theme-color-danger);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.ActivityTime {
|
||||
color: var(--theme-color-secondary-as-fg);
|
||||
font-family: monospace;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.ActivityMessage {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.EmptyActivity {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100px;
|
||||
color: var(--theme-color-secondary-as-fg);
|
||||
}
|
||||
|
||||
.InfoBox {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
padding: 12px 16px;
|
||||
background-color: rgba(59, 130, 246, 0.1);
|
||||
border: 1px solid rgba(59, 130, 246, 0.3);
|
||||
border-radius: 8px;
|
||||
|
||||
svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
flex-shrink: 0;
|
||||
color: var(--theme-color-primary);
|
||||
}
|
||||
background-color: var(--theme-color-primary);
|
||||
border-radius: 99px;
|
||||
transition: width 300ms ease;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user