mirror of
https://github.com/The-Low-Code-Foundation/OpenNoodl.git
synced 2026-03-07 17:43:28 +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
|
* CLEANUP-000H: MigrationWizard shell — design token polish
|
||||||
*
|
|
||||||
* Main container for the migration wizard using CoreBaseDialog.
|
|
||||||
* Enhanced with modern visual design, animations, and better spacing.
|
|
||||||
*/
|
*/
|
||||||
|
|
||||||
/* Animation definitions */
|
.Root {
|
||||||
@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;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
background-color: var(--theme-color-bg-4);
|
width: 100%;
|
||||||
border-radius: var(--wizard-radius-lg);
|
height: 100%;
|
||||||
|
background-color: var(--theme-color-bg-2);
|
||||||
|
color: var(--theme-color-fg-default);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
box-shadow: var(--wizard-shadow-lg);
|
|
||||||
animation: fadeIn var(--wizard-transition-base);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.CloseButton {
|
.Header {
|
||||||
position: absolute;
|
display: flex;
|
||||||
top: var(--wizard-space-md);
|
align-items: center;
|
||||||
right: var(--wizard-space-md);
|
justify-content: space-between;
|
||||||
z-index: 10;
|
padding: var(--spacing-4, 16px) var(--spacing-5, 20px);
|
||||||
transition: transform var(--wizard-transition-fast);
|
border-bottom: 1px solid var(--theme-color-border-default);
|
||||||
|
background-color: var(--theme-color-bg-1);
|
||||||
&:hover {
|
flex-shrink: 0;
|
||||||
transform: scale(1.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:active {
|
|
||||||
transform: scale(0.95);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.WizardHeader {
|
.Title {
|
||||||
padding: var(--wizard-space-xl) var(--wizard-space-xl) var(--wizard-space-lg);
|
font-size: var(--font-size-large, 16px);
|
||||||
padding-right: var(--wizard-space-xxl); // Space for close button
|
font-weight: 600;
|
||||||
border-bottom: 1px solid var(--theme-color-bg-3);
|
color: var(--theme-color-fg-highlight, var(--theme-color-fg-default));
|
||||||
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.WizardContent {
|
.Body {
|
||||||
|
flex: 1;
|
||||||
|
overflow-y: auto;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
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 {
|
.StepContainer {
|
||||||
flex: 1;
|
padding: var(--spacing-6, 24px);
|
||||||
min-height: 300px;
|
display: flex;
|
||||||
animation: slideIn var(--wizard-transition-base);
|
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
|
* CLEANUP-000H: WizardProgress — design token polish
|
||||||
*
|
* All colours via tokens. No hardcoded values.
|
||||||
* Enhanced step progress indicator for migration wizard with animations and better visuals.
|
|
||||||
*/
|
*/
|
||||||
|
|
||||||
@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 {
|
.Root {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 0;
|
gap: var(--spacing-2, 8px);
|
||||||
padding: 16px 0 24px;
|
padding: var(--spacing-3, 12px) var(--spacing-4, 16px);
|
||||||
margin-bottom: 8px;
|
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;
|
display: flex;
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 8px;
|
gap: var(--spacing-2, 8px);
|
||||||
flex: 1;
|
|
||||||
position: relative;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.StepCircle {
|
.StepNumber {
|
||||||
width: 36px;
|
width: 24px;
|
||||||
height: 36px;
|
height: 24px;
|
||||||
border-radius: 50%;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
font-size: 13px;
|
border-radius: 50%;
|
||||||
font-weight: 600;
|
font-size: var(--font-size-xsmall, 11px);
|
||||||
background-color: var(--theme-color-bg-2);
|
font-weight: 500;
|
||||||
color: var(--theme-color-fg-muted);
|
transition: background-color 150ms ease, color 150ms ease;
|
||||||
border: 2px solid var(--theme-color-bg-2);
|
|
||||||
transition: all 300ms ease-in-out;
|
|
||||||
position: relative;
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.Step.is-completed .StepCircle {
|
// Default (pending) state
|
||||||
background-color: var(--theme-color-success);
|
background-color: var(--theme-color-bg-4, var(--theme-color-bg-3));
|
||||||
border-color: var(--theme-color-success);
|
color: var(--theme-color-fg-default-shy);
|
||||||
color: white;
|
|
||||||
animation: checkmark 400ms ease-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.Step.is-active .StepCircle {
|
&.is-active {
|
||||||
background-color: var(--theme-color-primary);
|
background-color: var(--theme-color-primary);
|
||||||
border-color: var(--theme-color-primary);
|
color: var(--theme-color-bg-1);
|
||||||
color: white;
|
}
|
||||||
animation: pulse 2s ease-in-out infinite;
|
|
||||||
box-shadow: 0 0 0 0 rgba(66, 135, 245, 0.7);
|
&.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 {
|
.StepLabel {
|
||||||
font-size: 11px;
|
font-size: var(--font-size-small, 12px);
|
||||||
font-weight: 500;
|
color: var(--theme-color-fg-default-shy);
|
||||||
color: var(--theme-color-fg-muted);
|
|
||||||
text-align: center;
|
&.is-active {
|
||||||
max-width: 80px;
|
color: var(--theme-color-fg-default);
|
||||||
transition: color 200ms ease-in-out;
|
font-weight: 500;
|
||||||
line-height: 1.3;
|
}
|
||||||
|
|
||||||
|
&.is-complete {
|
||||||
|
color: var(--theme-color-success, #22c55e);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.Step.is-completed .StepLabel,
|
.StepConnector {
|
||||||
.Step.is-active .StepLabel {
|
|
||||||
color: var(--theme-color-fg-highlight);
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.Connector {
|
|
||||||
flex: 1;
|
flex: 1;
|
||||||
height: 2px;
|
height: 2px;
|
||||||
background-color: var(--theme-color-bg-2);
|
background-color: var(--theme-color-bg-4, var(--theme-color-bg-3));
|
||||||
margin: 0 -4px;
|
min-width: 20px;
|
||||||
margin-bottom: 28px;
|
|
||||||
position: relative;
|
|
||||||
z-index: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
&::after {
|
&.is-complete {
|
||||||
content: '';
|
background-color: var(--theme-color-success, #22c55e);
|
||||||
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;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,329 +1,105 @@
|
|||||||
/**
|
/**
|
||||||
* CompleteStep Styles
|
* CLEANUP-000H: CompleteStep — design token polish
|
||||||
*
|
|
||||||
* Enhanced final step with celebration and beautiful summary.
|
|
||||||
*/
|
*/
|
||||||
|
|
||||||
@keyframes slideInUp {
|
.StepContainer {
|
||||||
from {
|
padding: var(--spacing-6, 24px);
|
||||||
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 {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
height: 100%;
|
gap: var(--spacing-4, 16px);
|
||||||
animation: slideInUp 300ms ease-out;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.Header {
|
.StepTitle {
|
||||||
display: flex;
|
font-size: var(--font-size-large, 16px);
|
||||||
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;
|
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
color: var(--theme-color-fg-highlight, var(--theme-color-fg-default));
|
||||||
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.MetaInfo {
|
// Success banner
|
||||||
|
.SuccessBanner {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 20px;
|
align-items: center;
|
||||||
margin-bottom: 20px;
|
gap: var(--spacing-3, 12px);
|
||||||
padding: 16px;
|
padding: var(--spacing-4, 16px);
|
||||||
background: linear-gradient(135deg, var(--theme-color-bg-3) 0%, var(--theme-color-bg-2) 100%);
|
background-color: color-mix(in srgb, var(--theme-color-success, #22c55e) 10%, transparent);
|
||||||
border-radius: 10px;
|
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;
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.MetaItem {
|
.StatItem {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: baseline;
|
||||||
gap: 8px;
|
gap: var(--spacing-2, 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);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.Paths {
|
.StatValue {
|
||||||
padding: 20px;
|
font-size: 24px;
|
||||||
background: linear-gradient(135deg, var(--theme-color-bg-3) 0%, var(--theme-color-bg-2) 100%);
|
font-weight: 700;
|
||||||
border-radius: 12px;
|
color: var(--theme-color-fg-highlight, var(--theme-color-fg-default));
|
||||||
border: 1px solid var(--theme-color-bg-2);
|
line-height: 1;
|
||||||
margin-bottom: 20px;
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: var(--theme-color-fg-highlight);
|
|
||||||
margin: 0 0 16px 0;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.PathItem {
|
.StatLabel {
|
||||||
display: flex;
|
font-size: var(--font-size-small, 12px);
|
||||||
gap: 16px;
|
color: var(--theme-color-fg-default-shy);
|
||||||
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);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.PathContent {
|
// What's next section
|
||||||
|
.NextStepsSection {
|
||||||
|
padding-top: var(--spacing-4, 16px);
|
||||||
|
border-top: 1px solid var(--theme-color-border-default);
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 6px;
|
gap: var(--spacing-3, 12px);
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.NextSteps {
|
.NextStepsTitle {
|
||||||
padding: 20px;
|
font-size: 10px;
|
||||||
background: linear-gradient(135deg, var(--theme-color-bg-3) 0%, var(--theme-color-bg-2) 100%);
|
font-weight: 600;
|
||||||
border-radius: 12px;
|
letter-spacing: 0.08em;
|
||||||
border: 1px solid var(--theme-color-bg-2);
|
color: var(--theme-color-fg-default-shy);
|
||||||
margin-bottom: 20px;
|
text-transform: uppercase;
|
||||||
|
|
||||||
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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.StepsList {
|
.ChecklistItem {
|
||||||
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;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-end;
|
align-items: flex-start;
|
||||||
gap: 12px;
|
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
|
* CLEANUP-000H: ConfirmStep — design token polish
|
||||||
*
|
|
||||||
* First step of migration wizard - confirm source and target paths.
|
|
||||||
* Enhanced with better visual hierarchy and animations.
|
|
||||||
*/
|
*/
|
||||||
|
|
||||||
@keyframes arrowBounce {
|
.StepContainer {
|
||||||
0%,
|
padding: var(--spacing-6, 24px);
|
||||||
100% {
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
transform: translateY(4px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes slideInUp {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateY(10px);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.Root {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
height: 100%;
|
gap: var(--spacing-4, 16px);
|
||||||
animation: slideInUp 300ms ease-out;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.Header {
|
.StepTitle {
|
||||||
display: flex;
|
font-size: var(--font-size-large, 16px);
|
||||||
align-items: center;
|
font-weight: 600;
|
||||||
gap: 12px;
|
color: var(--theme-color-fg-highlight, var(--theme-color-fg-default));
|
||||||
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 {
|
|
||||||
margin: 0;
|
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;
|
line-height: 1.6;
|
||||||
|
|
||||||
li {
|
|
||||||
margin-bottom: 8px;
|
|
||||||
padding-left: 4px;
|
|
||||||
|
|
||||||
&::marker {
|
|
||||||
color: var(--theme-color-primary);
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.WarningBox {
|
.StepContent {
|
||||||
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 {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 4px;
|
gap: var(--spacing-4, 16px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.WarningTitle {
|
.InfoCard {
|
||||||
font-weight: 500;
|
background-color: var(--theme-color-bg-3);
|
||||||
color: var(--theme-color-warning);
|
border: 1px solid var(--theme-color-border-default);
|
||||||
}
|
border-radius: var(--border-radius-small, 4px);
|
||||||
|
padding: var(--spacing-4, 16px);
|
||||||
.Actions {
|
|
||||||
margin-top: auto;
|
|
||||||
padding-top: 24px;
|
|
||||||
display: flex;
|
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
|
* CLEANUP-000H: FailedStep — design token polish
|
||||||
*
|
|
||||||
* Enhanced error state with helpful suggestions and beautiful error display.
|
|
||||||
*/
|
*/
|
||||||
|
|
||||||
@keyframes slideInUp {
|
.StepContainer {
|
||||||
from {
|
padding: var(--spacing-6, 24px);
|
||||||
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 {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
height: 100%;
|
gap: var(--spacing-4, 16px);
|
||||||
animation: slideInUp 300ms ease-out;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.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;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
gap: var(--spacing-2, 8px);
|
||||||
gap: 16px;
|
flex: 1;
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.ErrorBox {
|
.ErrorTitle {
|
||||||
margin-bottom: 20px;
|
font-size: var(--font-size-default, 13px);
|
||||||
background: linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0%, rgba(239, 68, 68, 0.05) 100%);
|
font-weight: 600;
|
||||||
border: 2px solid rgba(239, 68, 68, 0.3);
|
color: var(--theme-color-danger, #ef4444);
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.ErrorMessage {
|
.ErrorMessage {
|
||||||
padding: 20px;
|
font-size: var(--font-size-small, 12px);
|
||||||
font-family: monospace;
|
color: var(--theme-color-fg-default);
|
||||||
font-size: 13px;
|
line-height: 1.5;
|
||||||
line-height: 1.6;
|
}
|
||||||
color: var(--theme-color-fg-highlight);
|
|
||||||
background-color: var(--theme-color-bg-4);
|
// Error details (collapsible/scrollable)
|
||||||
word-break: break-word;
|
.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;
|
white-space: pre-wrap;
|
||||||
|
word-break: break-word;
|
||||||
|
max-height: 200px;
|
||||||
|
overflow-y: auto;
|
||||||
|
border: 1px solid var(--theme-color-border-default);
|
||||||
}
|
}
|
||||||
|
|
||||||
.Suggestions {
|
.ActionRow {
|
||||||
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 {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 16px;
|
align-items: center;
|
||||||
padding: 20px;
|
gap: var(--spacing-2, 8px);
|
||||||
background: linear-gradient(135deg, rgba(34, 197, 94, 0.12) 0%, rgba(34, 197, 94, 0.08) 100%);
|
padding-top: var(--spacing-2, 8px);
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.Actions {
|
.HintText {
|
||||||
margin-top: auto;
|
font-size: var(--font-size-small, 12px);
|
||||||
padding-top: 24px;
|
color: var(--theme-color-fg-default-shy);
|
||||||
display: flex;
|
line-height: 1.5;
|
||||||
justify-content: flex-end;
|
|
||||||
gap: 12px;
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,417 +1,91 @@
|
|||||||
/**
|
/**
|
||||||
* MigratingStep Styles
|
* CLEANUP-000H: MigratingStep — design token polish
|
||||||
*
|
* Same loading pattern as ScanningStep.
|
||||||
* Enhanced AI-assisted migration progress display with beautiful budget tracking and decision panels.
|
|
||||||
*/
|
*/
|
||||||
|
|
||||||
@keyframes slideInUp {
|
.StepContainer {
|
||||||
from {
|
padding: var(--spacing-6, 24px);
|
||||||
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 {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
height: 100%;
|
gap: var(--spacing-4, 16px);
|
||||||
gap: 20px;
|
|
||||||
animation: slideInUp 300ms ease-out;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.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;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 16px;
|
justify-content: center;
|
||||||
margin-bottom: 4px;
|
padding: var(--spacing-8, 32px) var(--spacing-4, 16px);
|
||||||
|
gap: var(--spacing-4, 16px);
|
||||||
|
}
|
||||||
|
|
||||||
svg {
|
.Spinner {
|
||||||
width: 28px;
|
width: 48px;
|
||||||
height: 28px;
|
height: 48px;
|
||||||
color: var(--theme-color-primary);
|
border: 3px solid var(--theme-color-bg-3);
|
||||||
animation: spin 1.5s linear infinite;
|
border-top-color: var(--theme-color-primary);
|
||||||
filter: drop-shadow(0 0 8px rgba(66, 135, 245, 0.3));
|
border-radius: 50%;
|
||||||
}
|
animation: spin 1s linear infinite;
|
||||||
|
flex-shrink: 0;
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes spin {
|
@keyframes spin {
|
||||||
from {
|
|
||||||
transform: rotate(0deg);
|
|
||||||
}
|
|
||||||
to {
|
to {
|
||||||
transform: rotate(360deg);
|
transform: rotate(360deg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Budget Section */
|
.LoadingText {
|
||||||
.BudgetSection {
|
font-size: var(--font-size-default, 13px);
|
||||||
padding: 20px;
|
color: var(--theme-color-fg-default-shy);
|
||||||
background: linear-gradient(135deg, var(--theme-color-bg-3) 0%, var(--theme-color-bg-2) 100%);
|
text-align: center;
|
||||||
border-radius: 12px;
|
line-height: 1.5;
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.BudgetHeader {
|
.CurrentFile {
|
||||||
display: flex;
|
font-size: var(--font-size-small, 12px);
|
||||||
justify-content: space-between;
|
color: var(--theme-color-fg-default-shy);
|
||||||
align-items: center;
|
font-family: var(--font-family-mono, monospace);
|
||||||
margin-bottom: 16px;
|
text-align: center;
|
||||||
|
max-width: 400px;
|
||||||
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;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
position: relative;
|
text-overflow: ellipsis;
|
||||||
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
|
white-space: nowrap;
|
||||||
|
|
||||||
&::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;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.ProgressBar {
|
.ProgressBar {
|
||||||
height: 8px;
|
width: 100%;
|
||||||
|
max-width: 300px;
|
||||||
|
height: 4px;
|
||||||
background-color: var(--theme-color-bg-3);
|
background-color: var(--theme-color-bg-3);
|
||||||
border-radius: 4px;
|
border-radius: 99px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ProgressFill {
|
.ProgressFill {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background-color: var(--theme-color-primary);
|
background-color: var(--theme-color-primary);
|
||||||
border-radius: 4px;
|
border-radius: 99px;
|
||||||
transition: width 0.3s ease;
|
transition: width 300ms ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Current Component */
|
.MigrationLog {
|
||||||
.CurrentComponent {
|
width: 100%;
|
||||||
display: flex;
|
max-height: 160px;
|
||||||
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;
|
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
}
|
background-color: var(--theme-color-bg-1);
|
||||||
|
border: 1px solid var(--theme-color-border-default);
|
||||||
.LogEntries {
|
border-radius: var(--border-radius-small, 4px);
|
||||||
display: flex;
|
padding: var(--spacing-2, 8px) var(--spacing-3, 12px);
|
||||||
flex-direction: column;
|
font-family: var(--font-family-mono, monospace);
|
||||||
gap: 4px;
|
font-size: var(--font-size-small, 12px);
|
||||||
}
|
color: var(--theme-color-fg-default-shy);
|
||||||
|
line-height: 1.6;
|
||||||
.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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,503 +1,127 @@
|
|||||||
/**
|
/**
|
||||||
* ReportStep Styles
|
* CLEANUP-000H: ReportStep — design token polish
|
||||||
*
|
|
||||||
* Enhanced scan results report with beautiful categories and AI options.
|
|
||||||
*/
|
*/
|
||||||
|
|
||||||
@keyframes slideInUp {
|
.StepContainer {
|
||||||
from {
|
padding: var(--spacing-6, 24px);
|
||||||
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 {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
height: 100%;
|
gap: var(--spacing-4, 16px);
|
||||||
animation: slideInUp 300ms ease-out;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.Header {
|
.StepTitle {
|
||||||
display: flex;
|
font-size: var(--font-size-large, 16px);
|
||||||
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;
|
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
color: var(--theme-color-fg-highlight, var(--theme-color-fg-default));
|
||||||
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.Categories {
|
.StepDescription {
|
||||||
flex: 1;
|
font-size: var(--font-size-default, 13px);
|
||||||
overflow-y: auto;
|
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;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 12px;
|
gap: var(--spacing-1, 4px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.CategorySection {
|
.SummaryValue {
|
||||||
background-color: var(--theme-color-bg-3);
|
font-size: 24px;
|
||||||
border-radius: 10px;
|
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;
|
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 {
|
.IssueListEmpty {
|
||||||
background-color: var(--theme-color-bg-2);
|
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;
|
display: flex;
|
||||||
align-items: center;
|
align-items: flex-start;
|
||||||
gap: 12px;
|
gap: var(--spacing-3, 12px);
|
||||||
padding: 16px 20px;
|
border-bottom: 1px solid var(--theme-color-border-default);
|
||||||
background-color: transparent;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 200ms ease-in-out;
|
|
||||||
user-select: none;
|
|
||||||
|
|
||||||
&:hover {
|
&:last-child {
|
||||||
background-color: var(--theme-color-bg-2);
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&:nth-child(even) {
|
||||||
transform: scale(0.98);
|
background-color: color-mix(in srgb, var(--theme-color-bg-3) 30%, transparent);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.CategorySection.is-expanded .CategoryHeader {
|
.IssueIcon {
|
||||||
background-color: var(--theme-color-bg-1);
|
width: 16px;
|
||||||
border-bottom: 1px solid var(--theme-color-bg-3);
|
height: 16px;
|
||||||
}
|
|
||||||
|
|
||||||
.CategoryIcon {
|
|
||||||
width: 36px;
|
|
||||||
height: 36px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
border-radius: 8px;
|
|
||||||
transition: all 200ms ease-in-out;
|
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
|
margin-top: 1px;
|
||||||
|
|
||||||
svg {
|
&--warning {
|
||||||
width: 18px;
|
color: var(--theme-color-notice, #f59e0b);
|
||||||
height: 18px;
|
}
|
||||||
|
|
||||||
|
&--error {
|
||||||
|
color: var(--theme-color-danger, #ef4444);
|
||||||
|
}
|
||||||
|
|
||||||
|
&--info {
|
||||||
|
color: var(--theme-color-fg-default-shy);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.CategorySection.is-automatic .CategoryIcon {
|
.IssueContent {
|
||||||
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 {
|
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
overflow: hidden;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 2px;
|
gap: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.CategoryTitle {
|
.IssuePath {
|
||||||
font-size: 15px;
|
font-family: var(--font-family-mono, monospace);
|
||||||
font-weight: 600;
|
font-size: var(--font-size-small, 12px);
|
||||||
color: var(--theme-color-fg-highlight);
|
color: var(--theme-color-fg-default-shy);
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
transition: all 250ms ease-in-out;
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
&::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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.AiPromptHeader {
|
.IssueMessage {
|
||||||
display: flex;
|
font-size: var(--font-size-small, 12px);
|
||||||
align-items: center;
|
color: var(--theme-color-fg-default);
|
||||||
gap: 12px;
|
line-height: 1.4;
|
||||||
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;
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,337 +1,76 @@
|
|||||||
/**
|
/**
|
||||||
* ScanningStep Styles
|
* CLEANUP-000H: ScanningStep — design token polish
|
||||||
*
|
|
||||||
* Enhanced scanning/migrating progress display with animations and better visualization.
|
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
.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 {
|
@keyframes spin {
|
||||||
from {
|
|
||||||
transform: rotate(0deg);
|
|
||||||
}
|
|
||||||
to {
|
to {
|
||||||
transform: rotate(360deg);
|
transform: rotate(360deg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes shimmer {
|
.LoadingText {
|
||||||
0% {
|
font-size: var(--font-size-default, 13px);
|
||||||
background-position: -1000px 0;
|
color: var(--theme-color-fg-default-shy);
|
||||||
}
|
text-align: center;
|
||||||
100% {
|
line-height: 1.5;
|
||||||
background-position: 1000px 0;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes slideInUp {
|
.CurrentFile {
|
||||||
from {
|
font-size: var(--font-size-small, 12px);
|
||||||
opacity: 0;
|
color: var(--theme-color-fg-default-shy);
|
||||||
transform: translateY(10px);
|
font-family: var(--font-family-mono, monospace);
|
||||||
}
|
text-align: center;
|
||||||
to {
|
max-width: 400px;
|
||||||
opacity: 1;
|
overflow: hidden;
|
||||||
transform: translateY(0);
|
text-overflow: ellipsis;
|
||||||
}
|
white-space: nowrap;
|
||||||
}
|
|
||||||
|
|
||||||
@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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.ProgressBar {
|
.ProgressBar {
|
||||||
height: 12px;
|
width: 100%;
|
||||||
background-color: var(--theme-color-bg-1);
|
max-width: 300px;
|
||||||
border-radius: 6px;
|
height: 4px;
|
||||||
|
background-color: var(--theme-color-bg-3);
|
||||||
|
border-radius: 99px;
|
||||||
overflow: hidden;
|
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 {
|
.ProgressFill {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background: linear-gradient(
|
background-color: var(--theme-color-primary);
|
||||||
90deg,
|
border-radius: 99px;
|
||||||
var(--theme-color-primary) 0%,
|
transition: width 300ms ease;
|
||||||
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);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user